Conseils sur Supply

Cet article présente des astuces utiles et les meilleures pratiques pouvant vous aider à configurer Supply pour votre boutique en ligne.

Conseils en matière d'images

Images de produits

Les photos à plus haute résolution ont l’air plus polies et plus professionnelles dans Supply. Les images doivent faire au moins 1 024 pixels de large par 1 024 pixels de haut. Les images sont automatiquement réduites, si nécessaire. Les photos à plus haute résolution sont particulièrement importantes si vous activez le zoom d’image sur les pages de vos produits.

Le rapport largeur-hauteur optimal pour vos photos de produits est le carré.

Rétrécir le diaporama

Pour que le diaporama prenne moins d’espace vertical sur votre page d’accueil, il est conseillé d'utiliser des images en mode paysage, qui sont plus larges que hautes. Vous devez mettre en ligne des images d’une largeur de 1 000 px afin que vos diapositives ne présentent pas d’espace blanc à gauche et à droite sur les grands écrans. Les images de largeur inférieure sont centrées dans votre diaporama.

Conseils concernant l’en-tête

Si votre en-tête est trop grand, vous pouvez le raccourcir en ajustant votre logo. Si votre logo est trop grand, vous pouvez réduire sa taille en ajustant sa largeur maximale. Votre logo peut également contenir des pixels invisibles ou blancs, qui s’ajoutent à l’espace blanc au-dessus et au-dessous. Vous pouvez utiliser un logiciel de retouche d’images tel que Photoshop pour supprimer ces pixels de l’image de votre logo. Une fois que votre logo a été coupé, remettez-le en ligne. Le découpage de l’espace blanc dans l’image de votre logo peut réduire considérablement la hauteur de votre en-tête.

  1. Cliquez sur En-tête.
  2. Inscrivez la nouvelle largeur dans le champ Largeur personnalisée du logo (en pixels). La valeur de pixel par défaut est de 305. Utilisez une valeur de pixel plus petite pour réduire la taille de votre logo et, par conséquent, diminuer la hauteur de votre en-tête. Réduire la largeur de votre logo a pour effet de diminuer également sa hauteur, car votre logo est mis à l'échelle (ses proportions sont conservées).
  3. Cliquez sur Save (Enregistrer).

Conseils de navigation

Les conseils suivants peuvent vous aider à améliorer la navigation de votre boutique lorsque vous utilisez Supply.

Ajouter un menu déroulant

Pour ajouter des menus déroulants à votre menu principal, vous devez créer des menus sur votre page de navigation.

Si votre menu principal comporte trop d'articles pour tenir sur une ligne, alors les derniers liens qui dépassent seront ajoutés à un menu déroulant Plus.

Le comportement n'est pas contrôlé strictement par le nombre de liens dans votre menu principal, bien qu'il soit conseillé de ne pas dépasser quatre ou cinq liens. Pour inclure plus de liens, vous pouvez :

  • Raccourcissez vos liens de navigation. La taille de police de ces liens est contrôlée par la taille de police du menu principal dans vos paramètres de typographie.
  • Utilisez moins de caractères pour chaque lien. Par exemple, remplacez « Questions fréquemment posées » par « FAQ », « Nous contacter » par « Contact », « Catalogue » par « Achat », et toutes les occurrences de « et » en « & ».

Avoir trop d'éléments dans votre navigation peut rendre votre site difficile à utiliser. Avec trop d'éléments de menu, vos clients peuvent manquer les éléments importants. Essayez de limiter votre navigation à cinq ou six éléments. Utilisez les menus déroulants si vous souhaitez donner accès à plus de six pages.

Évitez d'ajouter des liens à chaque collection depuis le menu principal. Essayez plutôt de répertorier les collections dans un menu déroulant sous un lien « Boutique » ou « Catalogue ». Vous pouvez également répartir les collections en groupes, en attribuant à chaque groupe un menu déroulant, ou encore utiliser des balises de produits pour créer des sous-catégories de produits.

Supprimer la barre latérale

Pour supprimer la barre latérale de votre boutique, vous devez ajouter du code à deux de vos fichiers de thème.

  1. Dans le répertoire Sections, cliquez sur collection-template.liquid.

  2. Recherchez has_sidebar dans le fichier. Supprimez les lignes de code suivantes :

