Après avoir vu comment ajouter un produit dans un article Shopify et comment ajouter des vidéos TikTok dans un produit Shopify, nous allons voir comment ajouter un slider de produit dans un blog Shopify.
Aperçu du bloc produit
© Clickroad — Générateur de carrousel produit
Générateur de carrousel produit
HTML à coller dans votre blog (Rich text)
CSS + JS (à mettre dans un nouveau fichier du thème)
Étapes Shopify :
1. Crée un fichier dans Assets : clickroad-carousel-product.js et colle le contenu ci-dessous (CSS + JS).
2. Colle dans theme.liquid, entre les balises head : <script src="{{ 'clickroad-carousel-product.js' | asset_url }}" defer></script>
3. Colle le HTML ou le rendu dans ton blog.
1. Crée un fichier dans Assets : clickroad-carousel-product.js et colle le contenu ci-dessous (CSS + JS).
2. Colle dans theme.liquid, entre les balises head : <script src="{{ 'clickroad-carousel-product.js' | asset_url }}" defer></script>
3. Colle le HTML ou le rendu dans ton blog.
Image
Bouton
Défilement de produits
Comment intégrer le carrousel produit dans un blog Shopify ?
Voici comment intégrer le carrousel produit dans un blog Shopify :
- Copiez le JS et le CSS.
- Allez dans « Boutique en ligne » dans votre boutique Shopify.
- Cliquez sur « Modifier le code » après avoir appuyé sur les « … » à gauche de « Modifier le code ».
- Ajoutez un fichier assets nomé « clickroad-carousel-product.js » où vous collez le JS et le CSS et vous sauvergardez.
- Copiez le rendu ou le HTML et vous le coller dans l’éditeur de texte Shopify à l’endroit où vous souhaitez avoir le carrousel produit.
Comment trouver le lien des images des produits Shopify ?
Voici comment trouver le lien des images de vos produits Shopify :
- Aller sur la page produit.
- Clique droit sur l’image produit.
- Appuyez sur « Copier l’adresse de l’image »