Tuto Comment rajouter des produits par collection sur la page d’accueil du thème SUPPLY sur shopify

Si tout comme moi la limite de 5 produits sur la page d’accueil vous ennuie, voici le tutoriel qu’il vous faut !

Mise à jour 11 aout 2017 : J’ai rajouté la possibilité d’aller jusque 35 produits ! donc 5 – 15 – 25 – 35

Nous alors tout simplement rajouter pour l’exemple la possibilité de mettre 15 produits !

Les étapes

1. Comme d’habitude rendez sur votre administration et cliquez sur « Online store »

2. Action -> Edit HTML et CSS

3. Cliquez sur l’onglet « Sections » et trouvez le fichier collection-rows.liquid !

4. Trouvez la zone suivante :

hook-row-list-1

5. Copiez le code ci-dessous en suivant le modèle de l’image ! n’oubliez surtout pas le premier « , »

,
 {
 "value": "15",
 "label": "15"
 },
 {
 "value": "25",
 "label": "25"
 },
 {
 "value": "35",
 "label": "35"
 }

hook-row-list-2

6. Remontez tout en haut du fichier et repérez la zone suivante :

Sans-titre-4

7. Ensuite copiez le code ci-dessous en suivant le modèle de l’image

{% when ’15’%}
{%- assign grid_item_width = ‘small–one-half medium–one-third large–one-third’ -%}
{%- assign image_size = ‘345×550’ -%}
{% when ’25’%}
{%- assign grid_item_width = ‘small–one-half medium–one-third large–one-third’ -%}
{%- assign image_size = ‘345×550’ -%}
{% when ’35’%}
{%- assign grid_item_width = ‘small–one-half medium–one-third large–one-third’ -%}
{%- assign image_size = ‘345×550’ -%}

hook-row-list-4

8. N’oubiez pas de cliquer sur Save en haut à droite pour valider les modifications sur le fichier

9. Il ne vous reste plus qu’a retourner dans customize thème et de voir apparaître l’option 15 😉

dqzdq

Vous pouvez bien entendu adapter le chiffre par tranche de 5

Vous souhaitez me remercier et m’encourager à continuer mes tutos?

Alors n’hésitez pas à me faire un petit don même minime car c’est l’intention qui compte 😉

Je veux faire un don

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*
*