To display any announcement regarding the Free shipping, coupon code, new product launch, or any promotional offers, you need to create & customize the Announcement bar.
There are two types for creating an Announcement Bar: Text Bar & Free Shipping Bar.
Text Bar:
You can simply add the Text message in the Announcement Bar to announce any product launch, apply a coupon code.
Click on the Text bar button. You need to insert the following details: (Screenshot-1)
– Bar Name: Insert the Name of the Announcement bar that will only be visible to you (to the Admin).
– Message: Insert the Message that you want to display to the customers on the store as an Announcement bar. You can add a maximum of 100 characters.
You will get the real-time preview at the top that will display how it will look. Click on the Save button to add the Announcement bar. You can check the added announcement bar under the List.
You can customize the style & its UI from the Style Configurations that are explained further.
Free Shipping Bar:
You can display the Announcement bar by clicking on the “Free Shipping Bar” button as per the Free Shipping rates added from the Shopify backend. Click on the Free Shipping bar button. You need to insert the following details: (Screenshot-2)
Bar Name: Insert the name of the bar that will only be visible to you (Admin side).
Initial Message: Insert the Message that you want to display to the customers on the store as an Announcement bar. You can insert the variable {% amount %} in the message description.
Progress Message: Insert the Message to display when one or more items are added to the cart and its amount is still less than the target amount as per the Shipping Rate condition. You can insert the variable {% amount %} in the message description.
Goal Achieved Message: Insert the message for free shipping. It will display when one or more items are added to the cart and its amount is as same as the target amount as per the shipping rate condition. It means free shipping is possible.
Shipping Settings: You can manage the Shipping Rate Rules individually, from here by clicking on the Hyperlink, you will navigate to the Shopify Settings.
From the Shipping and delivery settings page, click on the “Manage Rates” to manage the GeoLocation based shipping rates. The customers will get the Free Shipping message in the bar in the store as per the GeoLocation based Shipping Rates that are managed under the Shipping Rates. (Screenshot-3)
The Shopify Merchant can add the country-specific shipping rates to set the condition on the order price. (Screenshot-4)
Note: The Free Shipping bar would work correctly based on the added Shipping Rates for the country.
– Sync Shipping Rules Now: You need to sync the shipping rules that are managed from the Shopify Shipping & delivery Setting. (Screenshot-5)
By clicking on it, you will get the successful message of the synced Shipping Rules. (Screenshot-6)
If you (or Shopify Admin) have updated or added any new rule that will be synced and updated for the Free Shipping bar.
Click on the Save button to add the Announcement bar. You can check the added announcement bar under the List. (Screenshot-7)
You will get the real-time preview at the top that will display how it will look. Here you will get the preview of three different messages: Initial Message, Progress Message & Goal Achieved. (Screenshot-8)
You can customize the style & its UI from the Style Configurations that are explained further.