Proposer des accessoires directement sur la fiche produit d’un produit Shopify

Augmenter son panier moyen

Si vous désirez augmenter votre panier moyen, il est possible de proposer des accessoires directement sur la fiche produit. Cette méthode est très simple à mettre en place sur Shopify. Toutefois, il y a quelques étapes clés que vous devrez suivre pour y arriver.

Tout d’abord, vous devrez vous assurer que votre boutique en ligne est correctement configurée pour vendre des produits. Ensuite, vous devrez ajouter les accessoires à vos produits en utilisant les options de personnalisation de Shopify.

Il est également important de noter que la qualité des images de vos produits peut avoir une incidence sur les ventes. Assurez-vous donc que vos images sont de haute qualité et mettent en valeur les détails de vos produits.

Enfin, n’oubliez pas de promouvoir vos nouveaux accessoires auprès de vos clients en utilisant des outils marketing tels que les e-mails promotionnels ou les publicités sur les réseaux sociaux. Ces efforts supplémentaires vous permettront d’augmenter les chances de ventes croisées et de stimuler les revenus de votre boutique en ligne.

Création du métafield

Premièrement, il faut créer une métafield de type Produits complémentaires. Shopify le propose de base sur ses fiches produits. Si ce n’est pas le cas, voici les étapes pour créer cette métafield :

Paramètres > Données personnalisées > Produits > Ajouter une définition

Nom : Produits complémentaires

C’est un champ standard de Shopify.

Ajout du metafield Produits complémentaires

Développement de la feature

Il faut se rendre dans votre éditeur de code ou directement dans le code de votre thème sur l’administration de Shopify.

Bouton … > modifier le code

Il faut ouvrir sections > main product.

Ensuite, nous allons modifier le schema afin d’y ajouter “complementary_products”

{
  "type": "complementary_products",
  "name": "Produits complémentaires",
  "limit": 1
}

🚨 Attention à la virgule, les schémas sont très pointilleux. 🚨

Ensuite, nous allons rechercher dans main-product : {% render block %} afin d’y glisser le code suivant :

{% when 'complementary_products' %}

	{% assign recommended_products = product.metafields.shopify--discovery--product_recommendation.complementary_products.value %}
  {% if recommended_products %}
      <label for="accessory-select">Sélectionnez un accessoire : (design à produire)</label>
      <select id="accessory-select">
          <option value="" selected>Nos accessoires</option>
          {% for recommended_product in recommended_products %}
              {% for variant in recommended_product.variants %}
                  {% if variant.available %}
                      <option value="{{ variant.id }}">
                          {{ recommended_product.title }}
                          - {{ recommended_product.metafields.custom.couleur.value }}
                          - {{ variant.title }}
                          - {{ variant.price | money }}
                      </option>
                  {% endif %}
              {% endfor %}
          {% endfor %}
      </select>
  {% endif %}

Ce bout de code permet d’afficher un select avec les différents variants des produits listés dans le champ métafield Produits complémentaires.

Dans le but d’ajouter l’accessoire en même temps que le produit au panier, nous allons ruser et insérer dans le formulaire du produit un input avec l’ID de notre variant. Quelques lignes de JS plus tard :

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const select = document.getElementById('accessory-select');
        const form = document.querySelector('form[data-type="add-to-cart-form"]');
        const input = document.createElement('input');
        input.type = 'hidden';
        input.id = 'accessories';
        input.name = 'items[1]id';
        input.value = '';

        console.log(form);

        select.addEventListener('change', () => {
            const selectedOption = select.options[select.selectedIndex];
            if (selectedOption.value !== "") {
                input.value = selectedOption.value;
                form.appendChild(input);
            } else {
                const inputToRemove = form.querySelector('#accessories');
                if (inputToRemove) {
                    form.removeChild(inputToRemove);
                }
            }
        });
    });
</script>

🔍 TADAM : Le résultat est l’ajout d’un accessoire en même temps que le produit principal au panier.

PS: la feature est livrée brute de décoffrage, si vous souhaitez l’adapter à votre thème, vous pouvez me contacter.

30 mars 2023 5:13 pm Publié par

Comment puis-je
vous aider ?

Je suis à votre écoute.