Contenu personnalisé
Produisez un contenu personnalisé flexible et unique qui présente des informations supplémentaires concernant la reconnaissance du magasin
La section Contenu personnalisé offre une flexibilité de conception et une mise en page personnalisable pour afficher tout type de contenu tel que des vidéos, des collections en vedette ou même des cartes d'images, etc.
Cette section laisse place à la personnalisation au-delà des modèles standardisés du thème Sleek , vous permettant de créer des pages visuellement attrayantes et engageantes adaptées aux besoins de votre entreprise et à vos exigences de marque.
Dans cet article, nous vous montrerons comment ajouter une section de contenu personnalisé.
Comment ajouter une section de contenu personnalisé à votre boutique Shopify
Mesures
Dans l'éditeur de thème ( Personnaliser ), cliquez sur Ajouter une section
Sélectionnez Contenu personnalisé.
Apportez les modifications nécessaires.
Enregistrez les paramètres.
Comment modifier une section de contenu personnalisé
Paramètres de section
Général
Ajustez le conteneur (pleine largeur/largeur fixe) et le jeu de couleurs pour cette section.
En particulier, s'il y a un bloc avec une hauteur plus longue, vous pouvez activer les colonnes collantes sur le bureau pour rendre les blocs de hauteur plus courts collants pendant le défilement.
En-tête de section
Utilisez les champs de texte fournis pour ajouter un titre approprié .
Laissez-le vide si vous ne souhaitez pas l'afficher
Vous pouvez également modifier la taille du titre comme suit :
Titre xs
Titre sm
Titre md
Titre lg
Titre xl
Titre 2xl
Affichage md
Écran lg
Affichage xl
pour que le contenu de votre site Web soit équilibré.
Surligner le texte
Utilisez les champs de texte fournis pour ajouter un sous-titre et une description appropriés .
Laissez-les vides si vous ne souhaitez pas les afficher
Paramètres de la grille
Vous pouvez modifier l' espacement des colonnes et l'espacement des lignes dans votre contenu personnalisé comme Extra grand/Grand/Moyen/Petit/Extra petit/Aucun/Identique à l'espacement des colonnes (valeur spéciale de l' option Espacement des lignes ).
Disposition mobile
Si vous n'êtes pas fan de la disposition en grille, vous pouvez utiliser la disposition en carrousel en sélectionnant Activer le balayage sur mobile .
Rembourrage de section
Vous pouvez modifier l'espacement au-dessus et au-dessous de la section en ajustant le curseur pour modifier les valeurs du remplissage supérieur et du remplissage inférieur .
Séparateur de sections
Cette ligne de séparation fournit une limite claire entre la section actuelle et celle ci-dessus.
Pour activer la ligne de séparation, cochez la case ✅ Afficher le séparateur .
Vous pouvez choisir une largeur de séparateur appropriée (largeur fixe/largeur complète).
Paramètres de blocage
Il y a 10 blocs principaux qui peuvent être ajoutés :
Carte d'image
Collections
Vidéo
Texte de l'image
Carte de collection
Image avec texte
Carte de promotion
Carte Lookbook
Carte texte avec image
Chacun d'entre eux aura les paramètres communs et ses propres paramètres.
Dans les paramètres du bloc , vous pouvez modifier la largeur du conteneur du bloc et son alignement vertical sur Haut/Milieu/Bas.
Dans les attributs personnalisés , l'ajout de classes au champ de saisie Classes personnalisées vous permet de définir des styles CSS personnalisés pour des blocs spécifiques.
1) Carte d'image
Ajustez le jeu de couleurs pour le bloc de carte d'image.
Cliquez sur Sélectionner une image pour attribuer l'image au support de la carte et utilisez le curseur pour modifier l'opacité de la superposition d'image .
Sélectionnez le rapport d'image de la carte comme suit :
S'adapter à l'image
Carré (1:1)
Portrait (3:4)
Paysage (4:3)
Ajoutez du texte pour le titre de la bannière. Laissez-le vide si vous ne souhaitez pas l'afficher.
Vous pouvez également modifier la taille du titre comme suit :
Titre xs
Titre sm
Titre md
Titre lg
Titre xl
Titre 2xl
Affichage md
Écran lg
Affichage xl
pour rendre votre bloc de cartes d'images plus équilibré.
Dans le texte en surbrillance :
Utilisez les champs de texte fournis pour ajouter un sous-titre et une description appropriés .
Laissez-les vides si vous ne souhaitez pas les afficher
Ajoutez un bouton d'appel à l'action qui redirige les clients vers la page cible spécifiée dans le champ « Lien de la carte » . Ajoutez un libellé , puis choisissez un style de bouton (bouton principal/bouton secondaire/bouton souligné) .
De plus, vous pouvez également modifier l'apparence ainsi que la position du contenu en modifiant ces propriétés :
Position du contenu : En haut à gauche / En haut au centre / En haut à droite / Milieu à gauche / Milieu au centre / Milieu à droite / En bas à gauche / En bas au centre / En bas à droite
Alignement du contenu : Gauche/Centre/Droite
Espacement du contenu : Petit/Moyen/Grand
Dans les paramètres mobiles :
Ajustez la palette de couleurs pour le bloc de carte d'image sur mobile.
En particulier, si vous souhaitez afficher une image de carte différente sur l'appareil mobile, vous pouvez insérer une autre image dans le champ Image .
Vous pouvez afficher le contenu en dessous ou au-dessus des onglets réductibles en activant/désactivant la case à cocher Afficher le contenu sous l'image .
De plus, le bloc vous permet également de modifier l'alignement du contenu sur mobile.
2) Collections
Ce bloc Collections vous permet d'ajouter jusqu'à 3 collections à afficher dans le champ Liste des collections .
Dans les paramètres de la grille :
Utilisez le curseur pour ajuster le nombre maximum de produits à afficher (entre 2 et 12) et le nombre de colonnes sur le bureau (entre 2 et 4).
Vous pouvez également contrôler l'espacement approprié entre les fiches de produits en sélectionnant les options Espacement des colonnes et Espacement des lignes .
Dans les paramètres du carrousel :
Vous pouvez activer l'effet carrousel dans votre collection en vedette en cochant la case ✅ Activer le carrousel sur le bureau .
Le carrousel s'affiche uniquement lorsque le nombre de produits est supérieur au nombre de colonnes.
Dans les fiches produits :
Sélectionnez le rapport d'image de la fiche produit comme suit :
Utiliser les paramètres globaux
S'adapter à l'image
Carré (1:1)
Portrait (3:4)
Paysage (4:3)
Dans la mise en page mobile :
Vous pouvez ajuster le nombre de colonnes sur mobile à 1 colonne ou 2 colonnes.
Si vous n'êtes pas fan de la disposition en grille, vous pouvez utiliser la disposition en carrousel en sélectionnant Activer le balayage sur mobile .
3) Vidéo
Vidéo : sélectionnez une vidéo que vous avez téléchargée sur Shopify Files ( vidéo hébergée par Shopify ) ou insérez une vidéo intégrée à partir d'une URL (URL de vidéo YouTube ou Vimeo).
La vidéo intégrée à partir de l'URL s'affichera lorsqu'aucune vidéo hébergée par Shopify n'est sélectionnée.
Image de couverture : si vous utilisez une vidéo intégrée à partir d'une URL, une image de couverture est requise.
Format vidéo : définissez le format de la vidéo.
Texte alternatif de la vidéo : Décrivez la vidéo aux clients utilisant des lecteurs d'écran. En savoir plus
Activer la lecture automatique de la vidéo : les vidéos sont automatiquement coupées pour permettre la lecture automatique.
Activer la boucle vidéo : la vidéo est mise en boucle automatiquement.
4) Image
Cliquez sur Sélectionner une image pour sélectionner une image appropriée à afficher dans la section.
5) Texte
Ajoutez du texte pour le titre de la bannière. Laissez-le vide si vous ne souhaitez pas l'afficher.
Vous pouvez également modifier la taille du titre pour rendre votre bloc de texte plus équilibré.
Dans le texte en surbrillance :
Utilisez les champs de texte fournis pour ajouter un sous-titre et une description appropriés .
Laissez-les vides si vous ne souhaitez pas les afficher
Vous pouvez également modifier la taille de la description sur Petite/Taille de base/Grande pour que le contenu soit équilibré sur votre site Web.
Ajoutez un bouton d'appel à l'action qui redirige les clients vers la page cible spécifiée dans le champ « Lien du bouton » . Ajoutez un libellé , puis choisissez un style de bouton (bouton principal/bouton secondaire/bouton souligné) .
De plus, vous pouvez également modifier l'apparence ainsi que la position du contenu en modifiant l'alignement du contenu (gauche/centre/droite)
6) Carte de collection
Cochez la case Utiliser le schéma de couleurs de la section si vous souhaitez que le bloc synchronise le schéma de couleurs avec la section.
Sélectionnez le rapport d'image de la carte comme suit :
S'adapter à l'image
Carré (1:1)
Portrait (3:4)
Paysage (4:3)
Choose the Collection you want to showcase on a collection card.
You can select an Image for the collection card. Leave this field blank if you want to use the collection image.
Sélectionnez le rapport d'image de la carte comme suit :
S'adapter à l'image
Carré (1:1)
Portrait (3:4)
Paysage (4:3)
Vous pouvez également ajuster la largeur de la carte sur Pleine largeur ou Largeur étroite.
7) Carte de promotion
Ajustez le jeu de couleurs pour le bloc de carte de promotion.
Cliquez sur Sélectionner une image pour attribuer l'image à la bannière de la carte promotionnelle sur le bureau et utilisez le curseur pour modifier l'opacité de la superposition d'image .
Sélectionnez le rapport d'image de la carte comme suit :
S'adapter à l'image
Carré (1:1)
Portrait (3:4)
Paysage (4:3)
Dans les paramètres de contenu :
Vous pouvez modifier la disposition de la carte de promotion en Espace entre/Séparation verticale.
Ajoutez du texte pour le titre de la bannière. Laissez-le vide si vous ne souhaitez pas l'afficher.
Dans le texte en surbrillance :
Vous pouvez modifier la taille du titre comme suit :
Titre xs
Titre sm
Titre md
Titre lg
Titre xl
Titre 2xl
Affichage md
Écran lg
Affichage xl
pour rendre votre bloc plus équilibré.
Utilisez les champs de texte fournis pour ajouter un sous-titre et une description appropriés .
Laissez-les vides si vous ne souhaitez pas les afficher
Ajoutez un bouton d'appel à l'action qui redirige les clients vers la page cible spécifiée dans le champ « Lien de la carte » .
Ajoutez un libellé , puis choisissez un style de bouton (bouton principal/bouton secondaire/bouton souligné) .
De plus, vous pouvez également modifier l'apparence ainsi que la position du contenu en modifiant la valeur de l'alignement du contenu sur Gauche/Centre/Droite.
Dans les paramètres mobiles , si vous souhaitez afficher une image de carte différente sur l'appareil mobile, vous pouvez insérer une autre image dans le champ Image .
8) Image avec texte
Cliquez sur Sélectionner une image pour sélectionner une image appropriée à afficher dans le bloc.
Badge dans l'image :
Sélectionnez le jeu de couleurs approprié pour le badge d'image et insérez le contenu du badge dans le champ Texte .
Dans les paramètres de contenu :
Ajoutez du texte pour le titre. Laissez-le vide si vous ne souhaitez pas l'afficher.
Vous pouvez modifier la taille du titre comme suit :
Titre xs
Titre sm
Titre md
Titre lg
Titre xl
Titre 2xl
Affichage md
Écran lg
Affichage xl
pour rendre votre bloc plus équilibré.
Dans le texte en surbrillance :
Utilisez les champs de texte fournis pour ajouter un sous-titre et une description appropriés .
Laissez-les vides si vous ne souhaitez pas les afficher
Vous pouvez également modifier la taille de la description sur Petite/Taille de base/Grande pour que le contenu soit équilibré sur votre site Web.
Ajoutez un bouton d'appel à l'action qui redirige les clients vers la page cible spécifiée dans le champ « Lien du bouton » .
Ajoutez un libellé , puis choisissez un style de bouton (bouton principal/bouton secondaire/bouton souligné) .
De plus, vous pouvez également modifier l'apparence ainsi que la position du contenu en modifiant la valeur de l'alignement du contenu sur Gauche/Centre/Droite.
9) Carte Lookbook
Vous pouvez ajouter jusqu'à 5 produits à afficher sur chaque bloc.
Sélectionnez une image exceptionnelle pour le support de la carte lookbook afin d'attirer l'attention des clients.
Insérez le contenu approprié pour l' en-tête de la liste de produits contextuelle dans la carte lookbook.
Laissez-le vide si vous ne souhaitez pas l'afficher
Vous pouvez également modifier la taille du titre comme suit :
Titre xs
Titre sm
Titre md
Titre lg
Titre xl
Titre 2xl
Affichage md
Écran lg
Affichage xl
Dans les fiches produits :
Sélectionnez le rapport d'image de la fiche produit comme suit :
Utiliser les paramètres globaux
S'adapter à l'image
Carré (1:1)
Portrait (3:4)
Paysage (4:3)
Vous pouvez également activer la case à cocher Hauteur de colonne complète pour garantir que le bloc s'étend systématiquement sur toute la hauteur de la colonne.
10) Carte texte avec image
Cliquez sur Sélectionner une image pour choisir une image à afficher au-dessus de la carte de texte et utilisez le curseur pour modifier la largeur de l'image (20 px - 100 px).
Sélectionnez le rapport d'image de la carte comme suit :
S'adapter à l'image
Carré (1:1)
Portrait (3:4)
Paysage (4:3)
Ajoutez du texte pour l'en-tête de la carte . Laissez-le vide si vous ne souhaitez pas l'afficher.
Vous pouvez également modifier la taille du titre pour rendre votre bloc de texte plus équilibré.
Dans le texte en surbrillance :
Utilisez les champs de texte fournis pour ajouter un sous-titre et une description appropriés . Laissez-les vides si vous ne souhaitez pas les afficher.
Vous pouvez également modifier la taille de la description sur Petite/Taille de base/Grande/Hériter pour que le contenu soit équilibré sur votre site Web.
Ajoutez un bouton d'appel à l'action qui redirige les clients vers la page cible spécifiée dans le champ « Lien du bouton » .
Ajoutez un libellé , puis choisissez un style de bouton (bouton principal/bouton secondaire/bouton souligné) .
Vous pouvez également activer la case à cocher Hauteur de colonne complète pour garantir que le bloc s'étend systématiquement sur toute la hauteur de la colonne (lorsque la hauteur d'origine du bloc est inférieure à la hauteur de la colonne).
Vous trouverez ci-dessous un exemple de fonctionnement du paramètre :
Last updated