Catégories
Conseils e-commerce

Comment coder votre propre barre d'annonces

Remarque: Avant d'apporter des modifications au code de votre boutique, assurez-vous toujours de sauvegarder votre site.

Je suis sûr que vous avez déjà vu des bannières comme celles-ci. Ils se trouvent généralement tout en haut des sites Web:

Exemples de barres d'annonces de sites Web

Je parie que vous les voyez tout le temps, et pour une bonne raison. Une barre d'annonce est simple, mais très moyen efficace de communiquer des informations critiques, opportunes et / ou importantes à vos clients.

C'est un endroit idéal pour annoncer des choses comme des ventes, des liens vers vos comptes de médias sociaux, des promotions d'expédition (comme la livraison gratuite), des retards de production, des annonces de nouveaux articles de blog, etc. Parfois, les commerçants les utilisent même pour la capture d'e-mails.

Une fois que vous avez appris à créer le vôtre, vous pouvez le personnaliser pour faire à peu près n'importe quoi. La meilleure partie est que vous n'avez pas besoin d'installer une application pour en avoir une dans votre magasin.

Dans ce didacticiel, nous allons créer cette barre d'annonce à l'aide d'une section de thème Shopify personnalisée.

Comment créer une barre d'annonce Shopify
Avant de pouvoir commencer, nous devons définir tout ce dont nous aurons besoin.

Passons à la cartographie!

Quelles fonctionnalités voulons-nous?

Il est important de prendre une minute pour réfléchir à toutes les fonctionnalités dont vous avez besoin ou que vous souhaitez. Pour les besoins de ce didacticiel, nous allons développer les fonctionnalités modifiables suivantes pour notre section de barre d'annonce:

  • Texte (la possibilité d'ajouter du texte et des liens avec un style de base comme le gras et l'italique)
  • Taille du texte
  • Couleur du texte
  • Couleur de l'arrière plan
  • Couleur de la bordure
  • Taille de la bordure
  • Rembourrage

Créez votre fichier de section

Connectez-vous à votre tableau de bord Shopify et accédez à Boutique en ligne > Thèmes.

Tutoriel de personnalisation du thème Shopify

Cliquez sur le menu déroulant étiqueté Actions et cliquez Modifier le code.

Tutoriel de personnalisation de la barre d'annonces Shopify

Dans le volet du navigateur de fichiers, recherchez le dossier appelé Sections et étendre cela. Clique sur le Ajouter une nouvelle section lien.

Personnaliser une barre d'annonces dans Shopify

Nommons notre nouvelle section de thèmes barre d'annonce.

Ajout d'une barre d'annonces

Une fois votre fichier créé, vous verrez le code de section standard pré-rempli suivant.

{% schema%}
{
«Name»: «Section name»,
"paramètres": ()
}
{% endschema%}

{% feuille de style%}
{% endstylesheet%}

{% javascript%}
{% endjavascript%}

Cela peut sembler déroutant, mais à la fin de ce didacticiel, cela aura plus de sens. La balise de schéma est l'endroit où vous allez stocker toutes les informations sur votre nouvelle section.

Si vous souhaitez en savoir plus sur le schéma de contenu, consultez la documentation complète de Shopify.

Ensuite, nous devons placer une référence à ce fichier / code là où nous voulons que notre barre d'annonce apparaisse sur notre site Web. Plaçons les nôtres tout en haut du site Web.

Ouvrez le theme.liquid fichier qui peut être trouvé dans le navigateur de fichiers dans le Disposition dossier.

Tutoriel de personnalisation du thème Shopify Liquid

Cherchez l'ouverture et placez-le juste en dessous, comme ceci:

<classe de corps ="Modèle – {{modèle | scission: «.» | première }}">
{% section ‘annonce_bar’%}

Commencer

Ensuite, dans votre fichier de section, ajoutons un div avec une classe de annonce. Le texte que vous souhaitez afficher dans votre barre d'annonce sera enveloppé à l'intérieur de ce div.

<classe div ="annonce">{{section.settings.announcement_text}}

Le code peut-être étrange que vous voyez à l'intérieur du div s'appelle une «balise liquide». Les étiquettes liquides sont entourées de crochets «bouclés». Il fait référence à un identifiant appelé annonce_text dont nous apprendrons dans une minute.

Mais d'abord, les paramètres d'entrée

Les paramètres d'entrée sont utilisés par le commerçant pour configurer les paramètres de thème de sa boutique. Le marchand accède aux paramètres depuis la barre latérale de l'éditeur de thème. " –Shopify

Les paramètres d'entrée sont impressionnants et puissants une fois que vous savez comment les utiliser tous. Heureusement, Shopify donne des exemples de chacun dans leur documentation qui peut tous être trouvés ici.

Supprimez tout ce qui se trouve dans votre {% schema%} et remplacez-le par ce qui suit. Votre code complet jusqu'à présent devrait ressembler à ceci:

<classe div ="annonce">{{section.settings.announcement_text}}

{% schema%}
{
"Name": "Barre d'annonce",
"paramètres": (
{
"Type": "case à cocher",
"Id": "annonce_visibility",
"Label": "Visibilité (Activé / Désactivé)",
"Par défaut": vrai
}
)
}
{% endschema%}

(Nous avons également supprimé la feuille de style et les balises javascript, FYI)

Nous avons choisi le case à cocher type d'entrée parce que nous voulons en afficher un en haut de notre section afin que nous puissions activer et désactiver la barre.

Paramètre de la barre d'annonce

Maintenant que notre case à cocher est configurée, nous devons envelopper notre conteneur div (celui que nous avons créé il y a quelques instants) dans une balise liquide alimentée par notre paramètre de visibilité.

