Mettre en vedette un sous-ensemble de collections sur une page

Attention

Les thèmes vintage ne sont pas disponibles dans Theme Store. Les thèmes vintage ne disposent pas des fonctionnalités incluses dans les thèmes Online Store 2.0 de Shopify, et les thèmes vintage gratuits de Shopify ne reçoivent pas d’autres mises à jour, à l’exception des correctifs de sécurité.

Remarque

Si vous utilisez un thème gratuit de Shopify, vous pouvez contacter l’assistance Shopify pour obtenir de l’aide par rapport à ce tutoriel. La conception de cette partie nécessite 15 minutes. En savoir plus sur la Politique en matière de conception de Shopify.

Remarque

Cette personnalisation est faite pour les thèmes vintage de Shopify, et ne s’applique pas aux thèmes Online Store 2.0.

• Découvrez la version de l'architecture de votre thème
• Explorez les personnalisations de thème Online Store 2.0

Vous pouvez mettre en vedette un sous-ensemble de collections sur une page personnalisée en modifiant le code de votre thème. Ce tutoriel vous indique comment créer un nouveau modèle de page et attribuer des collections à afficher au moyen d’un menu.

Toutes les boutiques Shopify possèdent une page de liste de collections à l'URL www.mystore.com/collections. Cette page affiche toutes les collections de la boutique. Si vous ne souhaitez pas appliquer ce tutoriel, vous pouvez modifier la page de votre liste de collections de manière à n'afficher que celles que vous désirez.

Créer votre nouveau modèle de page

1. Depuis votre interface administrateur Shopify, allez à Online Store (Boutique en ligne) > Themes (Thèmes).
2. Recherchez le thème que vous souhaitez modifier, puis cliquez sur le bouton … > Modifier le code.

3. Dans le répertoire Modèles, cliquez sur Ajouter un nouveau modèle.

4. Créez un nouveau modèle pour la page intitulée list-collections.

Conseil

Le thème Supply contient déjà un fichier page.list-collections prêt à l'emploi.

1. Supprimez le code actuel dans votre nouveau fichier page.list-collections. Recherchez le code de votre thème ci-dessous, puis copiez-le et collez-le dans votre fichier page.list-collections.
2. Cliquez sur Save (Enregistrer).

Sélection de votre thème

Le code de cette personnalisation varie en fonction de votre thème. Cliquez sur le bouton de votre thème avant de le copier et de le coller dans votre fichier page.list-collections :

Boundless

Code pour Boundless

1. Copiez le code.

{% 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. Collez le code dans le fichier page.list-collections.

Brooklyn

Code pour Brooklyn

1. Copiez le code.

{% 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. Collez le code dans le fichier page.list-collections.

Debut

Code pour Debut

1. Copiez le code.

{% 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. Collez le code dans le fichier page.list-collections.

Minimal

Code pour Minimal

1. Copiez le code.

{% 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. Collez le code dans le fichier page.list-collections.

Narrative

Code pour Narrative

1. Copiez le code.

{% 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. Collez le code dans le fichier page.list-collections.

Simple

Code pour Simple

1. Copiez le code.

{% 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. Collez le code dans le fichier page.list-collections.

Venture

Code pour Venture

1. Copiez le code.

{% 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. Collez le code dans le fichier page.list-collections.

Créer une page où présenter vos collections

1. Dans votre interface administrateur Shopify, accédez à Boutique en ligne > Pages.
2. Cliquez sur Ajouter une page.
3. Dans l’éditeur de page, saisissez un titre dans la zone de texte fournie. Vous devrez utiliser le même titre pour le menu que vous créerez au cours des prochaines étapes.

4. Attribuez votre nouveau modèle à la page en sélectionnant list-collections dans le menu déroulant du modèle de thème, dans la section Boutique en ligne.

5. Cliquez sur Save (Enregistrer).

Remarque

même si votre nouvelle page est visible, elle ne s'affichera pas automatiquement dans la navigation de votre boutique en ligne. Vous devrez ajouter un lien y menant dans un menu.

Créer le menu qui contrôle les collections affichées

1. Dans votre interface administrateur Shopify, accédez à Boutique en ligne > Navigation.
2. Cliquez sur le bouton Ajouter un menu.
3. Donnez à votre menu le même titre que celui que vous avez attribué à la page qui présentera vos collections. Par exemple, si vous avez intitulé Living Room la page que vous avez créée, donnez à votre menu le titre Living Room.
4. Ajoutez des liens à votre menu pour chacune des collections que vous souhaitez présenter en cliquant sur Ajouter un élément de menu. Sélectionnez des collections dans votre boutique en cliquant sur Collections dans le menu déroulant de la zone de texte Lien. Créez un lien vers vos collections de cette manière au lieu d’ajouter une URL à la zone de texte.
5. Cliquez sur Enregistrer le menu.