{% if collection.all_tags.size > 0 %}
  {% assign has_sidebar = true %}
{% endif %}
  1. Cliquez sur Save (Enregistrer).

  2. Dans le répertoire Sections, cliquez sur collection-list-template.liquid.

  3. Recherchez has_sidebar dans le fichier. Supprimez les lignes de code suivantes :

{% if collection.all_tags.size > 0 %}
  {% assign has_sidebar = true %}
{% endif %}
  1. Cliquez sur Save (Enregistrer).

Conseils sur les produits

Les conseils suivants vous aideront à mettre en avant vos produits en utilisant Supply.

Utiliser le filtrage de groupe avancé

Si vous avez beaucoup de produits, vous pouvez activer des sous-groupes pour aider vos clients à les trier.

  1. Définissez vos groupes. Pour une boutique d'appareils photo, les groupes pourraient être organisés comme suit : Marque, Distance focaleet Résolution.

  2. Exportez tous vos produits dans un fichier .csv.

  3. Ajoutez toutes les balises existantes avec le nom du groupe dans lequel vous souhaitez les placer, au format Group_Tag Name. Pour cet exemple, certaines balises seraient Brand_Canon, Focal Length_18 - 55mm et Resolution_12 MP. Le côté gauche du trait de soulignement est le nom du groupe et le côté droit est la balise du produit. Les espaces peuvent être inclus de chaque côté du trait de soulignement.

  4. Enregistrez votre fichier .csv et réimportez les produits dans votre boutique. Vérifiez que vous avez bien sélectionné Remplacer les produits existants qui ont la même ancre lors de la mise en ligne du fichier pour empêcher la création de produits en double.

  5. Activer le filtrage par groupe sur vos pages de collection :

    1. Depuis l’interface administrateur Shopify, allez à Online Store (Boutique en ligne) > Themes (Thèmes).
    2. À côté de Approvisionnement, cliquez sur Personnaliser.
    3. Dans le menu déroulant situé en haut de la page ou du menu Modèles, sélectionnez Pages de collection.
    4. Cliquez sur la section Collection.
    5. Sous Filtres de produits de la barre latérale, sélectionnez Par groupe.
    6. Cliquez sur Save (Enregistrer).

Remarque Si vous utilisez des guillemets simples, des guillemets doubles ou des esperluettes à l'intérieur de vos balises de produit, le filtrage groupé ne fonctionnera pas comme prévu.

Réorganiser les groupes de filtres et les balises

Les groupes sont classés par ordre alphabétique, tout comme les balises répertoriées dans les groupes. Un Expert Shopify peut vous aider à personnaliser la commande.

Conseils de tarification

Les conseils suivants vous aident à configurer le prix lorsque vous utilisez Supply.

Désactiver l'arrondi des montants de vente

  1. Sur le côté gauche, sous Ressources, ouvrez timber.scss.liquid.

  2. Au bas du fichier, ajoutez le code suivant :

.sale-tag sup {
   display: inline;
   top: 0;
   font-size: 100%;

   &:before {
    content: '.';
   }
 }
  1. Cliquez sur Save (Enregistrer).

Conseils sur le panier

Le conseil suivant garantit que le panier de votre boutique fonctionne correctement lorsque vous avez ajouté JavaScript à Supply.

Modifier le type de panier pour que JavaScript avancé fonctionne

Dans Supply, tout JavaScript ajouté à cart.liquid ne sera pas exécuté dans le tiroir ou les paniers modaux. Il sera exécuté uniquement si vous ajoutez /cart à l'URL de votre boutique. Par exemple, http://your.store.url/cart.

Si vous souhaitez ajouter l’une des fonctionnalités suivantes à la page de votre panier, vous devez définir votre type de panier sur Page :

  • Un calculateur de tarifs d'expédition
  • Plusieurs devises
  • L'emballage cadeau
  • La validation des attributs du panier
  • Un sélecteur de date
  • une case à cocher « J'accepte les conditions ».

Étapes

  1. Cliquez sur Theme settings (Paramètres du thème).
  2. Cliquez sur Cart (Panier).
  3. Dans la liste déroulante Type de panier, sélectionnez Page.
  4. Cliquez sur Save (Enregistrer).

Prêt(e) à commencer à vendre avec Shopify ?

Essayez gratuitement