Remplacer « Ajouter au panier » par un lien de contact

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

Si vous utilisez un thème gratuit de Shopify, vous pouvez contacter l’assistance Shopify pour obtenir de l’aide par rapport à ce tutoriel. La conception de cette partie nécessite 15 minutes. En savoir plus sur la Politique en matière de conception de Shopify.

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 remplacer le bouton Ajouter au panier par un lien envoyé par e-mail ou par un formulaire de contact. Par exemple, vous voudrez peut-être remplacer le bouton Ajouter au panier pour les produits qui ne sont pas à la vente actuellement ou pour ceux qui sont fabriqués sur commande.

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.

Étapes à suivre pour les thèmes avec sections

Sélection de votre thème

Les étapes de cette personnalisation varient selon que vous utilisez le thème Narrative ou un autre thème gratuit de Shopify. Cliquez sur le bouton de votre thème, puis suivez les instructions ci-dessous :

Narrative

Créer un nouveau modèle de produit dans Narrative

Pour remplacer le bouton Ajouter au panier d’un produit, vous devez créer un modèle de produit personnalisé pour ce produit.

Étapes :

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 sur Ajouter un nouveau modèle.

4. Créez le modèle de produit :

   • Dans le menu déroulant, sélectionnez Produit.
   • Nommez votre modèle requires-contact.
   • Cliquez sur Create template (Créer le modèle).

5. Recherchez la ligne de code suivante :

{% section 'product-template' %}

Remplacez-le par :

{% section 'product-template-requires-contact' %}

Ce code relie votre nouveau modèle à une nouvelle section de produit que vous créerez lors des prochaines étapes.

1. Cliquez sur Save (Enregistrer).

Créer une nouvelle section de produit

1. Dans le répertoire Sections, cliquez sur Ajouter une nouvelle section.

2. Créez la section :

   1. Nommez votre nouvelle section product-template-requires-contact.
   2. Cliquez sur Créer la section.

3. Supprimez la totalité du code présent par défaut dans le fichier de section, afin que celui-ci soit complètement vide.

4. Dans le répertoire Sections, cliquez sur product-template.liquid. Copiez tout le contenu du fichier dans votre presse-papiers.

5. Revenez à votre nouvelle section product-template-requires-contact.liquid et collez le code dans le fichier.

6. Cliquez sur Save (Enregistrer).

Masquer le bouton d'ajout au panier

1. Dans votre fichier de section product-template-requires-contact.liquid, recherchez le code HTML du Formulaire de produit de votre page de produit. Vous le trouverez en recherchant le mot form dans le fichier.

2. 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.

Pour Narrative, le code modifié doit ressembler à ceci :

{% comment %}
{% include 'product-form' %}
{% endcomment %}

1. Cliquez sur Save (Enregistrer).

Ajouter un lien e-mail ou un formulaire de contact

À présent que vous avez masqué le bouton Ajouter au panier, vous pouvez ajouter le contenu que vous souhaitez afficher à la place.

Lien e-mail

Vous pouvez ajouter un lien e-mail activant l'ouverture du programme de messagerie électronique par défaut du client et la saisie de l’adresse e-mail visible par les clients propre à votre boutique dans le champ du destinataire. Pour ajouter un lien e-mail :

1. Sur une nouvelle ligne, sous la balise Liquid {% endcomment %} que vous avez ajoutée à la dernière étape, ajoutez le code HTML pour un lien e-mail :

<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

1. Cliquez sur Save (Enregistrer).

Formulaire de contact

Vous pouvez ajouter un formulaire de contact à votre nouveau modèle de produit en copiant le code à partir du modèle de la page de contact de votre thème. Pour ajouter un formulaire de contact :

1. Dans le répertoire Templates (Modèles), cliquez sur page.contact.liquid.
2. Recherchez la balise Liquid {% form 'contact' %} dans le fichier.
3. Copiez la totalité du code, de la balise Liquid {% form 'contact' %} jusqu’à la balise Liquid {% endform %}. Incluez les balises de formulaire Liquid dans le code que vous copiez.
4. Retournez à votre nouveau fichier product.requires-contact.liquid dans le répertoire Modèles.

Sur une nouvelle ligne, sous la balise Liquid {% endcomment %} que vous avez ajoutée, collez le code du formulaire de contact.

1. L’étape suivante consiste à envelopper le code que vous venez de coller dans des balises HTML div. L’attribut de classe inclus dans le code des balises div permet de garantir une restitution correcte de votre formulaire de contact sur la page.

