페이지에 컬렉션 하위 집합 표시

테마 코드를 편집하여 사용자 지정 페이지에 컬렉션의 하위 집합을 표시할 수 있습니다. 이 튜토리얼은 메뉴를 사용하여 새 페이지 템플릿을 생성하고 표시할 컬렉션을 할당하는 방법을 보여줍니다.

모든 Shopify 스토어에는 URL www.mystore.com/collections에 스토어의 모든 컬렉션을 표시하는 컬렉션 목록 페이지가 있습니다. 이 튜토리얼의 대안으로 컬렉션 목록 페이지를 편집하여 선택한 컬렉션만 표시할 수 있습니다.

이 페이지의 정보

새 페이지 템플릿 생성

Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
편집할 테마를 찾은 다음 ... 버튼 > 코드 편집을 클릭합니다.
템플릿 디렉토리에서 새 템플릿 추가를 클릭합니다.
list-collections이라는 페이지에 대한 새 템플릿을 생성합니다.

새 page.list-collections 파일에서 기존 코드를 삭제합니다. 아래에서 테마 코드를 찾아 page.list-collections 파일에 코드를 복사하여 붙여넣습니다.
저장을 클릭합니다.

테마 선택

이 사용자 지정 코드는 테마별로 다릅니다. 테마의 버튼을 클릭하고 page.list-collections 파일에 복사하여 붙여넣습니다.

Boundless

Boundless 코드

코드를 복사합니다.

