Plusieurs propriétaires de boutiques Shopify publient sur les forums ou sur les sites dédiés des demandes d’assistance pour des problèmes qu’ils ont rencontré lors de la modification de leurs thèmes. Sans dupliquer votre thème Shopify, ce qui aurait dû être un petit changement sur la boutique ou l’installation d’une application se transforme en temps d’arrêt du site, en ventes manquées, en clients frustrés et en pages cassées. Personne ne souhaite cela. (suite…)
Tricks css : clip-path pour appliquer des formes à vos images
Clip-path est une propriété très intéressante qui permet de couper la partie visible des éléments SVG, des images ou de tout élément HTML. Avant que cette propriété ne soit largement prise en compte par les navigateurs, la seule option était d’enregistrer les images au format PNG avec un arrière-plan transparent ou d’ajouter la couleur d’arrière-plan du site Web pour créer un JPG plus petit. (suite…)
Comment créer une page avec la liste des marques sur Shopify
Si vous avez une marketplace ou que vous vendez sur Shopify des produits de plusieurs marques différentes, il serait judicieux de proposer à vos visiteurs la liste de toutes les marques disponibles sur une page dédiée.
Cette page est utile tant pour vos clients, s’ils recherchent un produit spécifique à un fabricant/marque en particulier, que pour le SEO de votre boutique en ligne.
Le résultat final qu’on va avoir ressemblera à ça.

Duplication du thème Shopify
Pour ce faire, commençons par dupliquer notre thème principal et travailler tranquillement sur celui-ci sans toucher à la version en prod.
Dans mon cas je suis sur le thème Dawn, il se peut que les manipulations à faire soient légèrement différentes selon le thème que vous utilisez, ne paniquez pas le principe reste le même.
Codes à ajouter à votre thème Shopify pour afficher les marques
Dans le répertoire Template, cliquez sur Ajouter un nouveau template. Sur la popup qui apparaît sélectionnez Créer un nouveau modèle pour une Page. Dans Type de modèle liquid et dans le nom de fichier ce que vous voulez par ex marques pour avoir page.marques.liquid.

