Fast Tags | Mise en place 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 qu'est Fast Tags ? Découvrez la fonctionnalité

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

1. Choisissez votre méthode de placement des Fast Tags

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 de 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 de 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 sur le 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

2. Activez les Fast Tags dans Bigblue

• Pour activer les Fast Tags, allez sur l'application Bigblue, dans Shop integrations.
• Dans la ligne Fast Tags , cliquez sur "Edit".

• Ensuite, sur la page de configuration des Fast Tags, sélectionnez votre méthode de placement préférée

• Cliquez sur "Save and activate"

3. Mettez en place les Fast Tags dans votre boutique en ligne

• Shopify
• WooCommerce

Sur Shopify

Placement automatique sur les pages de produits

Un fois l'option "Place the badge automatically on Product pages" dans la page de configuration des Fast Tags , vous êtes prêt ! Le Fast Tag s'affichera désormais au-dessus du bouton "Ajouter au panier" sur toutes vos pages produits comme suit :

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 dans votre thème, sur vos templates produits, allez dans Boutique en ligne > Thèmes, cliquez sur les trois 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 la partie {%- 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 les modifications

Fast Tag pour les Produits - Personnalisez votre thème

Pour ajouter les Fast Tags, allez dans Boutique en ligne > Thèmes, cliquez sur Personnaliser.

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

   

   
   

2. À gauche, dans la partie Produit ou Informations Produits,  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.

Le Fast Tag n'apparaît pas immédiatement ? Shopify et Bigblue disposent tous deux de systèmes de mise en cache afin de garantir l'injection la plus rapide du Fast Tag. Pour des performances optimales, ces caches peuvent avoir besoin d'un certain temps pour expirer, jusqu'à 10 minutes. 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.

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

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.