Placeholder IMG

Utilisation des placeholders d'images dans Shopify Liquid pour afficher une image de substitution quand aucune image n'est configurée.

Code de base

<!-- Image -->
<div class="slide-image-cover-container">
  {% if section.settings.image != blank %}
    {{ section.settings.image | image_url: width: 1200 | image_tag: loading: 'lazy', class: 'slide-image-cover' }}
  {% else %}
    {{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder mm-h-full mm-w-full' }}
  {% endif %}
</div>

Explication

Structure conditionnelle

{% if section.settings.image != blank %}
  <!-- Image réelle -->
{% else %}
  <!-- Placeholder -->
{% endif %}

Rôle : Vérifie si une image est configurée dans les paramètres de la section. Si oui, affiche l'image, sinon affiche un placeholder.

Image réelle

{{ section.settings.image | image_url: width: 1200 | image_tag: loading: 'lazy', class: 'slide-image-cover' }}

Explication :

image_url: width: 1200 : Génère l'URL de l'image avec une largeur de 1200px
image_tag : Crée la balise <img> complète
loading: 'lazy' : Charge l'image en lazy loading
class: 'slide-image-cover' : Ajoute une classe CSS

Placeholder SVG

{{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder mm-h-full mm-w-full' }}

Explication :

'image' : Type de placeholder (affiche une icône d'image)
placeholder_svg_tag : Génère un SVG de placeholder
Classes CSS : placeholder-svg placeholder mm-h-full mm-w-full

Types de placeholders disponibles

Shopify propose plusieurs types de placeholders :

Image

{{ 'image' | placeholder_svg_tag: 'placeholder' }}

Affiche une icône d'image générique.

Collection

{{ 'collection' | placeholder_svg_tag: 'placeholder' }}

Affiche une icône de collection.

Product

{{ 'product' | placeholder_svg_tag: 'placeholder' }}

Affiche une icône de produit.

Lifestyle

{{ 'lifestyle' | placeholder_svg_tag: 'placeholder' }}

Affiche une icône lifestyle.

Exemples d'utilisation

Dans une section

{% schema %}
{
  "name": "Image Section",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    }
  ]
}
{% endschema %}
 
<div class="image-section">
  {% if section.settings.image != blank %}
    {{ section.settings.image | image_url: width: 1200 | image_tag: loading: 'lazy', class: 'section-image' }}
  {% else %}
    {{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
  {% endif %}
</div>

Dans un block

{% for block in section.blocks %}
  <div class="image-block">
    {% if block.settings.image != blank %}
      {{ block.settings.image | image_url: width: 800 | image_tag: loading: 'lazy' }}
    {% else %}
      {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
    {% endif %}
  </div>
{% endfor %}

Avec un produit

<div class="product-image">
  {% if product.featured_image != blank %}
    {{ product.featured_image | image_url: width: 600 | image_tag: loading: 'lazy', alt: product.title }}
  {% else %}
    {{ 'product' | placeholder_svg_tag: 'placeholder-svg' }}
  {% endif %}
</div>

Avec une collection

<div class="collection-image">
  {% if collection.featured_image != blank %}
    {{ collection.featured_image | image_url: width: 800 | image_tag: loading: 'lazy', alt: collection.title }}
  {% else %}
    {{ 'collection' | placeholder_svg_tag: 'placeholder-svg' }}
  {% endif %}
</div>

Personnalisation CSS

Styles de base

.placeholder-svg {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.placeholder-svg svg {
  width: 50%;
  height: 50%;
  opacity: 0.3;
}

Avec aspect ratio

.slide-image-cover-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
 
.slide-image-cover,
.placeholder-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Version avec couleur personnalisée

.placeholder-svg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
 
.placeholder-svg svg {
  fill: white;
  opacity: 0.5;
}

Bonnes pratiques

1. Toujours vérifier si l'image existe

{% if section.settings.image != blank %}
  <!-- Image -->
{% else %}
  <!-- Placeholder -->
{% endif %}

2. Utiliser des classes cohérentes

{{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder mm-h-full mm-w-full' }}

Cela permet de styliser facilement tous les placeholders de la même manière.

3. Ajouter un alt text pour l'accessibilité

Pour les images réelles :

{{ section.settings.image | image_url: width: 1200 | image_tag: 
  loading: 'lazy', 
  class: 'slide-image-cover',
  alt: section.settings.alt_text | default: 'Image'
}}

Pour les placeholders, le SVG généré par Shopify est déjà accessible.

4. Utiliser le bon type de placeholder

'image' : Pour les images génériques
'product' : Pour les produits
'collection' : Pour les collections
'lifestyle' : Pour les images lifestyle

Exemple complet avec plusieurs images

<div class="gallery">
  {% for block in section.blocks %}
    <div class="gallery-item">
      {% if block.settings.image != blank %}
        {{ block.settings.image | image_url: width: 600 | image_tag: 
          loading: 'lazy', 
          class: 'gallery-image',
          alt: block.settings.alt_text
        }}
      {% else %}
        <div class="placeholder-container">
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
          <span class="placeholder-text">Image à venir</span>
        </div>
      {% endif %}
    </div>
  {% endfor %}
</div>

.gallery-item {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
 
.gallery-image,
.placeholder-container {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
 
.placeholder-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
}
 
.placeholder-text {
  margin-top: 1rem;
  color: #999;
  font-size: 0.875rem;
}

Alternative : Image par défaut personnalisée

Si vous préférez utiliser une image par défaut au lieu d'un SVG :

<div class="slide-image-cover-container">
  {% if section.settings.image != blank %}
    {{ section.settings.image | image_url: width: 1200 | image_tag: loading: 'lazy', class: 'slide-image-cover' }}
  {% else %}
    {% if section.settings.default_image != blank %}
      {{ section.settings.default_image | image_url: width: 1200 | image_tag: loading: 'lazy', class: 'slide-image-cover' }}
    {% else %}
      {{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder mm-h-full mm-w-full' }}
    {% endif %}
  {% endif %}
</div>

Avec le schema :

{
  "type": "image_picker",
  "id": "image",
  "label": "Image principale"
},
{
  "type": "image_picker",
  "id": "default_image",
  "label": "Image par défaut",
  "info": "Utilisée si aucune image principale n'est sélectionnée"
}

Accessibilité

Pour les images réelles

{{ section.settings.image | image_url: width: 1200 | image_tag: 
  loading: 'lazy', 
  class: 'slide-image-cover',
  alt: section.settings.alt_text | default: 'Image de la section'
}}

Pour les placeholders

Les SVG générés par Shopify sont déjà accessibles, mais vous pouvez ajouter un texte alternatif :

<div class="placeholder-container" role="img" aria-label="Image placeholder">
  {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
</div>

Limitations

⚠️ Taille fixe : Les placeholders SVG ont une taille par défaut, à ajuster avec CSS
⚠️ Pas de personnalisation : Impossible de changer l'icône du placeholder (utiliser une image par défaut si nécessaire)
⚠️ Couleur : La couleur du SVG peut être modifiée via CSS mais avec des limitations

Ressources

Shopify Placeholder Filters : Documentation (opens in a new tab)
Image Filters : Shopify Liquid Reference (opens in a new tab)

Calcul date de livraison en Liquid New Section