Toutes les pages de une boutique en ligne Shopify peut adopter CSS Grid, mais la page de collecte est un point de contact évident de tout site de commerce électronique pouvant bénéficier d'une mise en page robuste et propre. Sur les pages de collection, il semble naturel que les produits soient organisés dans un format de grille, avec des lignes et des colonnes. Donc, si une option pour créer une disposition de grille robuste avec un simple ensemble de règles est possible, il vaut la peine d'explorer vos projets de thème personnalisé.

Note : Pour avoir une idée de comment cela pourrait rechercher vos clients et vous pouvez donc suivre ce tutoriel CSS Grid, J'ai mis en place un magasin de test que vous pouvez utiliser pour voir l'approche que j'ai décrite dans ce tutoriel.

Création d'une présentation de page de collection de base

L'utilisation de CSS Grid sur une page de collection Shopify fonctionnera de la même manière que Grid fonctionne sur une section personnalisée – ce que nous avons exploré dans l'article de blog CSS grid . Heureusement, Shopify a un excellent support de grille CSS. La plus grande différence lors de la mise en œuvre d'un système de grille sur une page de collection est que vous n'avez pas besoin d'attribuer une classe à chaque élément individuel. Notez que si vous n'êtes pas extrêmement avancé avec CSS, nous vous recommandons de lire notre guide d'introduction à CSS avant d'aller plus loin.

Maintenant, puisque les produits sont automatiquement générés en boucle sous forme d'éléments de contenu répétables, il est possible d'appliquer la même classe à tous les produits associés à une collection. Mais tout d'abord, regardons un exemple de page de collection sans style.

Si vous commencez avec une configuration de page de collection de base, vous aurez probablement un balisage qui ressemble à ce qui suit:

 {{collection.title }} 
  {% pour le produit de la collection.products%}
    
      
    
     {{product.title}} 
      
 {{product.price | argent}} 
  {% sauf si product.available%} 
 épuisé  {% endunless%}
  {% endfor%}

Cela affichera le nom de la collection sous forme d'en-tête et affichera les produits associés à la collection avec leur image, leur nom et leur prix. Sans aucun style, ces produits apparaîtront dans une rangée verticale par défaut. La taille des images du produit sera de 300 pixels, comme défini par le filtre img_url .

Pour appliquer un CSS Grid framework à ce groupe de produits, vous ' Je veux d'abord envelopper la collection pour la boucle dans un conteneur de grille principal, qui est considéré comme le conteneur parent. Ensuite, vous pouvez encapsuler le code de chaque produit individuel (les enfants) dans son propre conteneur individuel.

Une fois ces conteneurs ajoutés, le balisage apparaîtra comme suit:

 {{collection.title}} 
  

     { % pour le produit de la collection.products%}
      

        
          
        
         {{product.title}} 
          
 {{product.price | argent}} 
          {% sauf si product.available%} 
 épuisé  {% endunless%}
      
    {% endfor%}
  

Application du style CSS Grid Framework à la page de collection

Maintenant que nous avons une page de collection de base avec une hiérarchie de conteneurs, vous pouvez diviser les produits en une disposition de grille en appliquant des styles au les classes que vous avez créées. Dans le fichier de feuille de style des thèmes, vous pouvez ajouter ce qui suit:

 .grid-collection {
  affichage: grille;
  grid-template-columns: répéter (auto-fit, minmax (300px, 1fr));
}

.grid-product {
  affichage: grille;
}

Désormais, lorsque vous accédez à la page de collection, vous devriez voir les produits apparaître dans une grille, s'inscrivant dans l'espace disponible à l'écran.

En plus d'ajouter display: grid vous remarquerez que nous utilisons également la propriété grid-template-columns qui peut être utilisée pour définir combien de colonnes apparaissent dans la grille. Au lieu de définir une valeur fixe, nous pouvons utiliser la notation de répétition pour créer une règle selon laquelle nos produits doivent apparaître autant de fois qu'ils peuvent tenir dans la grille.