Enveloppez le aannonce div dans une instruction «if»:

{% if section.settings.announcement_visibility%}

<classe div ="annonce">{{section.settings.announcement_text}}


{% fin si %}


{% schema%}
{
"Name": "Barre d'annonce",
"paramètres": (
{
"Type": "case à cocher",
"Id": "annonce_visibility",
"Label": "Visibilité (Activé / Désactivé)",
"Par défaut": vrai
}
)
}
{% endschema%}

La nouvelle instruction «if» que nous avons ajoutée examine les paramètres d'un ID correspondant de annonce_visibilité. Nous définissons la valeur par défaut sur vrai, donc la barre sera affichée.

Ajoutons le reste des paramètres

Remplacez le code entre votre balise de schéma par ce qui suit:

{% schema%}
{
"Name": "Barre d'annonce",
"paramètres": (
{
"Type": "case à cocher",
"Id": "annonce_visibility",
"Label": "Visibilité (Activé / Désactivé)",
"Par défaut": vrai
},
{
"Type": "richtext",
"Id": "annonce_text",
"Label": "Texte",
"défaut": "

Défaut texte riche <a href ="Https: //example.com/ ">contenu

"
},
{
"Type": "plage",
"Id": "annonce_text_size",
«Min»: 12,
«Max»: 24,
"étape 1,
"Unité": "px",
"Label": "Taille de la police",
«Par défaut»: 16
},
{
"Type": "couleur",
"Id": "annonce_text_color",
"Label": "Couleur du texte",
"Par défaut": "# 000000"
},
{
"Type": "couleur",
"Id": "annonce_bg_color",
"Label": "Couleur d'arrière-plan",
"Par défaut": "#aaa"
},
{
"Type": "plage",
"Id": "annonce_border_size",
"Min": 0,
«Max»: 10,
"étape 1,
"Unité": "px",
"Label": "Taille de la bordure",
«Par défaut»: 4
},
{
"Type": "couleur",
"Id": "annonce_border_color",
"Label": "Couleur de la bordure",
"Par défaut": "# 333333"
},
{
"Type": "plage",
"Id": "annonce_padding",
«Min»: 0,
«Max»: 20,
"étape 1,
"Unité": "px",
"Label": "Padding",
«Par défaut»: 5
},
{
"Type": "sélectionner",
"Id": "annonce_text_align",
"Label": "Alignement du texte",
«Options»: (
{"Value": "left", "label": "left"},
{"Value": "center", "label": "center"},
{"Value": "right", "label": "right"}
),
"Par défaut": "centre"
}
)

}
{% endschema%}

Nous avons beaucoup à déballer ici, mais une fois que vous avez compris, c'est facile à comprendre. Allons réglage par réglage.

Texte riche

Richtext fournit juste assez de mise en forme pour être vraiment utile, tout comme Shopify déclare: "Vous pouvez utiliser texte riche paramètres pour autoriser le contenu texte avec une mise en forme de base. Les options de mise en forme prises en charge sont les suivantes: gras, italique, souligné, liens et paragraphes. » (La source)

Curseurs de plage pour la taille de la police, le remplissage et la taille de la bordure

J'ai utilisé un curseur de plage pour contrôler la taille du texte. Il vous permet de choisir une taille minimale et maximale, ainsi qu'une valeur par défaut. J'ai choisi d'utiliser px, mais vous pouvez utiliser em ou tout ce que vous voulez. Ce même ensemble de paramètres est ensuite réutilisé pour contrôler la taille de la bordure inférieure de la barre d'annonce, ainsi que le remplissage.

Couleurs du texte et d'arrière-plan

J'ai utilisé le type de paramètre de couleur pour configurer la couleur d'arrière-plan de la barre d'annonce elle-même ainsi que la couleur du texte.

Liste déroulante de sélection

Pour compléter nos paramètres, nous avons utilisé un type déroulant pour l'alignement de notre texte.

Préréglages (facultatif)

Si vous avez des préréglages, la section apparaîtra automatiquement dans l'éditeur de thème et deviendra une section dynamique. Cela signifie que vous pourrez déplacer son emplacement (vers le haut ou vers le bas) sur la page d'accueil si votre thème est activé pour les sections dynamiques.

CSS

La dernière chose que nous devons faire est de prendre toutes les configurations de style que nous avons choisies et de les traduire en CSS. Juste après votre déclaration d'ouverture "si", veuillez ajouter ce qui suit style marque:

C'est là que nous stylisons le Annonce élément d'emballage que nous avons créé au début de ce voyage. Nous utilisons les mêmes tags liquides pour référencer l'ID de chaque type de paramètre. Il est important de se rappeler que lorsque nous référençons un ID dans notre schéma, nous devons le faire précéder de section.settings.

Résultats finaux

Paramètres de la barre d'annonces Shopify

Personnalisation de la barre d'annonces Shopify

Et juste comme ça, vous avez codé votre première section de thème. Vous pouvez désormais alerter vos clients de votre prochaine vente en toute simplicité!

Il y a beaucoup d'autres choses que vous pourriez envisager d'ajouter à cela; instructions conditionnelles sur les types de page sur lesquels il est visible (comme la page d'accueil uniquement, peut-être?).

Avec ce que vous avez appris dans ce didacticiel, combiné à la documentation complète de Shopify, vous pouvez créer une section de thème pour faire à peu près tout: liste de produits en vedette, collection de produits en vedette, etc.

Revenez en arrière et relisez ceci, consultez les documents et mettez-vous au travail! Vous pouvez rendre votre thème tellement meilleur tout seul, sans avoir besoin d'un développeur.

Voir le code complet ici

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *