{% comment %}
Section: Grille bénéfices
Fichier: sections/benefits-grid.liquid
{% endcomment %}
<section id="shopify-section-{{ section.id }}" class="shopify-section">
<div id="benefits-{{ section.id }}" class="benefits-section" style="background: {{ section.settings.bg | default: '#f9f5ec' }};">
<div class="benefits-inner">
<div class="benefits-text-col">
{% if section.settings.title != blank %}
<h2 class="benefits-title" style="color: {{ section.settings.title_color | default: '#002645' }}; font-size: {{ section.settings.title_size | default: 42 }}px;">
{{ section.settings.title | escape }}
</h2>
{% endif %}
<div class="benefits-title-gap" style="height: {{ section.settings.title_gap | default: 40 }}px;"></div>
{% if section.settings.intro != blank %}
<div class="benefits-intro rte" style="color: {{ section.settings.text_color | default: '#002645' }}; font-size: {{ section.settings.intro_size | default: 16 }}px; line-height: 1.9;">
{{ section.settings.intro }}
</div>
{% endif %}
</div>
{% if section.blocks.size > 0 %}
<div class="benefits-icons-grid">
{% for block in section.blocks %}
{% if block.type == 'benefit' %}
<div class="benefit-block" {{ block.shopify_attributes }}>
<div class="benefit-icon-container" style="background: {{ section.settings.icon_bg | default: '#f0dac5' }}; padding: 14px; border-radius: 16px;">
{% if block.settings.icon != blank %}
<img
src="{{ block.settings.icon | image_url: width: 128 }}"
alt="{{ block.settings.alt | escape }}"
class="benefit-icon"
style="width: 56px; height: 56px;"
loading="lazy"
>
{% else %}
<div class="benefit-icon placeholder" aria-hidden="true"></div>
{% endif %}
</div>
<div class="benefit-title rte" style="color: {{ section.settings.text_color | default: '#002645' }}; margin-top: 16px; font-size: 15px; font-weight: 400;">
<p><strong>{{ forloop.index }}.</strong> {{ block.settings.text | escape }}</p>
</div>
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
</div>
</div>
<style>
#benefits-{{ section.id }} {
padding: {{ section.settings.pad_top | default: 60 }}px 20px {{ section.settings.pad_bottom | default: 60 }}px 20px;
}
#benefits-{{ section.id }} .benefits-title { margin-bottom: 20px !important; }
#benefits-{{ section.id }} .benefits-inner {
display: flex;
max-width: {{ section.settings.max_width | default: 1200 }}px;
margin: 0 auto;
gap: 60px;
align-items: flex-start;
}
#benefits-{{ section.id }} .benefits-text-col {
flex: 0 0 460px;
max-width: 460px;
padding-left: 50px;
padding-right: 20px;
text-align: left;
}
#benefits-{{ section.id }} .benefits-title { font-weight: 700; margin: 0; line-height: 1.2; text-align: left; }
#benefits-{{ section.id }} .benefits-intro { margin: 0; line-height: 1.5; text-align: left; }
#benefits-{{ section.id }} .benefits-title-gap { width: 100%; }
#benefits-{{ section.id }} .benefits-icons-grid {
flex: 1; display: grid;
grid-template-columns: repeat({{ section.settings.cols_desktop | default: 3 }}, 1fr);
grid-auto-rows: auto; gap: 40px 32px; align-items: start; justify-items: start;
max-width: 600px; padding-left: 0; padding-right: 0;
}
#benefits-{{ section.id }} .benefit-block { display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 180px; }
#benefits-{{ section.id }} .benefit-icon-container { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 0; width: fit-content; }
#benefits-{{ section.id }} .benefit-icon { object-fit: contain; display: block; }
#benefits-{{ section.id }} .benefit-title { text-align: left; width: 100%; margin: 0; line-height: 1.3; }
@media (max-width: 900px) {
#benefits-{{ section.id }} { padding: {{ section.settings.pad_top_mobile | default: 40 }}px 20px {{ section.settings.pad_bottom_mobile | default: 40 }}px 20px; }
#benefits-{{ section.id }} .benefits-inner { flex-direction: column; gap: 40px; }
#benefits-{{ section.id }} .benefits-text-col { flex: none; max-width: 100%; padding-left: 20px !important; padding-right: 20px !important; text-align: left; }
#benefits-{{ section.id }} .benefits-title { font-size: {{ section.settings.title_size_mobile | default: 32 }}px !important; text-align: left; }
#benefits-{{ section.id }} .benefits-title-gap { height: 10px !important; }
#benefits-{{ section.id }} .benefits-intro { font-size: {{ section.settings.intro_size_mobile | default: 14 }}px !important; text-align: left; }
#benefits-{{ section.id }} .benefits-icons-grid {
grid-template-columns: repeat({{ section.settings.cols_mobile | default: 2 }}, 1fr);
gap: 32px 20px; justify-items: start; width: 100%; max-width: 100%; margin: 0 auto;
padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box;
}
#benefits-{{ section.id }} .benefit-block { width: 100%; max-width: 140px; align-items: flex-start; }
#benefits-{{ section.id }} .benefit-icon { width: 40px !important; height: 40px !important; }
#benefits-{{ section.id }} .benefit-title { font-size: 14px !important; text-align: left; margin-top: 12px !important; width: 100%; }
}
#shopify-section-{{ section.id }} b,
#shopify-section-{{ section.id }} strong,
#shopify-section-{{ section.id }} p,
#shopify-section-{{ section.id }} h1,
#shopify-section-{{ section.id }} h2,
#shopify-section-{{ section.id }} h3,
#shopify-section-{{ section.id }} h4,
#shopify-section-{{ section.id }} h5,
#shopify-section-{{ section.id }} h6,
#shopify-section-{{ section.id }} span,
#shopify-section-{{ section.id }} li,
#shopify-section-{{ section.id }} label,
#shopify-section-{{ section.id }} blockquote,
#shopify-section-{{ section.id }} em,
#shopify-section-{{ section.id }} i,
#shopify-section-{{ section.id }} dt,
#shopify-section-{{ section.id }} dd {
color: {{ section.settings.accent_color | default: '#003057' }} !important;
}
#shopify-section-{{ section.id }} b,
#shopify-section-{{ section.id }} strong { font-weight: 800 !important; }
</style>
</section>
{% schema %}
{
"name": "Grille bénéfices",
"settings": [
{ "type": "text", "id": "title", "label": "Titre", "default": "Dormir redevient aussi simple." },
{ "type": "richtext", "id": "intro", "label": "Introduction", "default": "<p>Les tisanes, applis et podcasts, tentent de calmer le cerveau en oubliant le corps. La couverture lestée agit sur le corps. Le mental suit. Et le sommeil revient.</p>" },
{ "type": "header", "content": "Mise en page" },
{ "type": "range", "id": "title_size", "min": 20, "max": 64, "step": 1, "unit": "px", "label": "Taille titre (desktop)", "default": 42 },
{ "type": "range", "id": "title_size_mobile", "min": 18, "max": 48, "step": 1, "unit": "px", "label": "Taille titre (mobile)", "default": 32 },
{ "type": "range", "id": "intro_size", "min": 12, "max": 24, "step": 1, "unit": "px", "label": "Taille intro (desktop)", "default": 16 },
{ "type": "range", "id": "intro_size_mobile", "min": 12, "max": 22, "step": 1, "unit": "px", "label": "Taille intro (mobile)", "default": 14 },
{ "type": "range", "id": "title_gap", "min": 0, "max": 80, "step": 2, "unit": "px", "label": "Espace sous le titre", "default": 40 },
{ "type": "header", "content": "Grille" },
{ "type": "range", "id": "cols_desktop", "min": 1, "max": 4, "step": 1, "label": "Colonnes (desktop)", "default": 3 },
{ "type": "range", "id": "cols_mobile", "min": 1, "max": 3, "step": 1, "label": "Colonnes (mobile)", "default": 2 },
{ "type": "range", "id": "max_width", "min": 800, "max": 1600, "step": 20, "unit": "px", "label": "Largeur max du contenu", "default": 1200 },
{ "type": "header", "content": "Couleurs" },
{ "type": "color", "id": "bg", "label": "Couleur de fond", "default": "#f9f5ec" },
{ "type": "color", "id": "title_color", "label": "Couleur du titre", "default": "#002645" },
{ "type": "color", "id": "text_color", "label": "Couleur du texte", "default": "#002645" },
{ "type": "color", "id": "accent_color", "label": "Couleur d'accent (typo)", "default": "#003057" },
{ "type": "color", "id": "icon_bg", "label": "Fond des icônes", "default": "#f0dac5" },
{ "type": "header", "content": "Espacements" },
{ "type": "range", "id": "pad_top", "min": 0, "max": 140, "step": 4, "unit": "px", "label": "Padding haut (desktop)", "default": 60 },
{ "type": "range", "id": "pad_bottom", "min": 0, "max": 140, "step": 4, "unit": "px", "label": "Padding bas (desktop)", "default": 60 },
{ "type": "range", "id": "pad_top_mobile", "min": 0, "max": 120, "step": 4, "unit": "px", "label": "Padding haut (mobile)", "default": 40 },
{ "type": "range", "id": "pad_bottom_mobile", "min": 0, "max": 120, "step": 4, "unit": "px", "label": "Padding bas (mobile)", "default": 40 }
],
"blocks": [
{
"type": "benefit",
"name": "Bénéfice",
"limit": 12,
"settings": [
{ "type": "image_picker", "id": "icon", "label": "Icône (PNG/SVG)" },
{ "type": "text", "id": "alt", "label": "Texte alternatif", "default": "Icône" },
{ "type": "text", "id": "text", "label": "Texte du bénéfice", "default": "Votre texte de bénéfice ici" }
]
}
],
"presets": [
{
"name": "Grille bénéfices",
"blocks": [
{ "type": "benefit", "settings": { "text": "Le poids active les capteurs de la peau" } },
{ "type": "benefit", "settings": { "text": "Le cerveau reçoit l'info : \"détend-toi\"" } },
{ "type": "benefit", "settings": { "text": "Le corps détendu diminue le stress" } },
{ "type": "benefit", "settings": { "text": "Vous dormez vite et profondément" } }
]
}
]
}
{% endschema %}
{% javascript %}{% endjavascript %}
Pastebin
Retrouvez, créez et partagez vos snippets en temps réel.