Pop

Un thème minimaliste, conçu pour rendre votre contenu accessible. Idéal pour les boutiques avec des stocks de petite à moyenne taille, Pop est conçu autour d'une grande barre latérale de navigation, qui rend votre contenu facilement accessible.

Exemple de boutique en ligne utilisant Pop

Éditeur de thèmes Utilisez l'éditeur de thème pour personnaliser votre thème. La barre d'outils de l'éditeur de thème est divisée en Sections et Paramètres de thème.
La barre d'outils de l'éditeur de thème montrant les sections et les paramètres de thèmes
Vous pouvez utiliser des sections pour modifier le contenu et la présentation des différentes pages de votre boutique. Vous pouvez utiliser les paramètres de thèmes pour personnaliser les polices et les couleurs de votre boutique ainsi qu'apporter des modifications à vos liens de médias sociaux et à vos paramètres de passage à la caisse.

Sections Les sections sont des blocs de contenu personnalisables, qui déterminent la disposition de votre boutique en ligne. Chaque thème comprend des sections statiques et des sections dynamiques. ### Sections statiques Les sections statiques se trouvent toujours à des emplacements spécifiques de votre boutique en ligne. Vous pouvez modifier des sections statiques, mais vous ne pouvez pas les réorganiser ni les supprimer. Chaque type de page de votre boutique en ligne inclut différentes sections statiques.

Pop inclut les sections statiques suivantes :

  • Logo et menu
  • Barre d'annonces
  • Pied de page
  • Pages de produits
  • Pages de collection
  • Page de liste des collections
  • Article

Sections dynamiques Vous pouvez ajouter, réorganiser, et retirer des sections dynamiques pour personnaliser la mise en page de votre page d'accueil. Chaque thème propose un ensemble unique de sections dynamiques à choix.

Pop inclut les sections dynamiques suivantes :

  • Articles de blog
  • Liste des collections
  • Collection en vedette
  • Image avec texte
  • Diaporama
  • Produit en vedette
  • Newsletter
  • Carte
  • Texte enrichi
  • Vidéo
  • Code HTML personnalisé

Pages de produits

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 le produit appartient 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 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 passage à la caisse dynamique, cochez la case Afficher le bouton de passage à la caisse dynamique.

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

  10. Cliquez sur Enregistrer.

Newsletter

Vous pouvez ajouter un champ d'inscription à votre newsletter en page d'accueil. Cela vous permet de recueillir les adresses e-mail de clients pour vos campagnes de marketing par e-mail. Consultez le blog de Shopify pour en savoir plus sur le marketing par e-mail.

La section newsletter sur un site web. Ce champ comprend une zone de texte pour que les clients y saisissent leur adresse e-mail, mais aussi un bouton « S'abonner ».

Pour ajouter un champ d'inscription à la newsletter à votre page d'accueil :

  1. Trouvez Pop et cliquez sur Personnaliser.

  2. Cliquez sur Sections.

  3. Cliquez sur Ajouter une section  > Newsletter.

  4. Saisissez un titre pour l'inscription à la newsletter dans le champ Titre. Le titre par défaut est : « Abonnez-vous à notre newsletter ».

  5. Saisissez un sous-titre pour l'inscription à la newsletter dans le champ Sous-texte. Le texte par défaut est : « Des promotions, des nouveaux produits et des soldes directement dans votre boîte de réception. ».

  6. Paramétrez la couleur d'arrière-plan du champ d'inscription à la newsletter en cliquant sur l'échantillon Couleur d'arrière-plan et sélectionnez celle que vous désirez.

  7. Cliquez sur Enregistrer.

Vidéo

Vous pouvez ajouter une vidéo YouTube ou Vimeo sur votre page d'accueil. Les vidéos permettent d'éveiller la curiosité de vos clients et de les intéresser à votre entreprise.

Pour ajouter une vidéo à votre page d'accueil :

  1. Trouvez Pop et cliquez sur Personnaliser.

  2. Cliquez sur Sections.

  3. Cliquez sur Ajouter une section  > Vidéo.

  4. Saisissez un titre pour la vidéo dans le champ Titre.

  5. Saisissez le lien de partage de votre vidéo dans le champ Lien de la vidéo.

    Voici à quoi ressemble un lien de partage YouTube : https://youtu.be/OTJXAUZY9t0. Pour découvrir comment copier le lien de partage d'une vidéo YouTube, consultez cet article de l'Aide YouTube.

    Voici à quoi ressemble un lien de partage Vimeo : https://vimeo.com/281332510. Pour découvrir comment copier le lien de partage d'une vidéo Vimeo, consultez cet article du Centre d'aide de Vimeo.

  6. Cliquez sur Enregistrer.

