Wyświetl podzbiór kolekcji na stronie

Uwaga

Klasyczne szablony nie są dostępne w Theme Store. Te szablony nie mają funkcji zawartych w szablonach Online Store 2.0, a darmowe klasyczne szablony Shopify nie są aktualizowane z wyjątkiem poprawek bezpieczeństwa.

Uwaga

Jeśli używasz darmowego szablonu z Shopify, możesz skontaktować się z Pomocą techniczną Shopify, aby uzyskać pomoc w związku z tym tutorialem. Czas projektowania wynosi 15 minut. Dowiedz się więcej o Polityce projektowania Shopify.

Uwaga

To dostosowanie jest przeznaczone dla klasycznych szablonów Shopify i nie ma zastosowania do szablonów Online Store 2.0.

• Dowiedz się, jaka jest wersja architektury Twojego szablonu
• Przeglądaj dostosowania szablonu Online Store 2.0

Możesz wyświetlić podzbiór kolekcji na niestandardowej stronie poprzez edycję kodu szablonu. Ten tutorial pomoże Ci utworzyć nowy szablon strony i przypisać kolekcje do zaprezentowania za pomocą menu.

Strona listy kolekcji wszystkich sklepów Shopify ma adres URL www.mystore.com/collections. Strona ta przedstawia wszystkie kolekcje w sklepie. Alternatywnie do kroków opisanych w tym tutorialu możesz edytować stronę listy kolekcji, aby wyświetlić tylko wybór swoich kolekcji.

Utwórz nowy szablon strony

1. Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.
2. Znajdź szablon, który chcesz edytować, a następnie kliknij przycisk ... > Edytuj kod.

3. W katalogu Szablony kliknij opcję Dodaj nowy szablon.

4. Utwórz nowy szablon dla strony o nazwie list-collections.

Wskazówka

Szablon Supply zawiera już gotowy do użycia plik page.list-collections.

1. Usuń istniejący kod w nowym pliku page.list-collections. Znajdź kod szablonu poniżej i skopiuj oraz wklej go w pliku page.list-collections.
2. Kliknij opcję Zapisz.

Wybierz swój szablon

Kod tego dostosowania różni się w zależności od szablonu. Kliknij przycisk swojego szablonu przed skopiowaniem i wklejeniem go do pliku page.list-collections:

Boundless

Kod szablonu Boundless

1. Skopiuj kod.

{% 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>

1. Wklej kod do pliku page.list-collections.

Brooklyn

Kod dla szablonu Brooklyn

1. Skopiuj kod.

{% 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>

1. Wklej kod do pliku page.list-collections.

Debut

Kod szablonu Debut

1. Skopiuj kod.

{% 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>

1. Wklej kod do pliku page.list-collections.

Minimal

Kod dla szablonu Minimal

1. Skopiuj kod.

{% 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>

1. Wklej kod do pliku page.list-collections.

Narrative

Kod szablonu narrative

1. Skopiuj kod.

{% 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>

1. Wklej kod do pliku page.list-collections.

Simple

Kod dla szablonu Simple

1. Skopiuj kod.

{% 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>

1. Wklej kod do pliku page.list-collections.

Venture

Kod szablonu Venture

1. Skopiuj kod.

{% 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>

1. Wklej kod do pliku page.list-collections.

Utwórz stronę dla swoich kolekcji

1. Z panelu administracyjnego Shopify przejdź do: Sklep online > Strony.
2. Kliknij Dodaj stronę.
3. W edytorze stron wprowadź tytuł w wyświetlonym polu tekstowym. Musisz użyć tego samego tytułu dla menu, które utworzysz w kolejnych krokach.

4. Przypisz nowy szablon do strony, wybierając opcję lista kolekcji z menu rozwijanego Wzorzec szablonu w sekcji Sklep online.

5. Kliknij opcję Zapisz.

Uwaga

Nawet jeśli nowa strona będzie widoczna, nie pojawi się ona automatycznie w nawigacji sklepu online. Musisz dodać link do niej w menu.

Tworzenie menu, które steruje wyświetlaniem kolekcji

1. W panelu administracyjnym Shopify przejdź do menu Sklep online > Nawigacja.
2. Kliknij przycisk Dodaj menu.
3. Nadaj menu taki sam tytuł jak tytuł nadany stronie, na której znajdą się Twoje kolekcje. Na przykład, jeśli utworzona strona ma tytuł Living Room, nadaj swojemu menu tytuł Living Room.
4. Dodaj linki do menu dla każdej kolekcji, którą chcesz przedstawić, klikając opcję Dodaj pozycję menu. Wybierz kolekcje ze swojego sklepu, klikając opcję Kolekcje w menu rozwijanym dla pola tekstowego Link. W ten sposób zapewnisz połączenie z kolekcjami bez potrzeby dodawania adresu URL do pola tekstowego.
5. Kliknij Zapisz menu.