Masquer les boutons d’ajout au panier

Vous pouvez masquer les boutons Ajouter au panier sur votre boutique en ligne et les afficher à nouveau plus tard.

Attention

Il s’agit d’un tutoriel avancé, qui n’est pas pris en charge par Shopify. La connaissance des langages de design web tels que HTML, CSS, JavaScript et Liquid est requise. Nous vous suggérons d’engager un(e) partenaire Shopify si vous n’êtes pas à l’aise avec le tutoriel suivant.

Attention

Les thèmes vintage ne sont pas disponibles dans Theme Store. Les thèmes vintage ne disposent pas des fonctionnalités incluses dans les thèmes Online Store 2.0 de Shopify, et les thèmes vintage gratuits de Shopify ne reçoivent pas d’autres mises à jour, à l’exception des correctifs de sécurité.

Remarque

Cette personnalisation est faite pour les thèmes vintage de Shopify, et ne s’applique pas aux thèmes Online Store 2.0.

• Découvrez la version de l'architecture de votre thème
• Explorer les personnalisations des thèmes Online Store 2.0

Thèmes avec et sans sections

Remarque

Les étapes de ce tutoriel diffèrent selon que vous utilisez un thème avec sections ou sans sections. Un thème avec sections vous permet de glisser-déposer pour organiser la mise en page de votre page d’accueil, tandis qu’un thème sans sections ne le permet pas.

Pour déterminer si votre thème prend en charge les sections, accédez à la page Modifier le code du thème. Si le répertoire sections contient des fichiers, vous utilisez un thème avec sections. En effet, les thèmes sans sections ont été lancés avant octobre 2016 et ils ne contiennent aucun fichier dans le répertoire Sections.

Si vous utilisez un thème avec sections, cliquez sur le bouton Thèmes avec sections et suivez les instructions. Si vous utilisez un thème plus ancien, sans sections, cliquez sur le bouton Thèmes sans sections et suivez les instructions.

Sectioned

1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
2. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
3. Dans le répertoire Sections, cliquez pour ouvrir votre fichier product-template.liquid. Recherchez le code HTML du bouton Ajouter au panier. Vous pouvez rechercher le mot panier pour commencer.

Le code du bouton Ajouter au panier varie d’un thème à l’autre. Recherchez une balise <input> ou <button> avec un texte comme Add to cart, AddToCart ou add-to-cart.

Dans le thème Debut, le code du bouton d’ajout au panier ressemble à ceci :

<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>

1. Une fois que vous avez trouvé le code, insérez‑le entre les balises Liquid {% comment %} et {% endcomment %}. Cela empêchera le code de s’afficher sur votre boutique, mais vous aurez la possibilité de l’y remettre plus facilement si vous décidez de changer votre nouveau modèle ultérieurement.

D’après l’exemple ci-dessus, le nouveau code ressemblerait à ceci :

{% comment %}
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>
{% endcomment %}

Attention

Veillez à ne pas commenter les balises <form> de votre page de produit. Vos balises de commentaire ne doivent entourer aucune balise <form> ou </form>, afin d'éviter les erreurs au moment où les clients consultent votre page de produit.

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Lorsque vous êtes prêt(e) à afficher à nouveau vos boutons d’ajout au panier, revenez à votre fichier product-template.liquid à la page Modifier le code HTML/CSS, supprimez les balises {% comment %} et {% endcomment %}, puis cliquez sur Enregistrer.

Non-sectioned

1. Dans l'interface administrateur Shopify, accédez à Boutique en ligne > Thèmes.
2. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
3. Dans le répertoire Modèles, cliquez pour ouvrir votre fichier product.liquid. Recherchez le code HTML du bouton Ajouter au panier. Vous pouvez rechercher le mot panier pour commencer.

Le code du bouton Ajouter au panier varie d’un thème à l’autre. Recherchez une balise <input> ou <button> contenant un texte tel que Add to cart, AddToCart ou add-to-cart.

Dans le thème Minimal, le code du bouton d'ajout au panier ressemble à ceci :

<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>

1. Une fois que vous avez trouvé le code, insérez‑le entre les balises Liquid {% comment %} et {% endcomment %}. Cela empêchera le code de s’afficher sur votre boutique, mais vous aurez la possibilité de l’y remettre plus facilement si vous décidez de changer votre nouveau modèle ultérieurement.

D’après l’exemple ci-dessus, le nouveau code ressemblerait à ceci :

{% comment %}
<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% endcomment %}

Attention

Veillez à ne pas commenter les balises <form> de votre page de produit. Vos balises de commentaire ne doivent entourer aucune balise <form> ou </form>, afin d'éviter les erreurs au moment où les clients consultent votre page de produit.

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Lorsque vous êtes prêt(e) à afficher à nouveau vos boutons Ajouter au panier, revenez à votre modèle product.liquid sur la page Modifier le code HTML/CSS, supprimez les balises {% comment %} et {% endcomment %}, puis cliquez sur Enregistrer.