Pop

Ajouter des sous-menus à la barre latérale

Pour ajouter des menus déroulants à votre menu principal, vous devez créer des menus sur votre page de navigation. Cet article vous guidera tout au long de ce processus.

Taille optimale du logo de la boutique

Un logo proportionnellement compact est préférable dans le thème Pop, car celui-ci l'affiche dans une barre latérale. Les logos ressemblant à des bannières, avec une largeur importante et une hauteur relativement faible ne sont pas recommandés dans ce thème.

La largeur maximale pour votre logo est de 450 pixels, et la hauteur maximale est de 200 pixels. Le fichier du logo que vous mettrez en ligne sera redimensionné conformément à ces contraintes.

Le format idéal est PNG.

Agrandir votre logo sur les appareils mobiles

Tout d'abord, pour agrandir votre logo dans n'importe quelle mise en page, il est extrêmement important de rogner tout l'espace négatif ou les pixels transparents qui entourent le graphisme de votre logo avant de mettre en ligne ce dernier sur Shopify.

Voici à quoi ressemble un logo entouré d'une grande quantité d'espace négatif :

Voici le même logo une fois rogné, c'est-à-dire lorsque tout l'espace négatif en a été supprimé :

Voici à quoi ressemble le logo non rogné lorsqu'il est utilisé dans le thème Pop :

Voici à quoi ressemble le logo rogné lorsqu'il est utilisé dans le thème Pop :

Sachant que l'espace négatif qu'il contient ne réduit pas la taille de votre logo, vous pouvez ajuster la hauteur de votre en-tête pour appareil mobile de manière à donner plus d'espace à votre logo. En conséquence, votre logo deviendra plus grand.

Ouvrez l'éditeur de thème et, dans la section En-tête et navigation , augmentez la valeur de la rubrique « Taille > Hauteur de menu pour mobiles ».

Agrandir votre logo dans la barre latérale

Tout d'abord, pour agrandir votre logo dans n'importe quelle mise en page, il est extrêmement important de rogner tout l'espace négatif ou les pixels transparents qui entourent le graphisme de votre logo avant de mettre en ligne ce dernier sur Shopify.

Voici à quoi ressemble un logo entouré d'une grande quantité d'espace négatif :

Voici le même logo une fois rogné, c'est-à-dire lorsque tout l'espace négatif en a été supprimé :

Voici à quoi ressemble le logo entouré d'espace négatif lorsqu'on le met en ligne dans le thème Pop :

Voici à quoi ressemble le logo rogné lorsqu'il est utilisé dans le thème Pop :

Sachant que l'espace négatif qu'il contient ne réduit pas la taille de votre logo, vous pouvez ajuster la largeur de votre barre latérale de manière à donner plus d'espace à votre logo. En conséquence, votre logo deviendra plus grand.

Ouvrez l'éditeur de thème et, dans la section En-tête et navigation , augmentez la valeur de la rubrique « Taille > Largeur de menu pour ordinateur de bureau ».

Réduire les espaces autour du logo de la barre latérale

Avant de supprimer le remplissage ajouté par le thème Pop au-dessus et au-dessous de votre logo, il est extrêmement important de rogner tout remplissage susceptible de provenir de l'image même. Vous devez rogner l'espace négatif ou les pixels transparents qui entourent le graphisme de votre logo avant de le mettre en ligne sur Shopify.

Voici à quoi ressemble un logo entouré d'une grande quantité d'espace négatif :

Voici le même logo lorsqu'il a été rogné, c'est-à-dire lorsque l'espace négatif en a été supprimé :

Voici à quoi ressemble le logo non rogné lorsqu'il est utilisé dans le thème Pop :

Voici à quoi ressemble le logo rogné lorsqu'il est utilisé dans le thème Pop :

Une fois que vous avez mis en ligne un logo rogné pour l'ajouter aux éléments de votre thème, vous pouvez ajuster la largeur de votre barre latérale en accédant à l'éditeur de thème. Dans la section En-tête et navigation , modifiez la valeur de la rubrique « Taille > Largeur de menu pour ordinateur de bureau » selon vos préférences.

