Fast Tags | Configurer les Fast Tags

💡 Fast Tags est une fonctionnalité puissante disponible pour Shopify et WooCommerce qui enrichit votre boutique en ligne. Les Fast Tags contribuent à augmenter la conversion de votre site en mettant en valeur la rapidité de votre service de livraison, ce qui renforce la confiance de vos clients. 💨

Vous ne savez pas ce que sont les Fast Tags ? Découvrez la fonctionnalité

Apprenez à débloquer cette précieuse fonctionnalité dans cet article !

1. Activation des Fast Tags

1. Activez les Fast Tags dans Bigblue

   i. Sélectionnez le mode d'affichage par défaut d'Fast Tags

   ii. Choisissez votre configuration « Fast Tags » et personnalisez votre badge

2. [Shopify uniquement] Activer l'intégration de l'application dans Shopify
3. [Woocommerce uniquement] Installez le plugin

2. [Avancé] Configuration du placement manuel

1.Activation des Fast Tags

a. Activez les Fast Tags dans Bigblue

• Pour activer les Fast Tags, allez dans l'application Bigblue puis dans les paramètres d'intégration de votre boutique.
• Cliquez sur l'onglet Fast Tags

i. Choisir le mode d’affichage par défaut de l’ Fast Tags

• Ensuite, sur la page des paramètres des Fast Tags, sélectionnez la méthode d'affichage de votre choix.
  

• Recommandation Bigblue💙 : commencez par l'emplacement « Au-dessus du bouton “Ajouter au panier” », puis configurez le badge (préférences de délai de livraison et image de marque). Si l'affichage ne vous convient pas, passez à l'« Emplacement manuel », qui nécessite la modification du thème de votre boutique (Paramètres avancés).

Bigblue propose deux façons de placer les Fast Tags sur votre boutique :

Placement automatique

Le placement automatique ne nécessite aucune expérience en matière de développement web - activez le en un seul clic directement dans les paramètres de Bigblue. Le badge est automatiquement placé avant le bouton "Ajouter au panier" sur les pages produits.

Placement manuel

Le placement manuel permet aux utilisateurs expérimentés en développement web d'ajuster l'emplacement du Fast Tags et de le positionner où ils le souhaitent sur la page produit.

Le placement manuel vous permet d'afficher les Fast Tags librement sur dans votre boutique en ligne, offrant ainsi une personnalisation supplémentaire.

• Choisissez parmi 2 types de badges (Shopify uniquement)
  • Badge produit : Propose une promesse de livraison pour un produit spécifique.
  • Badge panier : Offre d'une promesse de livraison basée sur tous les produits du panier.
• Personnalisez l'affichage des badges selon vos préférences
  • Sur Shopify, vous pouvez afficher les Fast Tags sur vos pages exactement comme vous le souhaitez, ce qui vous permet d'avoir une disposition unique pour chaque page.
  • Sur WooCommerce, les Fast Tags peuvent être affichés sur les pages produits, les listes de produits et page panier.

⚠️ Pour placer les Fast Tags manuellement, il est recommandé de se faire assister par un développeur ou d'avoir de l'expérience dans l'édition des thèmes.

• Sur Shopify
• Sur WooCommerce

ii. Choisissez votre paramètre « Fast Tags » et personnalisez votre badge

Après avoir choisi l'emplacement du badge, sur la même page, vous pouvez choisir ce que vous voulez afficher ! Le badge est également personnalisable pour correspondre à l'image de marque de votre site web.

• ETA display
  • Afficher la date de livraison estimée la plus rapide : Misez sur la rapidité avec un badge condensé affichant une date promise.
  • Afficher toutes les dates de livraison estimées : Mettez en avant plusieurs méthodes et soulignez votre flexibilité en matière de livraison. Vous affichez une date estimée pour chaque type d'expédition : Standard, Pickup ou Express.
• ETA source
  • Badge condensé : vous pouvez choisir d'inclure ou d'exclure les modes Express ou Point Relais du calcul de la date la plus rapide. Utilisez cette option pour mettre en avant une livraison ultra-rapide ou pour modérer les attentes avec une date promise moins agressive.
  • Tous les ETA : vous pouvez décider des méthodes que vous affichez.
