Wyświetl podzbiór kolekcji na stronie
Ta strona została wydrukowana dnia Mar 28, 2024. Aby zapoznać się z aktualną wersją, odwiedź https://help.shopify.com/pl/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/feature-a-subset-of-collections.
Uwaga
Klasyczne szablony nie są dostępne w Sklepie z szablonami. Te szablony nie mają funkcji zawartych w szablonach Online Store 2.0 , a darmowe klasyczne szablony Shopify nie są aktualizowane oprócz poprawek bezpieczeństwa.
Uwaga
To dostosowanie jest przeznaczone dla klasycznych szablonów Shopify i nie ma zastosowania do szablonów 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
Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony .
Znajdź szablon, który chcesz edytować, a następnie kliknij przycisk ... > Edytuj kod .
W katalogu Szablony kliknij opcję Dodaj nowy szablon .
Utwórz nowy szablon dla strony o nazwie list-collections .
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
.
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
:
Kod szablonu Boundless
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>
Wklej kod do pliku page.list-collections
.
Kod dla szablonu Brooklyn
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>
Wklej kod do pliku page.list-collections
.
Kod szablonu Debut
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>
Wklej kod do pliku page.list-collections
.
Kod dla szablonu Minimal
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>
Wklej kod do pliku page.list-collections
.
Kod szablonu narrative
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>
Wklej kod do pliku page.list-collections
.
Kod dla szablonu Simple
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>
Wklej kod do pliku page.list-collections
.
Kod szablonu Venture
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>
Wklej kod do pliku page.list-collections
.
Utwórz stronę dla swoich kolekcji
Z panelu administracyjnego Shopify przejdź do: Sklep online > Strony .
Kliknij Dodaj stronę .
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.
Przypisz nowy szablon do strony, wybierając opcję lista kolekcji z menu rozwijanego Wzorzec szablonu w sekcji Sklep online .
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
W panelu administracyjnym Shopify przejdź do menu Sklep online > Nawigacja .
Kliknij przycisk Dodaj menu .
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
.
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.
Kliknij Zapisz menu .