컬렉션 조건 활성화

Collections 조건을 사용하려면 테마에 작은 템플릿 파일이 하나 필요합니다. 이 파일이 없으면 앱이 스토어프런트에서 제품이 어느 컬렉션에 속하는지 알 수 없으므로 컬렉션을 대상으로 한 카운트다운이 나타나지 않습니다.

테마마다 한 번만 설정하면 되며, 필요한 경우 앱이 알려 줍니다. 카운트다운 빌더에 경고 배너가 표시되고, 지원팀이 대신 설정해 주기를 원하면 Request setup 버튼을 누르면 됩니다.

참고

다른 조건인 All Products, Select products, Product variants, Page, Customer, Language, Country에는 이 파일이 필요하지 않습니다. Collections만 필요합니다.

파일 추가 단계

1. 테마 코드 편집기 열기

   Shopify 관리자에서 온라인 스토어 → 테마로 이동하세요. 원하는 테마에서 …(더 많은 작업) 버튼을 클릭하고 코드 편집을 선택합니다.

   

   더 많은 작업 → 코드 편집에서 테마의 코드 편집기를 여세요.

2. 새 템플릿 파일 만들기

   Templates 폴더에서 새 템플릿 추가를 클릭하고, 유형이 liquid인 search 템플릿을 선택한 다음 이름을 입력하세요.

   samiCountdownsProductsJson

   Shopify가 이 파일을 templates/search.samiCountdownsProductsJson.liquid로 저장합니다.

   

   samiCountdownsProductsJson이라는 이름의 search 템플릿을 만드세요.

3. 내용 바꾸기

   Shopify가 새 파일에 넣은 내용을 모두 삭제하고 그 자리에 다음 코드를 붙여넣으세요.

   {%- layout none -%}
   {%- paginate search.results by 1000 -%}
       [{%- for product in search.results -%}
           {%- unless forloop.first -%},{%- endunless -%}
           {
               "id":{{-product.id-}},
               "title":{{-product.title | json-}},
               "handle":{{-product.handle | json-}},
               "price":"{{-product.price-}}",
               "price_max":"{{-product.price_max}}",
               "price_min":"{{-product.price_min}}",
               "type":{{-product.type | json-}},
               "created_at":"{{-product.created_at | date: "%Y-%m-%d %H:%M" -}}",
               "published_at":"{{-product.published_at | date: "%Y-%m-%d %H:%M" -}}",
               "tags": {{-product.tags | json-}},
               "vendor": {{-product.vendor | json-}},
               "featured_image":"{{-product.featured_image-}}",
               "url":"{{-product.url-}}",
               "collections":{{-product.collections | map: 'id' | json-}},
               "compare_at_price":"{{-product.compare_at_price-}}",
               "compare_at_price_max": "{{-product.compare_at_price_max-}}",
               "compare_at_price_min": "{{-product.compare_at_price_min-}}",
               "price_varies": "{{-product.price_varies-}}",
               "compare_at_price_varies": "{{-product.compare_at_price_varies-}}",
               "images":[
               {%- for image in product.images -%}{%- unless forloop.first -%},
               {%- endunless -%}{"id":{{-image.id-}},
               "src":{{-image.src | json-}}}{%- endfor -%}],
               "first_available_variant":{"id":{{-product.selected_or_first_available_variant.id | times: 1 -}}},
               "available":{{-product.available | json-}},
               "options": {{-product.options | json-}},
               "variants":[
                   {%- for variant in product.variants -%}{%- unless forloop.first -%},
                       {%- endunless -%}
                       {
                       "id":{{-variant.id-}},
                       "title":{{-variant.title | json}},
                       "name":{{-variant.name | json}},
                       "price":{{-variant.price-}},
                       "compare_at_price":{{-variant.compare_at_price | times: 1-}},
                       "available":{{-variant.available-}},
                       "sku":{{-variant.sku | json -}},
                       "weight":"{{-variant.weight-}}",
                       "weight_unit": "{{-variant.weight_unit-}}",
                       "inventory_quantity":{{-variant.inventory_quantity-}},
                       "option1":  {{-variant.option1| json-}},
                       "option2":  {{-variant.option2| json-}},
                       "option3":  {{-variant.option3| json-}},
                       "options":  {{-variant.options| json-}},
                       "selected": {%- if variant.selected -%}  {{-variant.selected-}} {%- elsif product.selected_or_first_available_variant.id == variant.id -%} true  {%- else -%} false {%- endif -%}
                       }
                   {%- endfor -%}
               ]
           }
       {%- endfor -%}]
   {%- endpaginate -%}

4. 파일 저장하기

   코드 편집기에서 저장을 클릭하세요.

5. 앱으로 돌아가 Theme integration 열기

   Countdown Timer Bar Samita로 돌아가 Theme integration 페이지를 열어 앱이 이 테마의 변경 사항을 인식하도록 하세요.

6. 컬렉션 조건 테스트하기

   카운트다운을 열고 조건을 Collections로 설정해 컬렉션을 선택한 뒤 Active로 저장하고, 라이브 스토어프런트에서 해당 컬렉션의 제품을 열어 보세요. 카운트다운이 나타나야 합니다.

   컬렉션에 속하지 않는 제품도 확인해 보세요. 아무것도 표시되지 않아야 합니다.

이 파일이 하는 일

제품 정보를 웹 페이지가 아닌 데이터로 반환하는 search 템플릿입니다. 스토어프런트에서 앱이 다른 방법으로는 알 수 없는 각 제품의 컬렉션 정보도 포함합니다. 앱은 컬렉션 조건을 확인해야 할 때 백그라운드에서 이 파일을 요청하며, 방문자에게는 보이지 않습니다.

알아 두면 좋은 점

• 테마별로 필요합니다. 테마를 바꾸거나 새로 설치하면 그 테마에도 파일을 추가해야 합니다.
• 이름이 정확해야 합니다. 대문자를 포함해 samiCountdownsProductsJson이어야 합니다. 오타가 있으면 파일을 찾지 못하며, 페이지에는 오류가 표시되지 않습니다.
• 읽기만 하고 쓰지 않습니다. 이 파일은 테마의 동작이나 모양을 바꾸지 않습니다.

참고

테마 코드를 편집하는 것이 부담스러우신가요? 카운트다운 빌더의 경고 배너에 있는 Request setup 버튼을 누르면 지원팀과의 채팅이 열리며, 지원팀이 대신 추가해 드립니다. 지원팀에 직접 문의하셔도 됩니다.

다음 단계

• 표시 조건
• 테마 통합
• 카운트다운이 표시되지 않을 때
• 지원팀에 문의