Comment ajouter une flèche sur le bouton "Acheter maintenant" Shopify
Si vous êtes propriétaire ou gestionnaire d'un magasin en ligne Shopify, vous savez probablement que la conversion est une partie cruciale et nécessaire de votre entreprise. En effet, la conversion est l'art de transformer les visiteurs de votre site en clients fidèles. Et pour cela, il y a un certain nombre d'éléments éprouvés dont vous devez tenir compte, notamment l'ergonomie, la convivialité et l'esthétique de votre site Internet.
C'est pourquoi il est toujours utile de s'assurer que votre site Shopify est suffisamment attractif pour convertir le plus grand nombre possible de visiteurs en clients réguliers. L'un des moyens les plus simples de les aider dans cette conversion est de rendre les différents processus d'achat clairement visibles et accessibles.
Dans cette optique, de nombreux propriétaires de magasins en ligne se sont posé la question : "comment ajouter une flèche sur le bouton 'Acheter maintenant' Shopify ?" La réponse est à la fois simple et rapide.
1. Accédez à votre interface Shopify
Pour ajouter une flèche à votre bouton "Acheter maintenant" Shopify, vous devrez commencer par accéder à votre interface Shopify en vous connectant à votre compte et en accédant à votre site Internet.
2. Accédez à l'onglet de modification
Une fois que vous êtes dans votre interface Shopify, vous allez devoir accéder à l'onglet de modification de votre site web. Pour y accéder, cliquez simplement sur l'onglet "Thèmes" de votre interface Shopify, puis choisissez le thème que vous souhaitez modifier.
Dans le menu déroulant, sélectionnez l'option "Modifier le code". Cela vous amènera directement à l'éditeur HTML/CSS.
3. Ouvrez le fichier CSS de votre thème
Dans la fenêtre de l'éditeur HTML/CSS, vous devrez donc ouvrir le fichier CSS de votre thème. Pour être sûr que vous ouvrez le bon fichier, il est conseillé d'utiliser la fonction de recherche de votre navigateur et de taper "bouton d'ajout au panier". Vous devriez alors trouver le code suivant :
`.btn--add-to-cart {`
`position: relative;`
`z-index: 5;`
`font-family: $font-family-sans-serif;`
`text-transform: uppercase;`
`letter-spacing: 1px;`
`font-weight: $font-weight-bold;`
`font-size: em(16);`
`line-height: $line-height-reg;`
`padding: em(14) 1.5em;`
`background-color: $color-primary;`
`color: #fff;`
`cursor: pointer;`
`border: none;`
`&:after {`
`content: '\203A';`
You should find the code after this text: `content: '\203A';`
4. Ajoutez du code pour créer la flèche
Une fois que vous avez localisé le code de votre bouton "Acheter maintenant", vous pouvez donc ajouter le code nécessaire pour créer votre flèche. Pour cela, vous devrez simplement ajouter la ligne suivante :
`padding-right: 12px;`
Ce code permettra d'insérer un espace vide légèrement plus large que les autres espaces dont nous avons besoin pour afficher un icône de flèche.
Ensuite, ajoutez la ligne suivante :
`&:before {`
`content: '\2039';`
`position: absolute;`
`left: 10px;`
`font-size: 18px;`
`}`
Ce code permettra de créer une flèche en caractères spéciaux ("‹"). Vous pouvez modifier la taille de votre flèche en modifiant la valeur "font-size". Vous pouvez également modifier l'emplacement de votre flèche en ajustant les valeurs "left" et "top".
5. Sauvegardez vos modifications
Une fois que vous avez ajouté ces modifications à votre code CSS, vous pouvez simplement sauvegarder vos changements. Pour cela, cliquez simplement sur le bouton "Sauvegarder" dans l'éditeur HTML/CSS.
6. Testez votre bouton
Maintenant que vous avez ajouté une flèche à votre bouton "Acheter maintenant" Shopify, il ne vous reste plus qu'à le tester en direct sur votre site web. En effet, vous êtes maintenant en mesure de vérifier l'esthétique et l'efficacité de votre nouvel ajout.
En conclusion, ajouter une flèche sur votre bouton "Acheter maintenant" Shopify est très simple et peut être effectué en quelques étapes faciles. Les propriétaires et gestionnaires de magasins en ligne doivent constamment chercher à améliorer leur site Internet pour maximiser leur taux de conversion. En suivant les étapes décrites ci-dessus, vous pouvez rendre votre site web plus attrayant et accroître votre nombre de clients fidèles.