Shopify Debut thème aider le code du centre

Aimez-vous notre centre d\'aide ? Veuillez suivre les étapes.

Étape 1: ajoutez un nouveau nom de section "centre d\'aide":

Collez le coup de code:


{%- assign cat_per_row = section.settings.category_per_row -%}
{%- assign blocks_size = section.blocks.size -%}

{% if blocks_size <= cat_per_row %}
{%- assign grid_item_width = 'category-per-row-' | append: blocks_size -%}
{% else %}
{%- assign grid_item_width = 'category-per-row-' | append: cat_per_row -%}
{% endif %}




{% schema %}
{
"nom": "Catégorie",
"réglages": [
{"type": "plage",
"id": "category_per_row",
"label": "Catégorie par ligne",
"par défaut": 5,
"min": 1,
"max": 6,
"étape 1},

{
"type": "case à cocher",
"id": "show_image",
"label": "Afficher l\'image",
"default": vrai
},
{
"type": "case à cocher",
"id": "show_text",
"label": "Afficher le texte",
"default": vrai
},
{
"type": "couleur",
"id": "color_category_active",
"label": "Catégorie active",
"default": "# 3d4246"
},
{
"type": "plage",
"id": "border_px",
"label": "Largeur de la bordure",
"par défaut": 1,
"min": 1,
"max": 5,
"étape 1},
{
"type": "couleur",
"id": "border_color",
"label": "Couleur de la bordure",
"default": "#eee"
},
{
"type": "couleur",
"id": "shadow_box_color",
"label": "Couleur du Shadow Box",
"default": "#eee"
}
],
"blocs": [
{
"type": "catégorie",
"nom": "Catégorie",
"réglages": [
{
"type": "texte",
"id": "nom_catégorie",
"label": "Titre",
"default": "Nom de la catégorie"
},
{
"type": "texte",
"id": "category_des",
"label": "Description"
},
{
"type": "url",
"id": "url",
"label": "Url"
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
}

]
}
],
"préconfigurations": [
{
"nom": "Catégorie",
"catégorie": "catégorie"
}
]
}
{% endschema %}

{% stylesheet %}


ul # help-center-category {
style liste: aucun;
affichage: grille;
marge: 0;
rembourrage: 0;
marge inférieure: 30px;
justify-items: centre;
largeur: 100%;
curseur: pointeur;
}

.category-per-row {
grille-modèle-colonnes: 100%;
}

@média uniquement écran et (largeur min: 600px) {

.category-per-row-1 {
grille-modèle-colonnes: 100%;
}

.category-per-row-2 {
grille-modèle-colonnes: 50% 50%;
}

.category-per-row-3 {
grille-modèle-colonnes: 33% 34% 33%;
}

.category-per-row-4 {
grille-modèle-colonnes: répétition (4, 25%);
}

.category-per-row-5 {
grille-modèle-colonnes: répétition (5, 20%);
}

.category-per-row-6 {
grille-modèle-colonnes: 16,6% 16,7% 16,7% 16,7% 16,7% 16,6%;
}

}

ul # help-center-category> li {
text-align: centre;
marge: 0;
rembourrage: 12px;
largeur: 100%;
hauteur: 100%;
débordement caché;
boîte-ombre: aucun;
position: relative;
haut: 0;
gauche: 0;
transition: 0,3 s;
}

img.image-category {
largeur: 50px;
hauteur: 50px;
}

ul # help-center-category> li: hover {
haut: -10px;
gauche: -10px;
}

{% endstylesheet %}

Étape 2: Créez un nouveau nom de modèle de page help_center.

La même copie et collez le code ci-dessous:





{{ page.title }}





{% section 'help-center' %}



Si le thème de votre boutique n\'est pas le premier thème, veuillez le remplacer

 {{ page.content }}
avec
 {% section 'help-center' %}

Étape 3: Créez une page avec le modèle page.help_center.

Étape 4: Définissez votre propre catégorie sur votre thème pour personnaliser.

Did we mention that it is free?

We are here for you! Growing your business is a tough job. We've got your back.
Talk to us if you have any questions!

START FREE