Code HTML personnalisé

Dans la section HTML personnalisé , vous pouvez utiliser du code HTML pour créer du contenu personnalisé pour votre page d'accueil. Par exemple, vous pouvez utiliser le langage HTML pour mettre en forme des blocs de texte, créer des tableaux ou incorporer du contenu à partir d'un site web tiers.

Pour ajouter du langage HTML personnalisé à votre page d'accueil :

  1. Trouvez Pop et cliquez sur Personnaliser.

  2. Cliquez sur Sections.

  3. Cliquez sur Ajouter une section.

  4. Dans la zone Mise en page avancée , cliquez sur HTML personnalisé > Ajouter.

  5. Cliquez sur HTML personnalisé et saisissez le code HTML que vous souhaitez ajouter à votre page d'accueil.

  6. Cliquez sur Enregistrer.

Paramètres du thème Vous pouvez utiliser les paramètres du thème pour personnaliser les couleurs et la typographie de votre boutique en ligne. Vous pouvez également configurer des liens vers vos comptes de médias sociaux, modifier les paramètres de votre panier et ajouter un favicon.

Pop inclut les paramètres de thème suivants :

  • Couleurs
  • Typographie
  • Favicon
  • Page de panier
  • Médias sociaux
  • Passage à la caisse

Couleurs

Vous pouvez choisir les couleurs pour les différentes parties de votre boutique en ligne. Pour personnaliser les couleurs :

  1. Trouvez Pop et cliquez sur Personnaliser.
    1. Cliquez sur Paramètres du thème. 2. Cliquez sur Couleurs. 3. Pour chaque type de contenu, cliquez sur l'échantillon de couleur pour utiliser le sélecteur de couleur : ! Le sélecteur de couleurs dans l'éditeur de thème - La zone Sélection récente affiche les couleurs que vous avez récemment choisies pour votre thème. La zone En cours d'utilisation affiche les couleurs que vous utilisez actuellement dans d'autres parties de votre thème. Pour configurer la couleur sur transparent, cliquez sur Aucun. 4. Cliquez sur Enregistrer.

Typographie

Vous pouvez choisir la typographie du texte de votre boutique en ligne.

Étapes :

  1. À côté de , cliquez sur Personnaliser.

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

  3. Cliquez sur Typographie.

  4. Pour chaque type de texte, cliquez sur Modifier pour utiliser le sélecteur de police :

    Le bouton « Modifier » du sélecteur de police

  5. Explorez les polices en utilisant le champ de recherche ou en cliquant sur Charger plus.

    Pour voir toutes les polices disponibles, voir la bibliothèque de polices de Shopify.

  6. Cliquez sur le nom de la police que vous souhaitez utiliser.

  7. Pour modifier le style d'une police, par exemple en la mettant en gras ou en italique, cliquez sur Normal. Ensuite, cliquez sur le style que vous souhaitez utiliser, puis sur Sélectionner  :

    Une sélection d'épaisseurs de police disponibles dans le sélecteur de police

  8. Cliquez sur Enregistrer.

Médias sociaux

Vous pouvez ajouter des boutons de partage social pour vos produits et vos articles de blog ainsi que des liens vers vos comptes de médias sociaux.

Pour personnaliser les paramètres des médias sociaux :

  1. Trouvez Pop et cliquez sur Personnaliser.

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

  3. Cliquez sur Médias sociaux.

  4. Pour mettre en ligne une image de partage social, dans la zone Image de partage social , cliquez sur Sélectionner une image ou Découvrir les images gratuites.

  5. Pour ajouter des liens vers vos comptes de médias sociaux, dans la zone Comptes sociaux , saisissez les liens vers vos comptes dans les champs fournis. Saisissez les liens complets, tels que https://instagram.com/shopify, ou https://twitter.com/shopify.

    Les liens vers vos comptes de médias sociaux s'affichent dans le pied de page de votre boutique en ligne.

  6. Pour ajouter des boutons de partage social à vos produits et vos articles de blog, dans la zone Options de partage social , cochez une ou toutes les cases.

    Vous pouvez ajouter les boutons de partage suivants :

- Partager sur Facebook - Tweeter sur Twitter - Épingler sur Pinterest (non disponible pour le partage d'articles de blog)

  1. Cliquez sur Enregistrer.

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.

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

Essayez gratuitement