• Stock indicator
  • Si vous sélectionnez cette option, le message suivant apparaîtra sur le badge : « En stock. »
  • Remarque : le badge complet n'apparaît que pour les produits en stock. Par conséquent, cette mention, ainsi que l'ensemble du fast tags, n'est affichée que pour les produits dont l'inventaire est présent à l'entrepôt (et non pour les backorders/précommandes).
• Shipping countdown
  • L'option de compte à rebours d'expédition (« Commandez dans les 15 h 32 min… ») affichera le message toute la journée. Remarque : Une partie de la phrase est masquée au-delà de 24 h pour continuer à stimuler la conversion
• Free shipping progress
  • Mettez en avant la livraison gratuite en affichant cette information, et augmentez vos ventes !

Rendez-vous dans la section « Personnalisation » pour configurer votre badge !

• Icon : afficher ou non
• Couleur d'accentuation et d'arrière-plan
• Corners : arrondis ou non

• Sélectionnez vos paramètres
• Cliquez sur "Save" en bas de la page.

b. [Shopify uniquement] Activer l'intégration de l'application dans Shopify

Dans l'éditeur de thème en ligne de Shopify, rendez-vous dans la section « Intégrations d'applications »

Activer l'intégration de l'application « Fast Tag »

c. [Woocommerce uniquement] Installez le plugin

Sur WooCommerce

Placement automatique sur les pages produits

Pour utiliser cette méthode, installez ou mettez à jour le plugin WooCommerce de Bigblue. Une fois le placement automatique activé, aucune action supplémentaire n'est requise. Les Fast Tags devraient s'afficher sur les pages produits de votre site après quelques secondes.

La balise injectée est automatiquement mise à jour lorsqu'une variante de produit différente est sélectionnée.

2. [Avancé] Configuration manuelle du placement

Sur Shopify

Placement manuel en éditant le code et personnalisant le thème

Pour ajouter manuellement le Fast Tags sur Shopify, veuillez modifier le thème de votre boutique en ligne. Vous devez suivre deux étapes :

• Modifiez le code de votre thème pour définir le bloc Bigblue Fast Tags.
• Personnalisez votre thème pour injecter ce bloc là où vous souhaitez afficher un Fast Tags.

Fast Tags produit - Modifier le code de votre thème

Pour ajouter un bloc Bigblue Fast Tags à vos modèles de thème de produit, allez dans Boutique en ligne > Thèmes, cliquez sur les points de suspension puis sur Modifier le code

Dans le fichier principal qui code vos pages produits .liquid       , - nommé main-product.liquid       ou autre nom probablement similaire, - ajoutez le code suivant :

1. Dans la section {%- for block in section.blocks -%}       ajoutez le block.type       suivant :

{%- when 'bigblue_fast_tag' -%}
  <bigblue
    data-component="fast-tag-product"
    data-product="{{ product.id }}"
    data-variant="{{ product.selected_or_first_available_variant.id }}"
  ></bigblue>

2. Dans la partie {% schema %}       , définissez le bloc Bigblue Fast Tag pour vos pages produits :

{
  "type": "bigblue_fast_tag",
  "name": "Bigblue Fast Tag",
  "settings": []
},

3. Enregistrez vos modifications

Fast Tag pour les Produits - Personnalisez votre thème

Pour ajouter des blocs Bigblue Fast Tag, rendez-vous sur Boutique en ligne > Thèmes, puis cliquez sur Personnaliser

1. Sélectionnez le template produit que vous souhaitez modifier.

   

2. Sur la gauche, dans la partie Produit (informations), cliquez sur Ajouter un bloc et sélectionnez Bigblue Fast Tag

   

3. Faites glisser ce nouveau bloc et déposez-le à l'endroit où vous souhaitez que le Fast Tag soit affiché.

4. Enregistrez vos modifications et rendez-vous sur votre page produit : vous devriez voir un Fast Tag !

   

   🎉 Vous avez réussi à injecter le Fast Tag sur les pages produits.

