SScale Themedocs
EN

Section pour injecter du code Liquid et HTML personnalisé, destinée aux développeurs et personnalisations avancées.

Custom Liquid

La section Custom Liquid permet d'injecter du code Liquid et HTML brut dans n'importe quelle page de votre boutique. Destinée aux développeurs et aux utilisateurs avancés, elle offre une flexibilité totale pour créer du contenu personnalisé qui n'est pas couvert par les autres sections.

Fonctionnement

Le code Liquid/HTML saisi dans le champ de la section est rendu tel quel dans la page. Vous avez accès à toutes les variables Liquid de Shopify (produits, collections, settings, etc.) et pouvez créer du contenu dynamique.

Settings principaux

SettingDescriptionOptions
Code LiquidChamp de saisie du codeTextarea (HTML + Liquid)
ContainerLargeur du conteneurNarrow / Normal / Full / Full padded

Ce que vous pouvez faire

UsageExemple
HTML statiqueBannières, iframes, embeds tiers
Liquid dynamiqueAfficher des données produit, collections, variables
CSS inlineStyles spécifiques à la section
JavaScriptScripts custom (à utiliser avec précaution)
Embeds tiersWidgets, cartes, calendriers, formulaires externes
SnippetsAppeler vos propres snippets via {% render %}

Exemples de code

Afficher un produit spécifique

{%- assign product = all_products['handle-du-produit'] -%}
<div class="custom-product-card">
  <img src="{{ product.featured_image | image_url: width: 400 }}" alt="{{ product.title }}">
  <h3>{{ product.title }}</h3>
  <p>{{ product.price | money }}</p>
</div>

Bannière HTML avec style

<div style="background: rgb(var(--color-accent-1)); padding: 2rem; text-align: center; border-radius: 8px;">
  <h2 style="color: rgb(var(--color-background)); margin: 0;">
    Livraison offerte dès 50EUR
  </h2>
</div>

Embed iframe (vidéo, carte)

<div style="position: relative; padding-bottom: 56.25%; height: 0;">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
    loading="lazy">
  </iframe>
</div>

Contenu conditionnel

{%- if customer -%}
  <p>Bienvenue {{ customer.first_name }} ! Vous avez {{ customer.orders_count }} commandes.</p>
{%- else -%}
  <p>Connectez-vous pour accéder à vos avantages fidélité.</p>
{%- endif -%}

Cas d'utilisation

Embed de widget tiers

  • Widget de chat, calendrier de réservation, formulaire TypeForm
  • Code HTML/iframe fourni par le service tiers
  • Container Full padded pour occuper toute la largeur

Contenu dynamique personnalisé

  • Affichage conditionnel selon le client (connecté/non connecté)
  • Produits recommandés basés sur des tags
  • Messages personnalisés par géolocalisation

Section custom unique

  • Design unique qui n'existe dans aucune autre section
  • Prototype rapide avant de créer une section dédiée
  • Intégration de snippets personnalisés

Données structurées (SEO)

  • JSON-LD personnalisé pour des pages spécifiques
  • Balisage schema.org supplémentaire
  • Meta tags dynamiques
💡Utilisez les variables CSS du thème (var(--color-accent-1), var(--font-heading-family), etc.) dans vos styles inline pour rester cohérent avec le design du thème, même dans du code custom.
⚠️Le code injecté n'est pas validé automatiquement. Une erreur Liquid peut casser le rendu de la page. Testez toujours votre code dans l'aperçu de l'éditeur avant de publier. Évitez le JavaScript bloquant qui pourrait impacter les performances.
ℹ️Cette section est destinée aux utilisateurs techniques. Pour les marchands sans compétences en code, les autres sections de Scale Theme couvrent la majorité des besoins sans écrire une seule ligne de code.

Prochaines étapes

PrécédentPopupSuivantVue d'ensemble