Cet article vous montre comment rendre l'image de votre produit pleine largeur, couvrant le largeur totale de l'écran (et éventuellement hauteur) pour un design moderne, épuré et visuellement impactant.
Étape 1 : Accéder à l'éditeur GemPages
- Connectez-vous à votre Administrateur Shopify.
- Allez dans Apps > Générateur de pages GemPages > Pages.
- Choisir Produit pour localiser toutes vos pages produits créées avec GemPages.

- Cliquez sur la page cible pour entrer dans l'éditeur.
Étape 2 : utiliser une section pleine largeur
Tout commence par le conteneur. Si la section n'est pas pleine largeur, l'image ne le sera pas non plus.
- Cliquez sur le Rangée contenant l'image du produit.

- En vertu des Normes sur l’information et les communications, les organismes doivent rendre leurs sites et applications Web accessibles. Ils y parviennent en conformant leurs sites Web au niveau AA des Web Content Accessibility Guidelines (WCAG). Paramètres onglet sur votre barre latérale gauche, faites défiler vers le bas jusqu'à l' Taille section et assurer la Largeur = Pleine (100 %).

Remarque : La section s'étend sur toute la fenêtre du navigateur.
Étape 3 : Insérer ou modifier l'élément d'image du produit
Vous pouvez :
- Personnaliser le intégré Élément d'image du produit dans votre module produit, OU
- Utiliser un système autonome Élément d'image pour plus de contrôle et ajouter une image de produit dynamique comme contenu.
À l'intérieur d'un module de produit
1. Sélectionnez l' Image du produit Élément.

2. Aller à l' Paramètres onglet dans la barre latérale gauche :
- En vertu des Normes sur l’information et les communications, les organismes doivent rendre leurs sites et applications Web accessibles. Ils y parviennent en conformant leurs sites Web au niveau AA des Web Content Accessibility Guidelines (WCAG). Mise En Page section, sélectionnez En vedette uniquement option de mise en page.

- En vertu des Normes sur l’information et les communications, les organismes doivent rendre leurs sites et applications Web accessibles. Ils y parviennent en conformant leurs sites Web au niveau AA des Web Content Accessibility Guidelines (WCAG). Images en vedette section, définissez le Cadre = Original et la Largeur = 100%.

- Faites défiler jusqu'à la Aligner section et sélectionnez aligné au centre.

À l'intérieur d'un élément d'image
1. Sélectionnez l' Image(s) Élément.

2. Aller à l' Paramètres onglet dans la barre latérale gauche :
- En vertu des Normes sur l’information et les communications, les organismes doivent rendre leurs sites et applications Web accessibles. Ils y parviennent en conformant leurs sites Web au niveau AA des Web Content Accessibility Guidelines (WCAG). Scale section, choisissez Remplir l'image pour que votre image remplisse cet élément.

- En vertu des Normes sur l’information et les communications, les organismes doivent rendre leurs sites et applications Web accessibles. Ils y parviennent en conformant leurs sites Web au niveau AA des Web Content Accessibility Guidelines (WCAG). Taille section, assurez-vous que le Largeur & Hauteur sont mis à 100 %.

Étape 4. Enregistrer et publier
- Dans le coin supérieur droit, cliquez sur Enregistrer enregistrer vos modifications
- Vous pouvez cliquer sur le œil icône pour avant-première votre page avant de la publier.
- Si tout va bien, publier la page pour la faire vivre sur votre vitrine.

Merci pour vos commentaires