Fast Tags | Comment installer

💡 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 !


Choisissez votre méthode d'affichage Fast Tags

Bigblue propose deux façons d'afficher les Fast Tags sur votre boutique :



1/ Placement automatique

[Mode par défaut]

2/ Placement manuel
Description

Le mode par défaut pour commencer est Fast Tags.

Activez Fast Tags en 1 clic et placez-le automatiquement dans votre magasin.

Mode avancé


Choisissez l'endroit où vous affichez le badge Fast Tag .

Où le site Fast Tag est-il affiché ?
  • Sur vos pages produits
  • Avant le bouton Ajouter au panier
  • Sur les pages de produits, mais aussi sur les pages de panier et les listes de produits (Woocommerce)
  • Vous décidez de l'emplacement du badge
Compatible avec

La plupart des magasins standard


*Le placement automatique ne fonctionne pas sur certains thèmes. Si c'est le cas, vous pouvez utiliser un placement manuel.

Toutes les boutiques Shopify et WooCommerce
Mise en place Aucun code n'est requis Nécessaire pour modifier le thème de votre boutique
Personnalisation En utilisant le code (CSS), vous pouvez modifier l'apparence de Fast Tag . En utilisant le code (CSS), vous pouvez modifier l'emplacement et l'apparence de Fast Tag .


  • Placement automatique

Le placement automatique ne nécessite aucune expérience en matière de développement web - activez Fast Tags 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 automatique de la Fast Tags
  • Placement manuel

Le placement manuel permet aux utilisateurs ayant de l'expérience dans le développement de sites web d'ajuster l'emplacement du site Fast Tag, en le plaçant n'importe où sur la page de votre produit, comme vous le souhaitez.

Fast Tag en utilisant un placement manuel - la balise est située après le bouton Ajouter au panier

Le placement manuel vous permet d'afficher Fast Tags librement sur votre magasin, 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 badges Fast Tags sur vos pages exactement comme vous le souhaitez, ce qui vous permet d'avoir une disposition unique pour chaque page.
    • Sur WooCommerce, Fast Tags peut être affiché sur les pages de produits, les listes de produits et dans le panier.

⚠️ Pour placer Fast Tags manuellement, Bigblue recommande aux commerçants de se faire assister par un développeur ou d'avoir de l'expérience dans l'édition de leur modèle de boutique.



Activez Fast Tags sur Bigblue


  • Ensuite, sur la page des paramètres Fast Tags , sélectionnez votre méthode d'affichage préférée

  • Cliquez sur "Enregistrer et activer"

Mettez en œuvre votre méthode d'affichage Fast Tag dans votre magasin


Sur Shopify


Placement automatique sur les pages de produits


  • Une fois que vous avez sélectionné l'option "Placer le badge automatiquement sur les pages produit" dans la page de configuration de Fast Tags , vous êtes prêt ! Fast Tags s'affichera désormais au-dessus du bouton "Ajouter au panier" sur toutes vos pages produit comme suit :


Placement manuel à l'aide de l'édition du code direct


Pour ajouter Fast Tags manuellement à votre boutique sur Shopify, vous devez modifier le modèle de votre boutique, en ajoutant des blocs de code à l'endroit où vous souhaitez afficher Fast Tags.


Pour injecter le badge Produit, utilisez le code suivant

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

Pour injecter un badge Cart, utilisez le code suivant

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

Placement manuel à l'aide de l'éditeur de thème (et ajout d'un bloc de liquide personnalisé)


Placez une page Fast Tag sur vos pages produits

  • Dans Shopify, allez dans Boutique en ligne → Thèmes
  • À droite, cliquez sur "Personnaliser"

  • Sélectionnez une page de produit à modifier

  • Cliquez sur "Ajouter un bloc" et sélectionnez "Liquide personnalisé".

  • Ensuite, faites-le glisser et déposez-le à l'endroit où vous souhaitez que le site Fast Tag soit affiché.

  • Copiez et collez le code suivant
<bigblue data-component="fast-tag-product" data-product="{{ product.id }}" data-variant="{{ product.selected_or_first_available_variant.id }}"></bigblue>

  • Sauvegarder (et publier si demandé)
  • Allez sur la page d'un de vos produits, vous devriez voir un Fast Tag!
  • 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 possible des balises. 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 site Fast Tag après 10 minutes, suivez notre guide de dépannage.
  • Vous devriez maintenant voir le FT affiché comme suit :

🎉 Vous avez injecté avec succès le site Fast Tag sur la page de votre produit.

Placez un Fast Tag dans votre panier

  • Dans Shopify, allez dans Boutique en ligne → Thèmes
  • À droite, cliquez sur "Personnaliser"

  • Sélectionnez la page du panier

  • Cliquez sur "Ajouter une section" et sélectionnez "Liquide personnalisé".

  • Copiez et collez le code suivant
<bigblue data-component="fast-tag-cart"></bigblue>

  • Sauvegarder (et publier si demandé)
  • Allez sur la page de votre panier, vous devriez voir un Fast Tag!
  • 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 possible des balises. 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 site Fast Tag après 10 minutes, suivez notre guide de dépannage.
  • Vous devriez maintenant voir le FT affiché comme suit :

🎉 Vous avez réussi à injecter le Fast Tag sur la page de votre panier.


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.

☝ Vous avez essayé la configuration et vous ne voyez pas de balise ? Consultez notre guide de dépannage

Cela a-t-il répondu à votre question ? Merci pour votre retour Il y a eu un problème pour soumettre vos commentaires. Veuillez réessayer plus tard.

Vous avez toujours besoin d'aide ? Contactez-nousContactez-nous