Visa en delmängd av produktserier på en sida

Du kan visa en delmängd av produktserier på en anpassad sida genom att redigera din temakod. Denna handledning visar hur du skapar en ny sidomall och tilldelar produktserier att visa genom att använda en meny.

Alla Shopify-butiker har en sida för produktserielista på URL www.mystore.com/collections som visar alla produktserier i butiken. Som ett alternativ till denna handledning kan du redigera din sida för produktserielista till att endast visa ett urval av dina produktserier.

På den här sidan

Skapa din nya sidomall

Från din Shopify admin går du till Webbshop > teman.
Hitta det tema du vill redigera och klicka sedan på knappen ... > Redigera kod.
Klicka på Lägg till en ny mall i katalogen Mallar.
Skapa en ny mall för sida och döp den till list-collections.

Radera den befintliga koden i din nya page.list-collections-fil. Leta efter din temakod nedan och kopiera och klistra in koden i din page.list-collections-fil.
Klicka på Spara.

Välj ditt tema

Koden för denna anpassning varierar beroende på ditt tema. Klicka på knappen för ditt tema innan du kopierar och klistrar in den i din page.list-collections-fil:

Boundless

Kod för Boundless

Kopiera koden.

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

Klistra in koden i page.list-collections-filen.

Brooklyn

Kod för Brooklyn

Kopiera koden.

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

Klistra in koden i page.list-collections-filen.

Debut

Kod för Debut

Kopiera koden.

{% 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>
&#x3C;div class=&#x22;rte&#x22;&#x3E;
   {{ page.content }}
 &#x3C;/div&#x3E;
   </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>

Klistra in koden i page.list-collections-filen.

Minimal

Kod för Minimal

Kopiera koden.

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

Klistra in koden i page.list-collections-filen.

Narrative

Kod för Narrative

Kopiera koden.

{% 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 == &#x27;collection_link&#x27; -%}
       {%- assign collection = collections[link.object.handle] -%}
       {% include &#x27;collection-card&#x27;, collection: collection, width: desktopColumns, grid_style: grid_style %}
     {%- endif -%}
   {%- endfor -%}

 &#x3C;/div&#x3E;
   </div>
 </div>
</div>

Klistra in koden i page.list-collections-filen.

Simple

Kod för Simple

Kopiera koden.

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

Klistra in koden i page.list-collections-filen.

Venture

Kod för Venture

Kopiera koden.

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

Klistra in koden i page.list-collections-filen.

Skapa en sida där du kan använda dina produktserier

I din Shopify-admin går du till Webbshop > Sidor.
Klicka på Lägg till sida.
Ange en titel i textrutan Titel i sidredigeraren. Du måste använda samma namn för menyn som du skapar i de kommande stegen.
Tilldela din nya mall till sidan genom att välja listkollektioner från temamallens rullgardinmeny i avsnittet Webbshop.
Klicka på Spara.

Skapa menyn som styr vilka produktserier som visas

Gå till Innehåll > Menyer från Shopify-admin.
Klicka på knappen Lägg till meny.
Ge din meny samma titel som titeln du gav sidan som kommer att visa dina produktserier. Till exempel, om sidan du skapade har titeln Living Room, ge din meny titeln Living Room.
Lägg till länkar till din meny för varje produktserie som du vill visa genom att klicka på Lägg till menyalternativ. Välj produktserier från din butik genom att klicka på Produktserier i rullgardinsmenyn för textrutan Länk. Länka till dina produktserier på detta sätt, istället för att lägga till en URL i textrutan.
Klicka på Spara-menyn.