03GéNéRAL

Avant / après

Cette page explique le comportement réel de « Avant / après », les données dont il dépend et l’effet de ses réglages.

À QUOI CELA SERT

Avant / après

Cette page explique le comportement réel de « Avant / après », les données dont il dépend et l’effet de ses réglages.

Présente dans les modèles

page.our-philosophy.jsonpage.skin-concerns.json

COMPORTEMENTS IMPLICITES

Ce que le thème fait automatiquement

→
Le curseur compare deux images superposées ; elles doivent partager le même cadrage et le même ratio pour une comparaison crédible.
→
La position initiale est appliquée avant toute interaction et doit laisser comprendre qu’un glissement est possible.

CONFIGURATION

Comprendre les réglages

Contenu d’introduction

Renseignez le sur-titre, le titre et le texte qui présentent les comparaisons.

Sur-titreeyebrow

Titreheading

Introductionintroduction

Présentation

Réglez le nombre de colonnes, le cadrage et la hauteur des visuels.

Colonnes sur ordinateurcolumns_desktop

Par défaut : 1 · Choix : 1, 2

Format des imagesimage_ratio

Par défaut : 16 / 9 · Choix : Carré, Portrait, Paysage, Panoramique

Hauteur maximalemedia_max_height

Par défaut : 520 · Plage : 320–720px

Libellés du comparateur

Personnalisez les textes utilisés par le curseur avant/après et son accessibilité.

Libellé avantbefore_label

Libellé aprèsafter_label

Libellé d’accessibilitéslider_label

État vide

Définissez le message affiché lorsqu’aucune comparaison n’a été ajoutée.

Texte sans comparaisonempty_text

Espacement

Ajustez l’espace au-dessus et au-dessous de la section.

Marge supérieurepadding_top

Par défaut : 72 · Plage : 0–120px

Marge inférieurepadding_bottom

Par défaut : 72 · Plage : 0–120px

Palette de la section

Applique une palette cohérente au fond, au texte et aux boutons de cette section.

Apparence de la section

Utiliser une palette dédiéeopaline_use_color_scheme

Par défaut : désactivé

Paletteopaline_color_scheme

Par défaut : scheme-1

Titre

Alignement sur ordinateuropaline_heading_alignment

Par défaut : inherit · Choix : Conserver le design, Gauche, Centre, Droite

Espacement

Espace après la sectionopaline_section_spacing

Crée un espace entre cette section et la suivante. L’espacement mobile s’adapte automatiquement.

Par défaut : 0 · Plage : 0–160px

Retrait à gauche et à droiteopaline_content_inset

Éloigne le contenu des bords. L’espacement mobile s’adapte automatiquement.

Par défaut : 0 · Plage : 0–120px

COMPOSITION

Blocs disponibles

Comparaisoncomparison

Ajoutez ce bloc uniquement lorsqu’il apporte une information utile au parcours.

POINTS DE CONTRôLE

Avant de publier

✓
Le contenu reste lisible dans toutes les palettes.
✓
Les libellés correspondent à la langue de la boutique.
✓
Les promotions affichées correspondent aux règles Shopify.
✓
Les interactions restent accessibles au clavier et au toucher.