Masquer les boutons d’ajout au panier

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 la Boutique des thèmes. Ces thèmes 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 que 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
• Explorez les personnalisations de thème Online Store 2.0

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

Remarque

Cette personnalisation n’est pas compatible avec les boutons de paiement dynamique. Si votre thème prend en charge le paiement dynamique, empêchez les boutons de s’afficher en suivant les étapes ci-après pour masquer les boutons de paiement dynamique sur les pages de produits.

Thèmes avec et sans sections

Remarque

les étapes de ce tutoriel sont différentes selon que vous utilisez un thème avec sections ou sans section. 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 section 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. Les thèmes sans section ont été publiés avant octobre 2016 et n'ont pas de fichiers 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 section, cliquez sur le bouton Thèmes sans section et suivez les instructions.

---

Sectioned themes

Bureau

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 d’ajout au panier varie selon le thème. Recherchez une balise <input> ou <button> contenant un texte tel que 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.

iPhone

1. Dans l’application Shopify, appuyez sur le bouton …
2. Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
3. Appuyez sur Manage themes (Gérer les thèmes).
4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
5. 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 d’ajout au panier varie selon le thème. Recherchez une balise <input> ou <button> contenant un texte tel que 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.

Android

1. Dans l’application Shopify, appuyez sur le bouton …
2. Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
3. Appuyez sur Manage themes (Gérer les thèmes).
4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
5. 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 d’ajout au panier varie selon le thème. Recherchez une balise <input> ou <button> contenant un texte tel que 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 themes

Bureau

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 d’ajout au panier varie selon le thème. 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.

iPhone

1. Dans l’application Shopify, appuyez sur le bouton …
2. Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
3. Appuyez sur Manage themes (Gérer les thèmes).
4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
5. 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 d’ajout au panier varie selon le thème. 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.

Android

1. Dans l’application Shopify, appuyez sur le bouton …
2. Dans la section Canaux de vente, appuyez sur Online Store (Boutique en ligne).
3. Appuyez sur Manage themes (Gérer les thèmes).
4. Recherchez le thème que vous souhaitez modifier, cliquez sur le bouton … pour ouvrir le menu Actions, puis cliquez sur Modifier le code.
5. 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 d’ajout au panier varie selon le thème. 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.