Fast Tag n'apparaît pas immédiatement ? Shopify et Bigblue disposent tous deux de systèmes de mise en cache qui permettent d'afficher soit l'adresse fast tag la plus rapide, soit l'injection de tous les ETA. Pour obtenir des performances optimales, ces caches peuvent avoir besoin d'un certain temps pour expirer, généralement après une attente pouvant aller jusqu'à 10 minutes. Toutefois, dans la plupart des cas, 5 minutes suffisent. Si le problème persiste et que vous ne voyez toujours pas le Fast Tag après 10 minutes, suivez notre guide de dépannage.

Vous pouvez également utiliser du CSS personnalisé pour modifier les Fast Tags.

Fast Tag pour votre Panier - Modifiez le code de votre thème

Les thèmes de panier font généralement l'objet de personnalisations plus spécifiques, il est fréquent de n'avoir que quelques sections définies dans le code qui ne prennent pas en charge l'ajout de blocs personnalisés. Par conséquent, nous vous encourageons à contacter l'équipe de développement de votre thème pour identifier le bon .liquid fichier à mettre à jour dans le code de votre thème, tel que cart_main.liquid ou cart_page.liquid (sans exclusivité).

Dans ce fichier, vous pouvez ensuite ajouter le code suivant là où vous souhaitez que le Bigblue Fast Tag apparaisse :

<bigblue data-component="fast-tag-cart"> </bigblue>

Sur WooCommerce

Placement manuel sur les pages produits

Pour ajouter des Fast Tags manuellement à votre boutique, vous devez modifier les fichiers PHP qui génèrent les pages de votre site. Dans la plupart des cas, ils sont disponibles sur  /var/www/html/wp-content/plugins/woocommerce/templates      .

• Pour afficher un Fast Tag sur WooCommerce, ajoutez l'extrait de code suivant dans le code HTML, en remplaçant YOUR_PRODUCT_ID par un identifiant de produit, et YOUR_VARIATION_ID par un identifiant de variation le cas échéant :

<bigblue data-component="fast-tag-product" data-product="YOUR_PRODUCT_ID" data-variant="YOUR_VARIATION_ID"></bigblue>

• Selon la méthode choisie pour intégrer cet extrait de code, vous pouvez utiliser les variables globales de WooCommerce pour récupérer automatiquement l'ID du produit et l'ID de la variante sur la page produit. Par exemple, lors de la modification de short-description.php pour insérer un badge sur un produit avec ou sans variations :

<div class="woocommerce-product-details__short-description">
    <?php echo $short_description; ?>
    <?php
    $product = wc_get_product();
    if ($product) {
        if ( $product->is_type( 'variable' ) ) {
            $childrens = $product->get_children();
            if ($childrens) {
                $defaultvariation = "";
                foreach ($childrens as $productChild) {
                    $defaultvariation = wc_get_product($productChild)->get_variation_id();
                }
                echo "<bigblue data-component=\\"fast-tag-product\\" data-product=\\"".$product->get_id()."\\" data-variant=\\"".$defaultvariation."\\"></bigblue>";
            }
            wc_enqueue_js("
                $( 'form.variations_form' ).on('show_variation', function(_, data){
                    var updatedVariation = data.variation_id.toString()
                    if( updatedVariation != \\"\\" ) {
                        var tags = document.body.querySelectorAll('bigblue[data-component=\\"fast-tag-product\\"]')
                        if (tags !== undefined){
                            for (var i=0; i < tags.length; i++) {
                                if (tags[i].getAttribute(\\"data-product\\") === \\"".$product->get_id()."\\") {
                                    tags[i].setAttribute(\\"data-variant\\", updatedVariation);
                                }
                            }
                        }
                    }
                });
            ");
         } else {
            echo "<bigblue data-component=\\"fast-tag-product\\" data-product=\\"".$product->get_id()."\\"></bigblue>";
         }
    }
    ?>
</div>

• Veuillez contacter votre administrateur pour plus de détails.