Comment barrer prix en rouge Shopify

Dans le commerce électronique, il est important de mettre en avant les offres spéciales et les promotions pour encourager les achats. L'une des tactiques les plus courantes est de barrer les prix d'origine pour montrer aux clients qu'ils ont une bonne affaire. Cependant, comment peut-on barrer les prix en rouge dans Shopify ? Dans cet article, nous allons vous montrer comment procéder en détail.

Comprendre les codes HTML et CSS

Avant de commencer, il est important de comprendre que le fait de barrer les prix en rouge nécessite une compréhension de base du HTML et du CSS. Si vous n'êtes pas très à l'aise avec ces langages de programmation, il peut être judicieux de demander l'aide d'un développeur ou de suivre un tutoriel en ligne. Sinon, ne vous inquiétez pas, nous avons essayé de simplifier cela autant que possible.

Étape 1 : Accéder à l'éditeur de thème

Le premier pas consiste à accéder à l'éditeur de thème de votre boutique Shopify. Allez dans la section « Thèmes », puis cliquez sur « Personnaliser » en dessous du thème que vous souhaitez modifier. Ensuite, sélectionnez l'option « Éditeur de code » pour accéder au code source du thème.

Étape 2 : Ajouter le code HTML

Une fois que vous avez accédé à l'éditeur de code, trouvez le fichier « theme.liquid » dans la liste des fichiers de votre thème. Ouvrez-le et recherchez l'endroit où vous souhaitez ajouter le code pour barrer les prix. Il peut s'agir de la page du produit, de la page d'accueil ou de la page de la collection, selon votre choix.

Ensuite, ajoutez le code HTML suivant :

Votre prix ici

Votre prix en promotion ici

Ce code créera deux boîtes pour afficher le prix et le prix en promotion.

Étape 3 : Ajouter le code CSS

Maintenant que vous avez ajouté le code HTML, vous devez ajouter le code CSS pour aligner les boîtes et barrer le prix d'origine. Ajoutez ce code CSS :

.pricereg {

color: #999;

text-decoration:line-through;

}

.pricesale {

color: #c00;

}

Ce code aligne les boîtes et affiche le prix d'origine avec une ligne barrée en gris, tandis que le prix en promotion est affiché en rouge.

Étape 4 : Enregistrer les modifications

Enfin, enregistrez les modifications en cliquant sur le bouton « Enregistrer ». Vous pouvez également prévisualiser les modifications en cliquant sur « Prévisualiser » pour vous assurer que tout apparaît correctement.

Conclusion

En conclusion, barrer les prix en rouge Shopify est un moyen efficace de montrer aux clients qu'ils ont une bonne affaire. Bien que cela nécessite une compréhension de base du HTML et du CSS, il est assez simple à réaliser. Suivez simplement les étapes que nous avons fournies dans cet article pour ajouter le code HTML et CSS approprié, et vous serez en mesure de barrer les prix en rouge sur votre site Shopify en un rien de temps.