Fast Tags | How to install

💡 Fast Tags are a powerful feature available for Shopify and WooCommerce that enhances your online store. Fast Tags help boost your website conversion by showcasing the speed of your delivery service, instilling trust in your customers. 💨


Don’t know what Fast Tags are? Discover the feature


Learn how to unlock this valuable feature in this article!


Choose your Fast Tags display method

Bigblue provides two ways to display Fast Tags on your shop:



1/ Automatic placement

[By-default mode]

2/ Manual placement
Description

The by-default mode to start with Fast Tags.

Activate Fast Tags in 1 click and get it automatically placed in your store.

Advanced mode


Choose where you display the Fast Tag badge.

Where the Fast Tag is displayed?
  • On your product pages
  • Before the Add-to-Cart button
  • On product pages, but also Cart pages, and Product lists (Woocommerce)
  • You decide where the badge is located
Compatible with

Most standard stores


*Automatic placement does not work on some themes. If that's the case you can use a Manual placement.

All Shopify and WooCommerce stores
Setup No code required Requires to edit your store Theme
Customization Using code (CSS), you can edit the Fast Tag appearance. Using code (CSS), you can edit the Fast Tag location & appearance.


  • Automatic placement

Automatic placement requires no experience in web development — activate Fast Tags in one click directly in the Bigblue settings. The badge is automatically placed before the 'Add to cart' button on product pages.


Automatic Placement of the Fast Tags
  • Manual placement

Manual placement allows users who have experience in web development to adjust the location of the Fast Tag, positioning it anywhere on your product page as desired.

Fast Tag using a manual placement - the tag is located after the Add-to-Cart button

The manual placement allows you to display Fast Tags freely on your shop, offering additional customization:


  • Choose between 2 types of badges (Shopify only)
    • Product badge: Offering a delivery promise for a specific product.
    • Cart badge: Offering a delivery promise based on all products in the cart.

  • Customize badge display to your preferences
    • On Shopify, you can display Fast Tags badges on your pages exactly the way you want, allowing you to have a unique arrangement for each page.
    • On WooCommerce, Fast Tags can be displayed on Product pages, Product lists and in the Cart.

⚠️ To place Fast Tags manually, Bigblue recommends that merchants get assistance from a developer, or has experience in editing their shop template.



Activate Fast Tags on Bigblue


  • To activate Fast Tags, first, go to the Bigblue app and visit your Shop integration settings
  • On the Fast Tags settings, click on “Edit”

  • Following this, on the Fast Tags settings page, select your preferred display method

  • Click on “Save and activate”

Implement your Fast Tag display method in your shop


On Shopify


Automatic placement on Product pages


  • Once you have selected the “Place the badge automatically on Product pages” in the Fast Tags setting page, you're all set! Fast Tags will now display above the 'Add to cart' button on all your product pages as follow:


Manual placement using direct code edition


To add Fast Tags manually to your shop on Shopify, you need to edit your shop template, adding code blocks where you want to display Fast Tags.


To inject the Product badge, use the following code

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

To inject a Cart badge, use the following code

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

Manual placement using Theme Editor (and adding a custom liquid block)


Place a Fast Tag on your product pages

  • In Shopify, go to Online Store → Themes
  • On the right, click on “Customize”

  • Select a product page to modify

  • Click on "Add block" and select "Custom liquid"

  • Then drag and drop it to the position where you want the Fast Tag to be displayed

  • Copy and paste the following code
<bigblue data-component="fast-tag-product" data-product="{{ product.id }}" data-variant="{{ product.selected_or_first_available_variant.id }}"></bigblue>

  • Save (and publish if requested)
  • Go to one of your product page, you should see a Fast Tag!
  • Fast Tag not appearing immediately? Both Shopify and Bigblue have caching systems to ensure the fastest fast-tags injection. To achieve optimal performance, these caches may need time to expire usually after waiting for up to 10 minutes. However, in most cases, 5 minutes is sufficient. If the issue persists and you still don't see the Fast Tag after 10 minutes, follow our troubleshooting guide.
  • You should now be able to see the FT displayed as follow:

🎉 You have successfully injected the Fast Tag on your product page.

Place a Fast Tag in your cart

  • In Shopify, go to Online Store → Themes
  • On the right, click on “Customize”

  • Select the cart page

  • Click on "Add section" and select "Custom liquid"

  • Copy and paste the following code
<bigblue data-component="fast-tag-cart"></bigblue>

  • Save (and publish if requested)
  • Go to your cart page, you should see a Fast Tag!
  • Fast Tag not appearing immediately? Both Shopify and Bigblue have caching systems to ensure the fastest fast-tags injection. To achieve optimal performance, these caches may need time to expire usually after waiting for up to 10 minutes. However, in most cases, 5 minutes is sufficient. If the issue persists and you still don't see the Fast Tag after 10 minutes, follow our troubleshooting guide.
  • You should now be able to see the FT displayed as follow:

🎉 You have successfully injected the Fast Tag on your cart page.


On WooCommerce


Automatic placement on Product pages


To use this method, install or update the Bigblue WooCommerce plugin. Once the automatic placement is enabled, no additional action is required. The Fast Tags should be displayed on your site's product pages after a few seconds.

The injected tag is automatically updated when a different product variation is selected.


Manual placement on Product pages


To add Fast Tags manually to your shop, you need to edit the PHP files generating your site pages. In the most common cases, they are available on  /var/www/html/wp-content/plugins/woocommerce/templates  .


  • To display a Fast Tag on WooCommerce, add the following code snippet in the HTML code, replacing YOUR_PRODUCT_ID with a product ID, and YOUR_VARIATION_ID, if existing, with a variation ID:
<bigblue data-component="fast-tag-product" data-product="YOUR_PRODUCT_ID" data-variant="YOUR_VARIATION_ID"></bigblue>

  • Depending on how you plan to inject this snippet, you may benefit from WooCommerce globals to automatically infer the product ID and variant ID of the product page. For example when editing short-description.php to inject a badge on a product with or without 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>

  • Please get in touch with your administrator for more details.

☝ You’ve tried the set up and you don’t see a tag? See our Troubleshooting guide

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us