Comme mesure finale non prise en charge, si vous souhaitez réduire le remplissage au-dessus et au-dessous de votre logo, procédez comme suit :

  1. Recherchez le thème que vous souhaitez modifier, puis cliquez sur Actions > Modifier le code.

  2. Sous Ressources, cliquez sur le fichier timber.scss.liquid pour ouvrir la feuille de style de votre thème dans l'éditeur de code en ligne ou accédez à cette adresse URL.

  3. Au bas du fichier, ajoutez ceci :

`sass {% comment %} La fonction de requête de média suivante produit ceci : @media screen et (min-width: 1025px) {...} La barre latérale ne s'affiche que si la largeur > 1025 pixels. {% endcomment %}

@include at-query ($min, $large) { .header-logo { margin-bottom: 30px /* original is 60px */; }

.site-header {
   padding-top: 30px /* original is 90px */;

   .hr--small {
     margin: 0 auto 10px /* original is 15px auto 30px */;
   }
 }

} ```

  1. Enregistrez votre fichier.

Modifier les paramètres de la page de produit

Dans la section Pages de produit , vous pouvez ajouter ou supprimer les éléments suivants :

  • La marque ou le distributeur du produit
  • Zoom sur image
  • Produits liés
  • Un sélecteur de quantité
  • Un bouton de passage à la caisse dynamique
  • Icônes de partage social

Pour modifier les paramètres des pages de produit :

  1. Dans le menu déroulant de la barre supérieure, sélectionnez Pages de produit.

  2. Cliquez sur Sections.

  3. Cliquez sur Page de produit.

  4. Pour afficher la marque ou le distributeur du produit, cochez Afficher le distributeur du produit. Pour qu'une marque ou un distributeur s'affiche, vous devez ajouter un distributeur au produit.

  5. Pour permettre aux clients d'effectuer un zoom avant en déplaçant le curseur sur l'image d'un produit, cochez Activer le zoom de l'image.

  6. Pour afficher une sélection de produits associés en bas de la page, cochez Afficher les produits associés. La collection à laquelle appartient le produit détermine les produits associés qui s'affichent. Pour afficher les produits associés, vous devez créer une collection pour le produit ou l'ajouter à une collection existante. Si le produit ne fait pas partie d'une collection, aucun produit connexe associé n'apparaîtra.

  7. Pour afficher un sélecteur de quantité, cochez Afficher le sélecteur de quantité.

  8. Pour afficher un bouton de paiement dynamique, cochez la case Afficher le bouton de paiement dynamique.

  9. Pour afficher les icônes de partage social, cochez Activer le partage de produits.

  10. Cliquez sur Enregistrer.

Meilleurs types d'images de produits pour Pop

Les photos à plus haute résolution ont l'air plus soignées et plus professionnelles dans le thème Pop. Essayez d'utiliser des images d'au moins 1 024 pixels de large par 1 024 pixels de haut. Les images sont automatiquement réduites si nécessaire. C'est pourquoi plus la qualité est élevée, meilleur est le résultat.

Les photos à plus haute résolution sont particulièrement importantes si vous utilisez la fonction Zoom sur image , que vous pouvez activer dans l'éditeur de thème, à la section Pages Produits  :

Idéalement, les images présentées de vos produits devraient toutes faire la même largeur et la même hauteur, pour l'effet esthétique de vos pages de collections.

Modifier le texte « Get connected » du pied de page

  1. Recherchez le thème que vous souhaitez modifier, puis cliquez sur Actions > Modifier les langues.

  2. À la page Langues , sélectionnez votre langue active.

  3. Dans la barre de recherche située au sommet de l'écran de la langue active, commencez à taper « connected » pour faire apparaître la traduction de « Get connected ». Cette traduction se trouve sous « Mise en page > Pied de page > Titre de réseaux sociaux ».

  4. Modifiez votre traduction et cliquez sur Enregistrer.

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

Essayez gratuitement