Objective
To create a free shipping bar app that works as a reminder of the extra benefits that buyers can get when they spend more on Shopify store with a motivating message according to customer’s total cart value. This reminder is displayed to customers to motivate them to add more items to the cart.
- Show progressive messages when customers put more items in their shopping carts
- Congratulate customers when they get free shipping offers
- Set different bars to display to visitors from different countries
- Configure bars to / not to only display on certain pages, such as all pages, home page only, collection or product pages.
- Responsive, and optimized for all screen sizes including desktop, tablet, and mobile
- Curated bar background images upload option that express the holiday mood, increase conversions, and generate more sales
- Display free shipping offer in a customizable bar
Store-side specifications
A bar have to appear at the specified position in all specified pages with three types of messages to the customers based on the following 3 stage
- Goal Initial state (E.g. Free shipping for orders above $100)
- Goal In progress (E.g. Only $25 away from free shipping)
- Goal achieved (E.g. Congratulations you got free shipping)
Admin-side specifications
a) Have a ‘content configuration’ block that takes the following inputs
- Name of the bar – To identify the bar
- Free shipping goal – minimum order value to be reached to provide free shipping (e.g., $100) – If no minimum order value is required, by default it is set to zero.
- Secondary Goal – The secondary goal option in the Free Shipping Bar app is used for scenarios where you want to offer your customer two different shipping bonuses.
(e.g.:
- If your customers buy $50 worth of products, they get “free 2-day shipping”.
- If your customers buy $150 worth of products, they get “free overnight shipping”.)
- Goal Initial state message – Display when cart is empty (e.g.: Free shipping for orders above $100)
- Goal In progress (Only $25 away from free shipping) – Displays when cart value is less than the The reflected amount is based on subtraction of total order’s amount from free shipping goal amount.
- Goal achieved (Congratulations you got free shipping) – When total order’s amount reaches the free shipping goal amount.
- Link to the bar – The bar will be clickable after adding a link.
- Display position – Position of the bar either Top bar or Bottom bar or Manual placement (insertion of the bar’s code into your theme).
b) ‘Currency Configuration’ block that takes the following inputs
- Currency – Changeable based on country with currency name & code. (e.g.: India Rupees – INR).
- Currency Symbol – Either currency code or symbol can be used.
- Currency symbol position – Either before or after the amount. (Rs.100 or 100 INR)
c) ‘Style configuration’ block that takes the following inputs
- Background colour – Either Colour picker or Hex code used for choosing the colour.
- Text colour – Either Colour picker or Hex code used for choosing the colour.
- Background images – Either can use pre-defined background images or choose/upload image from our local.
- Fonts – Can use only pre-defined fonts.
- Font size
d) Targeting Configuration’ that takes the following inputs
- Display on page (page targeting) – The bar can be display on either one of the following choices.
- All Pages – The bar displays all the pages.
- Only Home page – The bar displays only on home page.
- Exclude page – The bar can be excluding the display in one of the following choices.
- Do NOT exclude any page
- Homepage – The bar display excludes only for home page.
- Customer Targeting – The bar can be displaying the customers based on the following
- All the customers.
- Based on customer tags (The bar should display the customers when the given customer tag is matched).
e) Preview Block
It shows the preview of the bar, which was created by Merchant, which was customised by the merchant to them in three categories of bars, to be viewed by merchant before publishing it to the Store.