Sur une nouvelle ligne, au-dessus de {% form 'contact' %}, collez le code suivant :

<div class="form-vertical">

Sur une nouvelle ligne juste au-dessous de {% endform %}, collez le code suivant :

</div>

1. Cliquez sur Save (Enregistrer).

Attribuer votre nouveau modèle à un produit

À présent que le modèle est terminé, vous pouvez l’attribuer à tous les produits dont vous souhaitez masquer le bouton d’ajout au panier.

1. Depuis votre interface administrateur Shopify, allez à Produits.

2. Cliquez sur le nom d’un produit dont vous souhaitez masquer le bouton d’ajout au panier.

3. À la page des produits de votre interface administrateur Shopify, sous Boutique en ligne, choisissez votre nouveau modèle requires-contact (contact requis) dans le menu déroulant des modèles du thème.

4. Cliquez sur Save (Enregistrer).

Répétez ces étapes pour chacun des produits auxquels vous souhaitez appliquer votre nouveau modèle.

Other

Créer un nouveau modèle de produit

Pour remplacer le bouton Ajouter au panier d’un produit, vous devez créer un modèle de produit personnalisé pour ce produit.

Étapes :

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 sur Ajouter un nouveau modèle.

4. Créez le modèle de produit :

   • Dans le menu déroulant, sélectionnez Produit.
   • Nommez votre modèle requires-contact.
   • Cliquez sur Create template (Créer le modèle).

5. Recherchez la ligne de code suivante :

{% section 'product-template' %}

Remplacez-le par :

{% section 'product-template-requires-contact' %}

Ce code relie votre nouveau modèle à une nouvelle section de produit que vous créerez lors des prochaines étapes.

1. Cliquez sur Save (Enregistrer).

Créer une nouvelle section de produit

1. Dans le répertoire Sections, cliquez sur Ajouter une nouvelle section.

2. Créez la section :

   1. Nommez votre nouvelle section product-template-requires-contact.
   2. Cliquez sur Créer la section.

3. Supprimez la totalité du code présent par défaut dans le fichier de section, afin que celui-ci soit complètement vide.

4. Dans le répertoire Sections, cliquez sur product-template.liquid. Copiez tout le contenu du fichier dans votre presse-papiers.

5. Revenez à votre nouvelle section product-template-requires-contact.liquid et collez le code dans le fichier.

6. Cliquez sur Save (Enregistrer).

Masquer le bouton d'ajout au panier

1. Dans le fichier de votre nouvelle section product-template-requires-contact.liquid, recherchez le code HTML du bouton Ajouter au panier de votre page de produit. Vous le trouverez en recherchant le mot cart dans le fichier.

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.

Pour 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.

Pour Debut, le code modifié doit ressembler à 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 Save (Enregistrer).

Ajouter un lien e-mail ou un formulaire de contact

À présent que vous avez masqué le bouton Ajouter au panier, vous pouvez ajouter le contenu que vous souhaitez afficher à la place.

Lien e-mail

Vous pouvez ajouter un lien e-mail activant l'ouverture du programme de messagerie électronique par défaut du client et la saisie de l’adresse e-mail visible par les clients propre à votre boutique dans le champ du destinataire. Pour ajouter un lien e-mail :

1. Sur une nouvelle ligne sous la balise Liquid {% endcomment %} que vous avez ajoutée à la dernière étape, ajoutez le code HTML pour un lien e-mail :

<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

1. Cliquez sur Save (Enregistrer).

Formulaire de contact

Vous pouvez ajouter un formulaire de contact à votre nouveau modèle de produit en copiant le code à partir du modèle de la page de contact de votre thème. Pour ajouter un formulaire de contact :

1. Dans le répertoire Templates (Modèles), cliquez sur page.contact.liquid.
2. Recherchez la balise Liquid {% form 'contact' %} dans le fichier.
3. Copiez la totalité du code, de la balise Liquid {% form 'contact' %} jusqu’à la balise Liquid {% endform %}. Incluez les balises de formulaire Liquid dans le code que vous copiez.
4. Revenez à votre nouveau fichier product-template-requires-contact.liquid dans le répertoire Sections.
5. Recherchez la balise de fermeture </form> dans le fichier. Sur une nouvelle ligne, sous la balise de fermeture </form>, collez le code du formulaire de contact.
6. L’étape suivante consiste à envelopper le code que vous venez de coller dans des balises HTML div. L’attribut de classe inclus dans le code des balises div permet de garantir une restitution correcte de votre formulaire de contact sur la page.