{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

{%- assign grid_item_width = 'small--one-half medium--one-third large-up--one-quarter' -%}
{%- case linklists[page.handle].links.size -%}
{%- when 2 -%}
 {%- assign grid_item_width = 'medium-up--one-half' -%}
{%- when 3 -%}
 {%- assign grid_item_width = 'small--one-half medium-up--one-third' %}
{%- else -%}
 {%- assign grid_item_width = 'small--one-half medium--one-third large-up--one-quarter' %}
{%- endcase -%}

<div class="page-width page-container">
  <header>
    <h1>{{ page.title }}</h1>
  </header>
  <div class="rte rte--indented-images">
    {{ page.content }}
  </div>

  <div class="grid grid--no-gutters collection-grid">
    {%- for link in linklists[page.handle].links -%}
      {%- if link.type == 'collection_link' -%}
        {%- assign featured = link.object.handle -%}
        {%- include 'collection-grid-item', collection: collections[featured] -%}
      {%- endif -%}
    {%- endfor -%}
  </div>
</div>

코드를 page.list-collections 파일에 붙여넣습니다.

Brooklyn

Brooklyn용 코드

코드를 복사합니다.

{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

{%- assign collection_count = 0 -%}
{%- assign isEmpty = true -%}
{%- for link in linklists[page.handle].links -%}
 {%- if link.type == 'collection_link' -%}
 {%- assign collection_count = collection_count | plus: 1 -%}
 {%- endif -%}
{%- endfor -%}

{%- assign collection_index = 0 -%}
{%- assign divisible_by_three = collection_count | modulo: 3 -%}
{%- assign divisible_by_two = collection_count | modulo: 2 -%}

<div class="grid">
 <div class="grid__item large--five-sixths push--large--one-twelfth">

   <header class="section-header text-center">
     <h1>{{ page.title }}</h1>
     <hr class="hr--small">
   </header>

   <div class="grid">
     <div class="grid__item large--four-fifths push--large--one-tenth">
       <div class="rte rte--nomargin rte--indented-images">
         {{ page.content }}
       </div>
     </div>
   </div>

 </div>
</div>

<div class="grid collection-grid">
 {%- for link in linklists[page.handle].links -%}
   {%- if link.type == 'collection_link' -%}
     {%- assign collection = collections[link.object.handle] -%}
     {%- assign collection_index = collection_index | plus: 1 -%}
     {%- assign collection_handle = collection.handle -%}
     {% include 'collection-grid-collage' %}
   {%- endif -%}
 {%- endfor -%}
</div>

코드를 page.list-collections 파일에 붙여넣습니다.

Debut

Debut 코드

코드를 복사합니다.

{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

<div class="page-width">
 <div class="grid">
   <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
     <div class="section-header text-center">
       <h1>{{ page.title }}</h1>
     </div>

     <div class="rte">
       {{ page.content }}
     </div>
   </div>
 </div>

 <ul class="grid grid--uniform">

   {%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
   {%- assign image_size = '350x' -%}

   {%- for link in linklists[page.handle].links -%}
     {%- if link.type == 'collection_link' -%}
       {%- assign collection = collections[link.object.handle] -%}
       <li class="grid__item {{ grid_item_width }}">
         {% include 'collection-grid-item', collection_image_size: image_size %}
       </li>
     {%- endif -%}
   {%- endfor -%}

 </ul>
</div>

코드를 page.list-collections 파일에 붙여넣습니다.

Minimal

Minimal용 코드

코드를 복사합니다.

{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

<div class="grid">

 <div class="grid__item post-large--two-thirds push--post-large--one-sixth">

   <div class="section-header">
     <h1 class="section-header--title">{{ page.title }}</h1>
   </div>

   <div class="rte">
     {{ page.content }}
   </div>

 </div>

</div>

{%- assign collection_item_width = 'medium-down--one-half post-large--one-third' -%}
{%- assign collection_width = 410 -%}

<div class="grid-uniform">

 {%- for link in linklists[page.handle].links -%}
   {%- if link.type == 'collection_link' -%}
     {%- assign featured = link.object.handle -%}
     <div class="grid__item {{collection_item_width}} text-center">
       {% include 'collection-grid-item' with collection_width: collection_width %}
     </div>
   {%- endif -%}
 {%- endfor -%}
</div>

코드를 page.list-collections 파일에 붙여넣습니다.

Narrative

Narrative 코드

코드를 복사합니다.

{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

<div class="page-width">
 <header class="section-header text-center">
   <h1 class="section-header__title h2">{{ page.title }}</h1>
 </header>
 <div class="grid">
   <div class="grid__item medium-up--four-fifths medium-up--push-one-tenth">
     <div class="rte">
       {{ page.content }}
     </div>
   </div>
 </div>

 <div class="list-collections-template" data-section-id="list-collections-template" data-section-type="list-collections-template">
   {%- assign desktopColumns = '3' -%}
   {%- assign mobileColumns = '1' -%}

   {%- capture gridClasses -%}
     {% if desktopColumns == '3' %}medium-up--one-third {% else %}medium-up--one-half {% endif %}
     {% if mobileColumns == '2' %}small--one-half {% endif %}
   {%- endcapture -%}

   {% comment %}
     For Collage style replace grid_style = 'grid' with grid_style = 'collage' below
   {% endcomment %}

   {%- assign grid_style = 'grid' -%}

   <div class="card-list grid" data-desktop-columns="{{ desktopColumns }}" data-mobile-columns="{{ mobileColumns }}" data-grid-style="{{ grid_style }}">
     <div class="card-list__column grid grid__item {{ gridClasses }}">

       {%- for link in linklists[page.handle].links -%}
         {%- if link.type == 'collection_link' -%}
           {%- assign collection = collections[link.object.handle] -%}
           {% include 'collection-card', collection: collection, width: desktopColumns, grid_style: grid_style %}
         {%- endif -%}
       {%- endfor -%}

     </div>
   </div>
 </div>
</div>

코드를 page.list-collections 파일에 붙여넣습니다.

Simple

Simple용 코드

코드를 복사합니다.

{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

<h1 class="small--text-center">{{ page.title }}</h1>

<div class="rte">
 {{ page.content }}
</div>

{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}

<div class="grid grid--uniform">
 {%- for link in linklists[page.handle].links -%}
   {%- if link.type == 'collection_link' -%}
     {% assign collection = collections[link.object.handle] %}
     <div class="grid__item {{ grid_item_width }}">
       {% include 'collection-grid-item' %}
     </div>
   {%- endif -%}
 {%- endfor -%}
</div>

코드를 page.list-collections 파일에 붙여넣습니다.

Venture

Venture 코드

코드를 복사합니다.

{% comment %}
 Featuring collections on a page using a menu
 https://shopify-dev.com/tutorials/feature-a-subset-of-collections-on-a-page
{% endcomment %}

<div class="page-width">
 <h1 class="small--text-center">{{ page.title }}</h1>
 <div class="content-block">
   <div class="rte rte--indented-images">
     {{ page.content }}
   </div>
 </div>

 {%- assign collection_count = 0 -%}

 {%- for link in linklists[page.handle].links -%}
   {%- if link.type == 'collection_link' -%}
     {%- assign collection_count = collection_count | plus: 1 -%}
   {%- endif -%}
 {%- endfor -%}

 {% assign number_rows = 1 %}

 {% case collection_count %}
   {% when 1 %}
     {% assign grid_item_width = 'medium-up--one-half' %}
     {% assign height = 450 %}
   {% when 2 %}
     {% assign grid_item_width = 'medium-up--one-half' %}
     {% assign height = 450 %}
   {% when 3 %}
     {% assign grid_item_width = 'medium-up--one-third' %}
     {% assign height = 330 %}
   {% when 4 %}
     {% assign grid_item_width = 'medium-up--one-quarter' %}
     {% assign height = 235 %}
   {% else %}
     {% assign grid_item_width = 'medium-up--one-third' %}
     {% assign height = 330 %}
     {% assign number_rows = collection_count | divided_by: 3.0 | ceil %}
 {% endcase %}

 <div class="grid grid--no-gutters grid--uniform collection" data-number-rows="{{ number_rows }}">
   {% assign row_number = 1 %}
   {%- for link in linklists[page.handle].links -%}
     {%- if link.type == 'collection_link' -%}
       {%- assign featured_collection = collections[link.object.handle] -%}
       {% if collection_count > 4 and forloop.index > 3 %}
         {% assign row_number = forloop.index | divided_by: 3.0 | ceil %}
       {% endif %}
       {% include 'collection-grid-item' with stretch_collection_image: false, height: height %}
     {%- endif -%}
   {%- endfor -%}
 </div>

</div>

코드를 page.list-collections 파일에 붙여넣습니다.

컬렉션을 추천할 페이지 만들기

Shopify Admin에서 온라인 스토어 > 페이지로 이동합니다.
페이지 추가를 클릭합니다.
페이지 편집기에서 제공된 텍스트 상자에 제목을 입력합니다. 다음 단계에서 생성할 메뉴에는 동일한 제목을 사용해야 합니다.
온라인 스토어 섹션의 테마 템플릿 드롭다운 메뉴에서 목록 컬렉션을 선택하여 페이지에 새 템플릿을 할당합니다.
저장을 클릭합니다.

표시되는 컬렉션을 제어하는 메뉴 생성

Shopify Admin에서 온라인 스토어 > 탐색으로 이동합니다.
메뉴 추가 버튼을 클릭합니다.
컬렉션을 추천할 페이지에 지정한 제목과 동일한 제목을 메뉴에 입력합니다. 예를 들어, 생성한 페이지에 Living Room 제목을 사용한 경우 메뉴에 Living Room 제목으로 지정합니다.
메뉴 항목 추가를 클릭하여 추천하려는 각 컬렉션의 메뉴에 링크를 추가합니다. 링크 텍스트 상자의 드롭다운 메뉴에서 컬렉션을 클릭하여 스토어에서 컬렉션을 선택합니다. 텍스트 상자에 URL을 추가하는 대신 이러한 방식으로 컬렉션에 연결합니다.
메뉴 저장을 클릭합니다.