Dans la notation fonctionnelle, auto-fit affiche autant d'articles que possible sur la ligne, donc en plein écran, nous verrons autant de produits apparaître qu'il y a d'espace sur l'écran des acheteurs. Enfin, avec minmax nous avons mis en place une règle selon laquelle chaque cellule doit avoir un minimum de 300 pixels, et un maximum d'une fraction du conteneur de grille.

Lors de l'utilisation de cette propriété, nous devons assurez-vous que la taille définie dans la fonction minmax correspond ou est supérieure à la taille définie par le filtre img_url Liquid dans notre balisage. Si la fonction minmax contient une taille de pixel plus petite, vous verrez que les images du produit seront coupées car elles n'auront pas assez d'espace dans la cellule définie.

Une fois que notre grille de base apparaîtra comme prévu , nous pouvons ajouter du CSS supplémentaire pour ranger la mise en page en ajoutant un espace de marge et en positionnant les produits au centre de la page. Si vous souhaitez que l'écart entre vos colonnes et vos lignes soit le même, vous pouvez définir les deux avec la propriété gap plutôt que de définir chacun séparément.

Une fois que tout est configuré, votre feuille de style ressemblera à ceci:

 .grid-collection {
  affichage: grille;
  grid-template-columns: répéter (auto-fit, minmax (300px, 1fr));
  écart: 1px;
  marge: 1em;
  couleur de fond: blanc;
}

.grid-product {
  affichage: grille;
  justify-content: centre;
  rembourrage: 10px;
  Couleur blanche;
  hauteur de ligne: 1;
  rayon de la bordure: 5px;
}

Bien qu'il s'agisse d'un exemple simple de la manière dont un framework CSS Grid peut être appliqué à une page de collection, je vous recommande de tester différents paramètres en fonction des images de votre client et des images de marque existantes. Vous pouvez également utiliser cette approche pour créer des grilles sur d'autres pages, comme le panier, et ajuster en fonction de ses caractéristiques uniques.

Ajout d'options de grille personnalisables

L'approche ci-dessus fonctionne bien pour une grille qui affichera des colonnes de produits basées sur la taille de l'écran. Mais que se passe-t-il si vous souhaitez donner au marchand un certain contrôle sur la façon dont la grille est représentée?

Dans certains cas, vos clients peuvent souhaiter personnaliser la page du produit et dicter le nombre de produits qui s'affichent.

Si votre balisage est contenu dans un fichier de section, vous pouvez créer des paramètres de section qui permettront aux clients de personnaliser la grille à partir de l'éditeur de la boutique en ligne. Une configuration de paramètres permettant à votre client de sélectionner un certain nombre de produits sur une ligne pourrait ressembler à ceci:

 {% schema%}

{
    "name": "Collection",
    "paramètres": [
  {
    "type": "select",
    "id":  "product_number",
    "label": "Number of products per row",
    "options": [
        {
        "value": "two",
        "label": "two"
        },
        {
        "value": "three",
        "label": "three"
        },
        {
        "value": "four",
        "label": "four"
        }
      ]
    }
  ]
}

{% endschema%}

Vous pouvez voir ici que le paramètre a un type de sélectionnez qui affichera une option déroulante sur l'éditeur de la boutique en ligne. Il existe également une propriété label pour décrire le paramètre.

La propriété id ne sera pas visible sur l'éditeur, mais nous pouvons la référencer pour créer une variable. Un cas d'utilisation courant pour les variables créées avec des objets section est de les référencer dans le balisage pour changer les noms de classe en fonction des paramètres sélectionnés.

Pour obtenir cet effet, nous pouvons utiliser Liquid pour afficher la valeur ] qui est sélectionné dans l'éditeur de la boutique en ligne, comme attribut de l'objet de section . Cet objet sera exprimé comme {{section.settings.product_number}} et affichera la valeur de l'option sélectionnée.

Une façon de voir les choses est que le id ] que nous avons assigné dans le paramètre de section devient un "espace réservé" pour la valeur de l'option sélectionnée.

Ensuite, nous pouvons prendre cet objet et l'ajouter au nom de classe de la collection. Cela permettra au nom de la classe de changer en fonction de l'option sélectionnée et vous pourrez créer différentes règles CSS pour chaque nom de classe.

