Bonjour à toi ! C'est Thomas ! Nous allons voir ensemble : Comment ajouter un menu déroulant en accordéon, sur sa fiche produit Shopify.
Pour ceux qui ne me connaisse pas, je suis expert en développement web et Shopify. Mon rôle est de faire grimper tes conversions en optimisant l'expérience de tes utilisateurs sur ton site web.
Prêt à suivre l'aventure du jour ? C'est parti !
Je vais donc te montrer comment remplacer la description de ton produit pour pas avoir un truc qui soit énorme sur le côté de ta fiche produit, par un accordéon.
1ère étape : Identification de la description de la fiche produit Shopify
On va aller sur le thème début et on va identifier notre description pour voir dans quoi elle se trouve. Pour cela :
- Clique droit
- Inspecter
- Dans la search console on identifie ce qui correspond à la description
- Normalement, ce sera :
<div class="product-single__description rte">Et qui est dans le fichier ''featured product''.
Alors évidement si tu es dans ta fiche produit, sur la page produit, il faudrait que tu ailles dans le fichier ''product template''. Mais là on va rester sur la page d'accueil sur notre ''featured product''.
Ensuite, allez sur la page Convertify, dans la section ''featured product'', et recherchez à l'aide de la barre le code correspondant à la description. C'est-à-dire le morceau de code écris ci-dessus.
Etape 2 : Intégration du HTML
Arrivée à cette étape, vous allez intégrer le morceau de code ci-dessous juste au dessus de la description produit, c'est-à-dire au dessus du code que l'on a vu juste avant.
<div class="prod-accordion">
{% for block in section.blocks %}
<button class="accordion-p">
<span style="
color: {{ block.settings.accordion-color }};
">{{ block.settings.title }}</span>
</button>
<div class="panel-p">
{{ block.settings.text }}
{% if block.settings.image-accor %}
<img style="width: 100%;" src="{{ block.settings.image-accor.src | img_url: '480×480' }}" alt="product-image" />
{% endif %}
</div>
{% endfor %}
</div>La boucle ''for" va nous permettre de générer autant de morceaux de cet accordéon qu'on veut, on pourra nous les choisir à côté dans les blocs.
Dans ce morceau de code on a aussi un titre sur lequel on peut choisir la couleur et on a un contenu sur lequel on pourra même choisir d'intégrer un image à l'intérieur.
Etape 3 : intégrer le CSS
A présent on va intégrer le CSS tout en haut, donc ce morceau de code :
{% style %}
/* ACCORDION */
.accordion-p {
cursor: pointer;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
padding: 20px 15px;
border-bottom: 3px solid grey;
background: none;
}
.panel-p {
padding: 0 2px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
/accordion-p:after {
content: '\02795';
font-size: 8px;
float: right;
margin-left: 5px;
margin-top: 10px;
}
.panel-p p {
margin: 10px 0;
padding: 10px 0;
color: {{ section.settings.acontent }};
}
.active:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}
{% endstyle %}
Etape 4 : intégrer le bloc pour faire des accordéons sur sa fiche produit Shopify
Maintenant, il va falloir ajouter le bloc. C'est ce morceau de code :
,
"blocks" : [
{
"type": "accordion",
"name": Accordéon",
"settings": [
{
"type": "text",
"id": "title",
"label": "Titre de l'accordéon",
"default": "Section"
},
{
"id": "text",
"type"; "richtext",
"label": "Contenu",
"default": "<Ecrivez tout ce qui vous semble cohérent.</p"
},
{
"id": "image-accor",
"type": "image_picker",
"label": "Image Accordéon"
},
{
"id": "accordion-color",
"type": "color",
"label": "Couleur du titre",
"default": "000000"
}
]
}
]
}Le bloc c'est ce qui va te permettre de générer autant de questions, de réponses, autant de blocs que tu veux, autant de parties que tu vas rendre déroulante.
Pour l'insérer, tu vas aller vers le bas et chercher tout en descendant ''settings''. Après tu vas continuer de descendre pour arriver à la dernière accolade de cette partie. En dessous du croché fermé, tu vas insérer la partie du bloc.
A partir de là vous pouvez ajouter un accordéon.
Etape 5 : Ajouter le javascript pour finaliser la mises en place des accordéons Shopify
Le javascript c'est quoi ? Il va nous permettre de dynamiser tout ça.
Tu vas prendre ce script :
<script>
var acc = document.getElementsByClassName("accordion-p");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("clik", function() {
this.classList.toggle("activate");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>On va mettre cela au dessus du "schéma".
Maintenant tu peux créer ton accordéon, mettre une image, changer la couleur...
Tu n'es plus obligé de toucher au code, tu es tranquille.
Comment mettre la description produit à l'intérieur d'un accordéon ? Sur Shopify
On va rechercher dans la barre de recherche de la page du code : ''description"
On va effacer ça :
<div class="product-single__description rte">
{% unless product == empty %}
{ { product.description } }
{% else %}
{{ 'homepage.onboarding.product_description' | t }}
{% endunless %}
</div>On va mettre au dessus de :
{% for block in section.blocks %}Cela
<button class="accordion-p">
<span style="
color: black;
">Description</span>
</button>
<div class="panel-p">
{ { product.description } }
</div>Voilà, c'est finis !
Merci beaucoup pour ton attention ! Si tu as des questions n'hésites pas !
Tu peux également visionner ma vidéo à ce sujet :
Mon dernier article de blog : Créer une belle boutique Shopify
A bientôt !