Une fois que vous avez fait cette manipulation, mettez le code suivant sur cette page.
<div class="container"> <div class="page-width"> <div class="marques-container"> <div class="section-header text-center"> <h1 class="h-title">{{ page.title }}</h1> </div> <div class="rte text--center"> {{ page.content }} </div> <div id="manufacturers_index"> <span><a href="javascript:" data-letter="0">0-9</a></span> <span><a href="javascript:" data-letter="A">A</a></span> <span><a href="javascript:" data-letter="B">B</a></span> <span><a href="javascript:" data-letter="C">C</a></span> <span><a href="javascript:" data-letter="D">D</a></span> <span><a href="javascript:" data-letter="E">E</a></span> <span><a href="javascript:" data-letter="F">F</a></span> <span><a href="javascript:" data-letter="G">G</a></span> <span><a href="javascript:" data-letter="H">H</a></span> <span><a href="javascript:" data-letter="I">I</a></span> <span><a href="javascript:" data-letter="J">J</a></span> <span><a href="javascript:" data-letter="K">K</a></span> <span><a href="javascript:" data-letter="L">L</a></span> <span><a href="javascript:" data-letter="M">M</a></span> <span><a href="javascript:" data-letter="N">N</a></span> <span><a href="javascript:" data-letter="O">O</a></span> <span><a href="javascript:" data-letter="P">P</a></span> <span><a href="javascript:" data-letter="Q">Q</a></span> <span><a href="javascript:" data-letter="R">R</a></span> <span><a href="javascript:" data-letter="S">S</a></span> <span><a href="javascript:" data-letter="T">T</a></span> <span><a href="javascript:" data-letter="U">U</a></span> <span><a href="javascript:" data-letter="V">V</a></span> <span><a href="javascript:" data-letter="W">W</a></span> <span><a href="javascript:" data-letter="X">X</a></span> <span><a href="javascript:" data-letter="Y">Y</a></span> <span><a href="javascript:" data-letter="Z">Z</a></span> </div> {% assign totalItems = shop.vendors | size %} {% assign lastLetter = "" %} <div class="grid"> <div class="grid__item grid--marques medium-up--one-third"> <ul> {% for j in (1..totalItems) %} {% include 'vendor-list-item', vendor: shop.vendors[forloop.index0] %} {% endfor %} </ul> </div> </div> </div> </div> </div>
Puis dans le répertoire Snipets cliquez sur Ajouter un nouveau snippet et nommez-le vendor-list-item
Copiez/coller le code suivant :
{% assign match = False %}
{% assign vendor_collection_handle = vendor | handleize | strip | escape %}
{% for collection in collections %}
{% if vendor_collection_handle == collection.handle %}
{% assign match = true %}
{% endif %}
{% endfor %}
{% assign alphabet = "0-9,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z" | split: ',' %}
{% assign stringToCheck = vendor %}
{% assign foundAlphabet = false %}
{% for letter in alphabet %}
{% assign startsWith = letter %}
{% assign checkArray = stringToCheck | downcase | split:startsWith %}
{% if checkArray[0] == blank and lastLetter != letter %}
<li class="marque-letter" data-letter="{{ startsWith | upcase }}">{{ startsWith | upcase }}</li>
{% assign lastLetter = letter %}
{% assign foundAlphabet = true %}
{% endif %}
{% if foundAlphabet == false and lastLetter == blank %}
<li class="marque-letter first" data-letter="0">{{ alphabet[0] }}</li>
{% assign lastLetter = alphabet[0] %}
{% endif %}
{% endfor %}
{% if match %}
<li class="vendor-list-item"><a href="/collections/{{ vendor_collection_handle }}">{{ vendor }}</a></li>
{% else %}
<li class="vendor-list-item">{{ vendor | link_to_vendor }}</li>
{% endif %}
Ensuite, éditez le fichier qui gère votre javascript. Le mien c’est global.js (selon le cas cela peut être theme.js, theme.liquid.js, app.js etc. si vous avez des doutes regardez le fichier theme.liquid dans le répertoire layout il doit y être indiqué).
Placez vous à la fin de votre fichier et ajouter.
// marques par ordre alphabetique
$(function ($) {
$('#manufacturers_index a').on('click', function (e) {
e.preventDefault();
var letter = $(this).data('letter');
if (document.querySelector('li.marque-letter[data-letter="'+ letter +'"]')) {
document.querySelector('li.marque-letter[data-letter="'+ letter +'"]').scrollIntoView({
behavior: 'smooth'
});
}
})
});
Si votre thème ne gère pas le jquery, vous pouvez ajouter la librairie en question ou bien utiliser ce code en pure javascript.
// marques par ordre alphabetique
const btnsMarque = document.querySelectorAll('#manufacturers_index a');
btnsMarque.forEach(btn=> {
btn.addEventListener('click', (e) => {
let letter = e.target.dataset.letter;
if (document.querySelector('li.marque-letter[data-letter="'+ letter +'"]')) {
document.querySelector('li.marque-letter[data-letter="'+ letter +'"]').scrollIntoView({
behavior: 'smooth'
});
}
});
});
Un peu de css pour finir, afin d’apporter du style à nos nouveaux éléments. Pour cela il faut ajouter à la fin de votre fichier css principal les lignes suivantes ; (dans mon cas le fichier c’est base.css, pour vous cela peut être theme.css, theme.liquid.css, app.css etc.). Bien évidemment vous pouvez effectuer vos propres modifications sur le style afin que ce dernier soit homogène avec votre thème.
.marque-letter {
background: #000;
color: #fff;
padding: 10px;
border-radius: 5px;
font-weight: 600;
width: 54px;
text-align: center;
white-space: nowrap;
margin: 25px 0;
}
.marques-container div.rte {
width: 60%;
margin: 0 auto;
}
@media only screen and (max-width: 767px) {
.marques-container div.rte {
width: 90%;
}
}
#manufacturers_index {
margin: 30px auto 30px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
#manufacturers_index a {
padding: 5px 10px;
text-decoration: none;
font-weight: 700;
font-size: 18px;
margin-bottom: 5px;
display: block;
}
.vendor-list-item {
list-style: none;
}
.vendor-list-item a {
text-decoration: none;
margin-bottom: 10px;
display: block;
}
Ajouter la page Nos marques sur Shopify

Maintenant quittez l’éditeur de fichier et aller dans le menu Boutique en ligne puis Pages. Ajoutez en une nouvelle que vous appellerez Nos marques par exemple. Indiquez le contenu que vous voulez puis dans Modèle de thème choisissez marques (comme le nom du modèle de page qu’on a créé au tout début) enfin enregistrez vos modifications et affichez la page.
Toutes les marques avec des produits actifs sur votre boutique Shopify sont affichées et vos visiteurs peuvent consulter facilement les produits de chaque marque.
Créer un bouton Ajouter au panier dans les collections sur Shopify
Certains thèmes Shopify ne proposent pas de Call To Action (CTA) sur les pages de collections. En effet, le CTA est une technique qui peut transformer vos visiteurs en leads qualifiés et vos leads en clients. Un bouton Ajouter au panier est dès lors important si vous souhaitez convertir vos utilisateurs et augmenter votre Chiffre d’Affaire. (suite…)
Comment afficher une image de produit alternative au survol sur Shopify
Avez-vous remarqué que sur certaines boutiques Shopify, lorsqu’on survol avec la souris l’image d’un produit, celle-ci change. Et bien dans ce tutoriel vous allez pouvoir le faire sans passer par la moindre application.
L’effet de survol d’image attire l’attention et permet d’augmenter l’attrait pour les éléments de votre page. Cet effet de survol sera visible sur les pages de collections et tous les blocs de recommandation de produits (cross-sell et up-sell).
Depuis votre interface administrateur Shopify, accédez à votre boutique en ligne et allez dans Thèmes. À côté du thème utilisé, cliquez sur Actions et sélectionnez “Dupliquer”. De cette façon, vous aurez une sauvegarde de votre thème si vous manquez une étape qui a un impact négatif sur votre boutique.
Maintenant que vous avez une version de sauvegarde de votre thème en direct, cliquez à nouveau sur Actions, mais cette fois choisissez “modifier le code”. Dans la navigation de gauche, faites défiler jusqu’au répertoire Assets et sélectionnez theme.css (ou équivalent theme.css.liquid ou theme.scss.liquid cela dépend de votre thème).
A la fin de votre fichier, collez le code suivant
/* =============================================== // change image on hover // =============================================== */ .has-secondary.grid-view-item__link img.secondary{ display:none; } .has-secondary.grid-view-item__link:hover img.secondary{ display:block; } .has-secondary.grid-view-item__link:hover img.grid-view-item__image{ display:none; } @media screen and (min-width:767px){ .has-secondary.grid-view-item__link img.secondary{ display:none; } .has-secondary.grid-view-item__link:hover img.secondary{ display:block; } .has-.grid-view-item__link:hover img.grid-view-item__image{ display:none; } } @media screen and (max-width:767px){ .has-secondary.grid-view-item__link img.secondary{ display:none; } }
Cliquez sur Enregistrer.
Dans le répertoire Snippets, ouvrez le fichier qui gère l’affichage en card des produits, dans mon cas c’est product-card.liquid dans d’autres thèmes cela peut être product-card-grid.liquid.
Faites une recherche sur le terme <img pour trouver la ligne où il affiche l’image du produit, tout juste après ajoutez cette ligne :
{% if product.images.size > 1 %} < img class="secondary" src="{{ product.images.last | img_url: grid_image_width }}" alt="{{ product.images.last.alt | escape }}" /> {% endif %}
Cliquez sur Enregistrer une nouvelle fois.
Cette nouvelle fonctionnalité fantastique ne manquera pas de générer plus d’intérêt pour vos produits et votre boutique en ligne, ce qui vous rapportera à coup sûr plus de conversions.
Comment afficher un message sur les fiches produits Shopify en utilisant les balises/Tags
Si vous souhaitez ajouter un message générique sur les fiches produits de shopify sans forcément passer par les metafields, il existe une solution très simple.
En effet, vous pouvez afficher votre message sur les fiches produits que vous voulez à l’aide des balises ou Tags.
Pour ce là, rien de plus simple, il suffit d’éditer votre thème (pensez à dupliquer celui-ci et travaillez dessus si vous n’êtes pas sûr de ce que vous faites). Cherchez le fichier product-template.liquid ou équivalent, ensuite positionnez vous à l’endroit où vous souhaitez faire apparaître votre message et mettez ce bout de code.
{% for tag in product.tags %} {% if tag contains 'productMessage:' %} <div class="product--custom-message"> {{ tag | remove:'productMessage:'}} </div> {% endif %} {% endfor %}
N’oubliez pas d’Enregistrer vos modifications.

Maintenant allez sur une fiche produit où vous voulez ajouter votre message, dans Balises mettez productMessage: suivi par le message que vous souhaitez mettre (Il est très important que le texte commence par productMessage: sinon il n’affichera rien). Dans mon exemple j’ai mis productMessage: Livraison offerte !
Une fois la modification sauvegardée, affichez votre fiche produit et le message sera affiché.

Comment ouvrir un lien externe dans un nouvel onglet sur Shopify
Vous avez ajouté dans votre menu un lien externe qui pointe vers un autre site que le votre et vous souhaitez ajouter un attribut _blank à celui-ci ? (suite…)
Augmentez votre chiffre d’affaire avec le plugin WooCommerce Cross-sell Popup
Le plugin WooCommerce Cross-sell Popup permet aux boutiques qui l’ont mis en place de proposer à leurs utilisateurs une popup de cross-sell (ventes croisées) afin d’augmenter le panier moyen et par conséquent leur Chiffre d’affaire. (suite…)