Fremhæv en undergruppe af kollektioner på en side

Du kan fremhæve en undergruppe af kollektioner på en tilpasset side ved at redigere din temakode. Denne vejledning viser dig, hvordan du kan oprette en ny sideskabelon og fremhæve kollektioner ved hjælp af en menu.

Alle Shopify-butik har en side med kollektionslister på webadressen www.mystore.com/collections, som viser alle de kollektioner, som findes i butikken. Som et alternativ til denne vejledning, kan du redigere din side med kollektionslister, så den kun viser et udpluk af dine kollektioner.

På denne side

Opret din nye sideskabelon

Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, og klik derefter på knappen ... > Rediger kode.
Klik på Tilføj en ny skabelon i mappen Skabeloner.
Opret en ny skabelon til en side kaldet list-collections.

Slet den eksisterende kode i din nye page.list-collections-fil. Find din temakode nedenfor, og kopiér og indsæt koden i din page.list-collections-fil.
Klik på Gem.

Vælg dit tema

Koden for denne tilpasning varierer afhængigt af dit tema. Klik på knappen for dit tema, før du kopierer og indsætter den i din page.list-collections-fil.

Boundless

Kode til Boundless

Kopiér 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>

Indsæt koden i page.list-collections-filen.

Brooklyn

Kode til Brooklyn

Kopiér 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>

Indsæt koden i page.list-collections-filen.

Debut

Kode til Debut

Kopiér 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>

Indsæt koden i page.list-collections-filen.

Minimal

Kode til Minimal

Kopiér 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>

Indsæt koden i page.list-collections-filen.

Narrative

Kode til Narrative

Kopiér 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>

Indsæt koden i page.list-collections-filen.

Simple

Kode til Simple

Kopiér 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>

Indsæt koden i page.list-collections-filen.

Venture

Kode til Venture

Kopiér 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>

Indsæt koden i page.list-collections-filen.

Opret en side, du kan fremhæve dine kollektioner på

Gå til Webshop > Sider i din Shopify-administrator.
Klik på Tilføj side.
Angiv en Titel i det angivne tekstfelt i sideeditoren. Du skal bruge den samme titel til den menu, som du opretter i de kommende trin.
Tildel din nye skabelon til siden ved at vælge List-collections i rullemenuen Temaskabelon i afsnittet Webshop.
Klik på Gem.

Gå til Indhold > Menuer i Shopify-administratoren.
Klik på knappen Tilføj menu.
Giv din menu samme Titel som den titel, du gav siden, hvor du skal fremhæve dine kollektioner. Hvis du f.eks. oprettede siden med titlen Living Room, skal du give din menu titlen Living Room.
Føj links til din menu for alle de kollektioner, du vil fremhæve, ved at klikke på Tilføj menupunkt. Vælg kollektioner i din butik ved at klikke på Kollektioner i rullemenuen for tekstfeltet Link. Link til dine kollektioner på denne måde i stedet for at føje en webadresse til tekstfeltet.
Klik på menuen Gem.