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 :



1/ Placement automatique

[Mode par défaut]

2/ Placement manuel
Description

Mode par défault pour commencer avec les Fast Tags.

Activez les Fast Tags en 1 clic et placez-les automatiquement dans votre boutique en ligne.

Mode avancé


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

Où s'affichent les Fast Tags ?
  • 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 majorité des boutiques standards


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

Toutes les boutiques Shopify et WooCommerce
Mise en place Aucun code n'est requis Nécessite de modifier le thème de votre boutique
Customization Avec du code (CSS), vous pouvez modifier l'apparence des Fast Tags. Avec du code (CSS), vous pouvez modifier l'emplacement et l'apparence des Fast Tags.


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 automatique de la Fast Tags

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.

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



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


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

  1. Dans la partie {% schema %} définissez le bloc Bigblue Fast Tag pour vos pages produits :
{
  "type": "bigblue_fast_tag",
  "name": "Bigblue Fast Tag",
  "settings": []
},
  1. Enregistrez vos 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.

☝ 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 le retour d'information Il y a eu un problème pour soumettre votre commentaire. Veuillez réessayer plus tard.

Besoin d'aide ? Contactez nous Nous contacter