Adapter le style à votre thème

Un formulaire de devis qui semble greffé après coup nuit à la confiance au pire moment. L’application peut reprendre le style de votre thème à la place.

Thèmes pris en charge

L’adaptation au thème est conçue pour une liste précise de thèmes. Samita publie cette liste : Dawn, Refresh, Trade, Origin, Ride, Studio, Colorblock, Taste, Publisher, Crave, Spotlight, Craft, Sense et Debut.

Si votre boutique utilise l’un de ces thèmes, cochez la case et attendez-vous à un rendu très proche. Deux précisions à connaître avant d’y consacrer du temps :

• La liste continue de s’allonger. Samita la signale comme « updating » : un thème qui n’est pas cité ici est peut-être déjà pris en charge, essayez donc le paramètre avant de supposer qu’il ne fonctionnera pas.
• Un thème listé n’est pas une garantie. Les thèmes sont personnalisés, et un Dawn très modifié n’est plus le Dawn d’origine. La vérification sur la vitrine, décrite plus bas, tranche dans tous les cas, quel que soit le nom de votre thème.

Si vous ne savez pas quel thème vous utilisez, consultez Boutique en ligne > Thèmes dans votre interface administrateur Shopify : le thème actif est nommé en haut.

Activer l’adaptation au thème

1. Ouvrir l’onglet Quote form

   Accédez à Quote settings, cliquez sur Customize, puis ouvrez l’onglet Quote form.

2. Choisir un préréglage de style

   Faites défiler jusqu’à Style. Cette section affiche le préréglage actuellement utilisé par le formulaire (par exemple Classic), avec un bouton Change si vous en voulez un autre.

3. Cocher Match theme styling if possible

   Cochez Match theme styling if possible.

   

   Adaptez le formulaire à votre thème pour qu’il ne paraisse pas greffé après coup.

4. Vérifier sur votre vitrine, pas dans l’éditeur

   L’application est claire : « Theme styling applies on your storefront and is not shown in this preview. »

   Enregistrez vos modifications, ouvrez le formulaire sur votre vitrine et comparez-le à une page ordinaire.

   

   L’adaptation au thème n’apparaît qu’ici, sur votre vitrine, jamais dans l’aperçu de l’éditeur.

Note

« If possible » joue un vrai rôle dans ce libellé. La fidélité du rendu dépend du thème que vous utilisez : la vérification sur la vitrine n’est donc pas facultative. Si votre thème ne figure pas dans la liste ci-dessus et que le résultat est médiocre, écrivez à [email protected] ou utilisez Contact us dans l’application pour demander s’il est pris en charge : la liste s’enrichit encore. En attendant, rabattez-vous sur les paramètres de couleur ci-dessous.

Définir vous-même le style

L’adaptation au thème est tout ou rien : une seule case à cocher, aucun contrôle par élément. Lorsqu’elle fait presque tout le travail mais qu’un titre ou un bouton ne convient toujours pas, définissez cet élément à la main. Deux sections sous Style vous donnent un contrôle direct.

Section	Ce que vous pouvez définir
Customize text	Font style
Customize form color	Title bar color, Title bar background, Color, Background color, Border color, Quote popup primary color

Utilisez-les lorsque l’adaptation au thème laisse un élément de côté, ou lorsque vous voulez que le formulaire se démarque volontairement plutôt que de se fondre dans le décor.

Ce qu’il faut vérifier

• Polices : les titres et le corps du texte doivent correspondre au reste de votre boutique
• Boutons : le bouton d’envoi doit ressembler à vos autres boutons
• Espacement : un formulaire à l’étroit sur mobile est le problème le plus courant
• Contraste : assurez-vous que les libellés sont lisibles, surtout sur un thème sombre

Attention

Vérifiez le formulaire sur un téléphone. C’est dans les formulaires que les écarts avec le thème se voient le plus, et la plupart des demandes de devis sont envoyées depuis un mobile.

Étapes suivantes

• Créer un formulaire standard : le reste du formulaire
• Modifier le texte et les couleurs du bouton : adaptez le style du bouton de devis