Comment rendre les boutons d'achat plus carrés sur Shopify ? Vous pouvez le faire de deux manières différentes : en modifiant le code ou sans toucher au code. Dans ce guide, nous vous enseignons les deux méthodes pour changer le rayon des boutons Shopify.
Contactez-nous pour toute aide Shopify
Comment rendre les boutons d'achat plus carrés sur Shopify ? En modifiant le code
Si vous avez quelques connaissances en modification de code sur Shopify, vous pouvez suivre les étapes pour changer le rayon de la bordure des boutons.
Voici le guide étape par étape.
1. Accéder à l'éditeur de thème
- Depuis votre administration Shopify, allez dans Boutique en ligne > Thèmes.
- Cliquez sur Personnaliser sur le thème que vous souhaitez modifier.
2. Ouvrir le code du thème
- Dans l'éditeur de thème, cliquez sur Actions > Modifier le code.
3. Localiser le fichier CSS
- Dans l'éditeur de code, trouvez le fichier CSS où les styles de vos boutons sont définis. Il se trouve généralement sous Assets et peut être nommé quelque chose comme « theme.scss.liquid », « style.css » ou « main.scss ».
4. Modifier les styles des boutons
- Recherchez la classe CSS qui définit les styles des boutons d'achat. Il peut s'agir de quelque chose comme « .btn », « .button » ou « .btn--primary ».
- Pour rendre les boutons plus carrés, vous devrez ajuster la propriété « border-radius ». Pour rendre les bords des boutons carrés, définissez-la sur « 0 ». Vous devrez peut-être également ajuster le « padding » pour donner au bouton une forme plus carrée.
Voici un exemple de ce à quoi le CSS pourrait ressembler :
css
.btn, .button, .btn--primary {
border-radius: 0px; /* Supprimer les coins arrondis */
padding: 10px 10px; /* Ajuster le rembourrage pour rendre le bouton carré */
}
Vous pouvez également contrôler la hauteur et la largeur du bouton pour vous assurer qu'il conserve une forme carrée, en fonction de vos besoins de conception.
5. Enregistrer et prévisualiser
- Après avoir effectué vos modifications, cliquez sur Enregistrer.
- Prévisualisez votre boutique pour voir le nouveau design du bouton. Pour obtenir l'aspect carré souhaité, ajustez le rembourrage ou d'autres propriétés si nécessaire.
6. Test
- Testez vos modifications sur différents appareils (ordinateur de bureau, mobile, tablette) pour vous assurer que les boutons s'affichent correctement sur toutes les tailles d'écran.
Changer le rayon des boutons Shopify sans toucher au code
- Connectez-vous à votre panneau d'administration Shopify.
- Cliquez sur « Boutique en ligne », puis sur l'option « Personnaliser » dans votre thème actuel.
- Une fois que vous avez sélectionné l'option « Personnaliser », le tableau de bord d'édition du magasin apparaît, avec une petite icône en forme d'engrenage représentant l'option des paramètres du thème sur le côté gauche.
- Après avoir sélectionné le menu des paramètres du thème, vous devez sélectionner l'option « Boutons ». Sous celle-ci, vous verrez l'option « Rayon des coins ».
- À partir de là, vous pouvez gérer le rayon des boutons. Par exemple, si vous voulez créer une forme carrée, mettez le curseur de rayon à zéro, ou si vous voulez ajouter du rayon, faites-le glisser.
- Ce changement de rayon affecte également le rayon des boutons sur la page produit.
- Une fois que vous êtes satisfait, cliquez simplement sur le bouton « Enregistrer ».
Mots finaux
Rendre les boutons d'achat Shopify plus carrés est facile si vous suivez les étapes ci-dessus. Mais si vous rencontrez toujours des difficultés pour modifier le bouton « acheter maintenant » sur votre boutique Shopify, vous pouvez obtenir l'aide de notre développeur expert Shopify pour apporter toute modification à votre boutique Shopify.
Lisez aussi : Qu'est-ce que Shopify Sidekick et Shopify Magic ?