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

Les meilleurs types d'images de produits pour Supply

Les photos à plus haute résolution auront l'air plus soignées et plus professionnelles dans Supply. Les images doivent donc avoir au moins 1 024 pixels de large par 1 024 pixels de haut. Les images seront automatiquement réduites, si nécessaire.

Les photos à plus haute résolution sont particulièrement importantes si vous cochez Activer le zoom sur image, que vous pouvez activer en ouvrant une page de produit dans l'aperçu de l'éditeur de thème, puis en cliquant sur Produit dans l'onglet Sections.

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

Rétrécir l'en-tête

Il existe plusieurs façons de raccourcir la partie supérieure de votre page.

Si votre logo est trop grand, vous pouvez réduire sa taille en ajustant sa largeur maximale dans les paramètres de votre thème. Réduire la largeur de votre logo réduit également sa hauteur, car Shopify réduira votre logo tout en préservant ses proportions. À l'aide de l'éditeur de thème, dans la section Header (En-tête), ajustez la valeur de la largeur personnalisée du logo. 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, réduire la hauteur de votre en-tête.

Votre logo peut également contenir des pixels invisibles ou blancs qui s'ajoutent à l'espace blanc situé au-dessus et au-dessous. Vous pouvez utiliser un programme tel que Photoshop pour supprimer ces pixels de l'image de votre logo. Une fois votre logo coupé, mettez-le en ligne de nouveau à l'aide de l'éditeur de thème. Le découpage de l'espace blanc de l'image de votre logo peut réduire considérablement la hauteur de votre en-tête.

Rétrécir le diaporama

Utilisez des images à l'orientation paysage, qui sont des images plus larges que hautes.

Bien que l'éditeur de thème suggère de mettre en ligne des images de 1 000 pixels de large par 500 pixels de haut, vous pouvez utiliser des images plus petites. Une largeur de 1 000 px est conseillée 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 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.

Les meilleures pratiques concernant le menu principal

S'il y a trop d'éléments dans votre menu principal pour tenir sur une ligne, alors les derniers liens qui ne correspondent pas 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 :

  • Rapetissez vos liens de navigation en réduisant la taille de la police de votre menu principal dans Typographie dans l'onglet Paramètres du thème.
  • 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.

Une erreur courante consiste à ajouter des liens à chaque collection depuis le menu principal. Au lieu de cela, essayez de répertorier les collections dans un menu déroulant sous un lien « Boutique » ou « Catalogue ». Vous pouvez également décomposer les collections en groupes, en donnant à chaque groupe un menu déroulant. Vous pouvez également utiliser des balises de produit 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 à trier vos produits :

  1. Définissez vos groupes. Dans l'image ci-dessus, les groupes sont Marque, Longueur focale et 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 importez les produits dans votre boutique. Cochez Replace any current products that have the same handle (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. Ouvrez une page de collection dans l'aperçu de l'éditeur de thème. Dans l'onglet Sections, cliquez sur Collection, puis cochez l'option Par groupe.

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, cliquez sur le lien timber.scss.liquid pour ouvrir votre feuille de style de thème dans l'éditeur de code en ligne.

  2. Au bas du fichier, ajoutez ceci :

.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.

Vous devez définir votre type de panier sur « page » si vous souhaitez lui ajouter l'une des fonctionnalités suivantes :

  • 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 « Je suis d'accord avec les termes ».

Pour changer le type de votre panier en « page » :

  1. Cliquez sur Paramètres du thème.

  2. Cliquez sur 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