Masquer les boutons d’ajout au panier

Remarque

Si vous utilisez un thème gratuit de Shopify, vous pourrez peut-être contacter l’assistance de Shopify pour obtenir de l’aide par rapport à ce tutoriel. La conception de cette partie nécessite 15 minutes. Pour plus d’informations, voir Assistance par rapport aux thèmes.

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. Depuis votre 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.

iPhone

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur 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.

Android

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur 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.

1. 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 des 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 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. Depuis votre 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.

iPhone

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur 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.

Android

1. Dans l'application Shopify, appuyez sur Boutique.

2. Dans la section Canaux de vente, appuyez sur Boutique en ligne.

3. Appuyez sur 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.

1. 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 des 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 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.