Lorsque nous ajoutons la variable au nom de la classe de collection existante, elle ressemblera à:

Ici, vous pouvez voir que l'objet section fait référence à l'ID du paramètre de section. La valeur qui est sortie par cet objet de section est déterminée par la valeur sélectionnée dans l'éditeur de boutique en ligne. Par exemple, si "trois" est sélectionné dans notre liste déroulante, le balisage s'affichera comme suit:

Nous pouvons maintenant revenir à notre feuille de style et configurer différentes règles CSS pour grid-collection-two grid-collection-three et grid-collection- quatre . Celles-ci ressembleraient à:

 .grid-collection-two {
  affichage: grille;
  grille-modèle-colonnes: répéter (2, 1fr);
  écart: 1px;
  marge: 1em;
  couleur de fond: blanc;
}

.grid-collection-trois {
  affichage: grille;
  grille-modèle-colonnes: répéter (3, 1fr);
  écart: 1px;
  marge: 1em;
  couleur de fond: blanc;
}

.grid-collection-quatre {
  affichage: grille;
  grille-modèle-colonnes: répéter (4, 1fr);
  écart: 1px;
  marge: 1em;
  couleur de fond: blanc;
}

La propriété grid-template-columns détermine le nombre de colonnes qui apparaîtront dans la grille et, par conséquent, le nombre de produits qui apparaîtront dans une ligne sur la page de collection. Ainsi, chaque classe aura une valeur différente pour la propriété grid-template-columns qui correspond à son nom de classe unique.

Désormais, lorsqu'un client accède à l'éditeur de boutique en ligne et sélectionne une option pour "Nombre de produits par ligne", la grille s'ajustera pour refléter ceci:

Enfin, nous pouvons ajouter des requêtes média afin qu'il y ait différentes règles CSS Grid pour les petits écrans. Cela évitera que la grille n'apparaisse avec trop de colonnes de produits sur des appareils plus petits, ce qui entraînerait l'apparition de produits hors écran.

Chaque variante de la classe collection-grid peut se voir attribuer des règles différentes où le grille tombera à deux ou une colonnes. Lorsque cela est configuré sur votre feuille de style, cela pourrait ressembler à ceci:

 @media screen and (max-width: 992px) {
  .grid-collection-deux {
    grille-modèle-colonnes: répéter (2, 1fr);
  }
}

@ écran multimédia et (largeur maximale: 600px) {
  .grid-collection-deux {
    grille-modèle-colonnes: répéter (1, 1fr);
  }
}

@ écran multimédia et (max-width: 992px) {
  .grid-collection-trois {
    grille-modèle-colonnes: répéter (2, 1fr);
  }
}

@ écran multimédia et (largeur maximale: 600px) {
  .grid-collection-trois {
    grid-template-columns: répéter (1, 1fr);
  }
}

@ écran multimédia et (max-width: 992px) {
  .grid-collection-quatre {
    grille-modèle-colonnes: répéter (2, 1fr);
  }
}

@ écran multimédia et (largeur maximale: 600px) {
  .grid-collection-quatre {
    grille-modèle-colonnes: répéter (1, 1fr);
  }
}

Il est probable que vous deviez ajuster les tailles de pixel et les valeurs du filtre img_url en fonction des besoins spécifiques de votre client et des images qu'il utilise. Cependant, cette méthode vous montrera comment commencer à utiliser un système CSS Grid pour les pages de collection sur vos propres builds de thème personnalisé.

Expanding The Grid

Une fois que vous avez appliqué une grille CSS à vos pages de collection, vous pouvez Commencez à considérer d'autres domaines de vos thèmes Shopify où des mises en page robustes de sites Web peuvent s'appliquer. Par exemple, il est possible de créer des sections de galerie d'images dans une grille et d'ajouter des cellules de forme irrégulière pour la variété.

Il existe une gamme d'opportunités lors de l'utilisation de CSS Grid sur Shopify, et chacune ajoute potentiellement une valeur supplémentaire à vos projets de thème . À l'aide de cet article, vous pouvez étendre le cadre CSS Grid à tous vos projets de thème.

(ra, il)