Fast Tags | How to install
đź’ˇ Fast tags are available on Shopify and WooCommerce. Learn how to install it on your shop.
Activate Fast Tags on your shop
- To activate Fast Tags on your shop, go to your Shop integration settings
- Click on “Edit” next to Fast Tags
- On the Fast Tags settings page, select your display method
- Click on “Save and activate”
How to choose your Fast Tags display method
Bigblue provides two ways to display Fast Tags on your shop:
Automatic placement on Product pages
When using this method, a Fast Tag will be displayed in your Product pages, above the first “Add to cart” button.
On Shopify
This solution works on standard, non-customized Shopify themes and templates. 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 variant is selected.
⚠️ In some cases, automatic placement won’t work, and the Fast Tag will not be displayed (or displayed at the wrong location). In that case, it’s best for you to use manual placement.
On WooCommerce
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
The manual placement allows you to display Fast Tags freely on your shop, offering additional customization:
- Choose between 2 types of badges
- Product badge: Offering a delivery promise for a specific product.
- Cart badge: Offering a delivery promise based on all the products in the cart.
- Display multiple badges
- On Shopify, Fast Tags can be displayed on every page.
- On WooCommerce, Fast Tags can be displayed on Product pages, Product lists and in the Cart.
How to manually place Fast Tags
⚠️ To place Fast Tags manually, Bigblue recommends that merchants get assistance from a developer, or has experience in editing their shop template.
On Shopify
Code snippets
To add Fast Tags manually to your shop, you need to edit your shop template, to put <bigblue></bigblue> code 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>
Place a Fast Tag in 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)
- 🎉 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)
- 🎉 You have successfully injected the Fast Tag in your cart
On WooCommerce
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.
Troubleshooting the custom injection
You installed Fast tags, but the badge is not displayed?
Verify that the product(s) are in stock
The badge is not injected if one or more products are not in stock.
- In Bigblue, go to the Inventory
- The product(s) quantity should be positive
ℹ️ In the case of the Cart badge, the badge is hidden if at least one product is not available.
Use the manual placement method
In some cases the automatic placement doesn’t work. The badge is displayed in a wrong place, or it is not displayed at all. In that case, you need to use the manual placement method.
- In Bigblue, go to Shop integrations → Your shop → Fast tags
- Select the "Place the badge manually" option and save
- Follow the guide to place Fast Tags manually
Shopify only - Remove additional custom rates
Custom shipping rates, known as shipping profiles, prevent Bigblue from computing a delivery method. In this case, Fast Tags are not displayed.
If your custom shipping rates are not used, you can remove them:
- In Shopify, go Settings → Shipping & Delivery
- On the right of the custom shipping rate, click “Manage”
- At the bottom, click “Delete profile”
WooCommerce only - Make sure the last version of the Bigblue plugin is installed
Fast Tags require installing or updating the Bigblue WooCommerce Plugin.
Verify that you auto-fulfill orders
In order to display Fast Tags, your shop’s auto-fulfillment setting needs to be enabled.
- In Bigblue, go to the Shop integrations → Your shop.
- Enable "Auto-fulfill orders"
If this option is disabled on purpose and/or can't be enabled, please contact our support team.
Clear your cookies and retry
Bigblue uses A/B tests to measure and improve Fast Tags performance. These A/B tests can temporarily hide the Fast Tags for a small percentage of users.
To verify this, clear your browser cookies and reload the page.
Why should I wait a few seconds on the first activation before seeing Fast Tags?
Bigblue uses cache to display Fast Tags quickly on your shop. For this reason, you may have to wait up to 1 minute before seeing Fast tags on your site.