Fast Tags | Configurer les Fast Tags

💡 Fast Tags est une fonctionnalité puissante disponible pour Shopify et WooCommerce qui améliore votre boutique en ligne. Fast Tags aide à stimuler la conversion de votre site Web en montrant la rapidité de votre service de livraison, en instillant la confiance dans vos clients. 💨

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

Découvrez comment débloquer cette précieuse fonctionnalité dans cet article !

1. Activation Fast Tags des Fast Tags

1. Activez les Fast Tags dans Bigblue
2. Choisissez la méthode d'affichage par défaut des Fast Tags
3. Sélectionnez vos paramètres Fast Tags et personnalisez votre badge
4. [Woocommerce uniquement] Installez le plugin

2. [Avancé] Configuration manuelle du placement

1.Activation des Fast Tags

a. Activez les Fast Tags dans Bigblue

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

b. Choisir la méthode d'affichage par défaut des Fast Tags

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

• Recommandation de Bigblue💙 : commencez par "Au-dessus du bouton "Ajouter au panier"", puis configurez le badge (préférences ETA et branding). Si vous n'aimez pas l'affichage, passez à "Placement manuel", ce qui nécessite de modifier le 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 ayant de l'expérience dans le développement web d'ajuster l'emplacement des Fast Tags, en les plaçant comme souhaité sur les pages produits.

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

• Choisissez entre 2 types de badges (Shopify uniquement)
  • Badge produit : Offre d'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.
• Personnaliser l'affichage du badge en fonction de 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

c. 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 : insistez 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 décider d'inclure ou d'exclure les méthodes Express ou Pickup du calcul de la date la plus rapide. Utilisez-le pour mettre en avant une livraison ultra-rapide ou pour gérer les attentes avec une date de promesse 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 : l'ensemble du badge n'apparaît que pour les produits en stock. Cette mention, ainsi que les fast tag, ne s'affiche donc que pour les produits en stock dans l'entrepôt (et non pour les commandes en backorders ou les précommandes).
• Shipping countdown
  • L'option de compte à rebours d'expédition ("Commandez dans les 15 h 32 min...") affichera le message tout au long de la journée. Remarque : la partie de la phrase est masquée au-delà de 24 heures pour continuer à favoriser la conversion.
• Free shipping progress
  • Mettez en avant la livraison gratuite en affichant cette information, et augmentez vos ventes !

Allez à la section "Branding" pour personnaliser votre badge !

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

• Choisissez vos paramètres
• Cliquez sur "Save" en bas de la page.

d. [Woocommerce uniquement] Installer le plugin

Sur WooCommerce

Placement automatique sur les pages de produits

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

La balise injectée est automatiquement mise à jour lorsqu'une autre variation de produit 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 les 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 Tag.
• Personnalisez votre thème pour injecter ce bloc à l'endroit où vous souhaitez afficher un Fast Tag.

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

Pour ajouter un bloc Bigblue Fast Tag à vos modèles de thèmes de produits, allez dans Boutique en ligne > Thèmes, cliquez sur les points et 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 l'onglet {%- for block in section.blocks -%}  ajoutez le bloc.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 les blocs Bigblue Fast Tag , allez dans la boutique en ligne > Thèmes, cliquez sur Personnaliser.

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

   

2. À gauche, dans la partie Produit(informations), cliquez sur Ajouter un bloc et choisissez 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. Sauvegardez vos modifications et allez sur la page de votre 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.

En option, vous pouvez également utiliser des feuilles de style CSS personnalisées pour modifier l'attribut Fast Tags

Voir

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

Les thèmes de panier sont généralement sujets à des personnalisations plus spécifiques, il est fréquent de n'avoir que quelques sections définies dans le code, qui ne supportent pas l'ajout de blocs personnalisés. Nous vous encourageons donc à contacter l'équipe de développement de votre thème afin d'identifier les bonnes méthodes de création de blocs. .liquid  à mettre à jour dans le code de votre thème, quelque chose comme cart_main.liquid  ou cart_page.liquid  (non exclusif).

Dans ce fichier, vous pouvez alors ajouter le code suivant à l'endroit où vous voulez que le Bigblue Fast Tag apparaisse :

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

Sur WooCommerce

Placement manuel sur les pages des produits

Pour ajouter manuellement Fast Tags à votre boutique, vous devez éditer les fichiers PHP générant 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 l'ID du produit, et YOUR_VARIATION_ID, s'il existe, par l'ID de la variation :

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

• Selon la façon dont vous prévoyez d'injecter ce snippet, vous pouvez bénéficier des globaux WooCommerce pour déduire automatiquement l'ID du produit et l'ID de la variante de la page du produit. Par exemple, lorsque vous modifiez short-description.php pour injecter un badge sur un produit avec ou sans variantes :

<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 prendre contact avec votre administrateur pour plus de détails.