Sur une nouvelle ligne, au-dessus de {% form 'contact' %}, collez le code suivant :

<div class="form-vertical"></div>

Sur une nouvelle ligne juste au-dessous de {% endform %}, collez le code suivant :

</div>

1. Cliquez sur Save (Enregistrer).

Attribuer votre nouveau modèle à un produit

À présent que le modèle est terminé, vous pouvez l’attribuer à tous les produits dont vous souhaitez masquer le bouton d’ajout au panier.

1. Depuis votre interface administrateur Shopify, allez à Produits.

2. Cliquez sur le nom d’un produit dont vous souhaitez masquer le bouton d’ajout au panier.

3. À la page des produits de votre interface administrateur Shopify, sous Boutique en ligne, choisissez votre nouveau modèle requires-contact (contact requis) dans le menu déroulant des modèles du thème.

4. Cliquez sur Save (Enregistrer).

Répétez ces étapes pour chacun des produits auxquels vous souhaitez appliquer votre nouveau modèle.

Étapes à suivre pour les thèmes sans sections

Créer un nouveau modèle de produit

Pour remplacer le bouton Ajouter au panier d’un produit, vous devez créer un modèle de produit personnalisé pour ce produit.

Étapes :

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 sur Ajouter un nouveau modèle.
4. Créez le modèle de produit :
   • Dans le menu déroulant, sélectionnez Produit.
   • Nommez votre modèle requires-contact.
   • Cliquez sur Create template (Créer le modèle).

Masquer le bouton d'ajout au panier

1. Dans votre nouveau fichier product.requires-contact.liquid, recherchez le code HTML du bouton Ajouter au panier. Vous pouvez rechercher le mot « cart ».

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.

Pour 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.

Pour Debut, le code modifié doit ressembler à 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 Save (Enregistrer).

Ajouter un lien e-mail ou un formulaire de contact

À présent que vous avez masqué le bouton Ajouter au panier, vous pouvez ajouter le contenu que vous souhaitez afficher à la place.

Lien e-mail

1. Sur une nouvelle ligne sous la balise Liquid {% endcomment %} que vous avez ajoutée à la dernière étape, ajoutez le code HTML pour un lien e-mail :

Please <a href="mailto:{{ shop.email }}">contact us</a> if you are
interested in this product.

1. Cliquez sur Save (Enregistrer).

Formulaire de contact

Vous pouvez ajouter un formulaire de contact à votre nouveau modèle de produit en copiant le code à partir du modèle de la page de contact de votre thème. Pour ajouter un formulaire de contact :

1. Dans le répertoire Templates (Modèles), cliquez sur page.contact.liquid.
2. Recherchez la balise Liquid {% form 'contact' %} dans le fichier.
3. Copiez la totalité du code, de la balise Liquid {% form 'contact' %} jusqu’à la balise Liquid {% endform %}. Incluez les balises de formulaire Liquid dans le code que vous copiez.
4. Retournez à votre nouveau fichier product.requires-contact.liquid dans le répertoire Modèles.
5. Recherchez la balise de fermeture </form> dans le fichier. Sur une nouvelle ligne, sous la balise de fermeture </form>, collez le code du formulaire de contact.
6. L’étape suivante consiste à envelopper le code que vous venez de coller dans des balises HTML div. L’attribut de classe inclus dans le code des balises div permet de garantir une restitution correcte de votre formulaire de contact sur la page.

Sur une nouvelle ligne, au-dessus de {% form 'contact' %}, collez le code suivant :

<div class="form-vertical"></div>

Sur une nouvelle ligne juste au-dessous de {% endform %}, collez le code suivant :

</div>

1. Cliquez sur Save (Enregistrer).

Attribuer votre nouveau modèle à un produit

À présent que le modèle est terminé, vous pouvez l’attribuer à tous les produits dont vous souhaitez masquer le bouton d’ajout au panier.

1. Depuis votre interface administrateur Shopify, cliquez sur Produits.
2. Cliquez sur le nom d’un produit dont vous souhaitez masquer le bouton d’ajout au panier.
3. À la page des produits de votre interface administrateur Shopify, sous Boutique en ligne, choisissez votre nouveau modèle requires-contact (contact requis) dans le menu déroulant des modèles du thème.
4. Cliquez sur Save (Enregistrer).

Répétez ces étapes pour chacun des produits auxquels vous souhaitez appliquer votre nouveau modèle.