Fast Tags | Set up Fast Tags

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

1. Choose your Fast Tags display method

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

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.

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.

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.

• On Shopify
• On WooCommerce

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

• Pick you settings
• Click on “Save and activate”

3. Implement your Fast Tag display method in your shop

• Shopify
• WooCommerce

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 through code edition and theme customization

To manually add the Fast Tag on Shopify, please edit your Online Store Theme. You need to follow two steps:

• Edit your theme code to define the Bigblue Fast Tag block.
• Customize your theme to Inject this block where you want to display a Fast Tag.

Product Fast Tag - Edit your theme code

To add a Bigblue Fast Tag block to your Product Theme Templates, go to Online Store > Themes, click on the dots and on Edit code

In your product page .liquid file, - named main-product.liquid , or something else, probably similar, - add the following pieces of code:

1. In the {%- for block in section.blocks -%} part, add the following block.type case:

{%- 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. Under the {% schema %} part, define the fast tag block for your product pages:

{
  "type": "bigblue_fast_tag",
  "name": "Bigblue Fast Tag",
  "settings": []
},

3. Save your changes

Product Fast Tag - Customize your theme

To add Bigblue Fast Tag blocks, go to Online Store > Themes, click on Customize

1. Select the Product Theme Template you want to modify

   

   
   

2. On the left, in the Product (information) part, click on Add block and choose Bigblue Fast Tag

   

   
   
3. Drag and drop it where you want the Fast Tag to be displayed

4. Save your changes and go to your product page: you should see a Fast Tag!

   

   🎉 You have successfully injected the Fast Tag on Product pages.

Fast Tag not appearing immediately? Both Shopify and Bigblue have caching systems to ensure the fastest fast tag 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.

Optionally, you can also use custom CSS to edit the Fast Tags

See

Cart Fast Tag - Edit your theme code

Cart Theme are usually subject to more specific customisations, it’s frequent to have only a few sections defined in the code, that do not support custom block addition. Hence, we encourage you to approach your Theme developper team to identify the right .liquid file to update in your Theme code, something like cart_main.liquid or cart_page.liquid (not exclusive).

In that file, you can then add the following code where you want the Bigblue Fast Tag to appear:

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

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.