How to install and customize the progress bar widget in Dr Free Gift, BOGO Buy X Get Y Shopify App?
APP SETUP
CREATE FREE GIFTS
HOW TO'S
PROMOTE YOUR FREE GIFT
GIFT INVENTORY
GIFT FRAUD
FAQS
TROUBLESHOOTING
In this article, we’ll cover the following topics:
- What is a progress bar?
- Installing the progress bar in your store using our installer
- Installing the progress bar in your store using the template editor (Shopify)
- Manual installation (adding a code snippet directly to your store’s source code)
- Configuration options for the progress bar
What Is a Progress Bar?
The progress bar is a widget you can place on your store’s pages to inform users how close they are to achieving specific goals, such as free gifts, discounts, or free shipping.
You can have multiple progress bars on your site, each configured differently (e.g., based on cart item quantity or cart value). This is a great way to encourage users to make larger purchases in your store.
You can have multiple progress bars on your site, each configured differently (e.g., based on cart item quantity or cart value). This is a great way to encourage users to make larger purchases in your store.
The progress bar can display:
- The sequence of goals (from least to most challenging)
- Goal descriptions (what users achieve upon meeting specific criteria)
Goals can include:
- A free item in the cart
- Free shipping
- A discount code
In this article, we’ll demonstrate how to configure the progress bar for your homepage and cart page.
Note: Only one progress bar configuration can be active at a time. You can display the same bar in multiple locations, but it will share the same settings.
Installing the Progress Bar in Your Store Using Our Installer
To use the installer, go to the Progress Bar Widgets section and open the Install Progress Bar Widget tab. Click the Configure button.
Under “Option A,” you’ll find a table listing all installed progress bar widgets. From here, you can preview, edit, delete, or temporarily disable them. To install a new widget, click the New Widget button.
This will redirect you to your store. As you hover over elements on the page, a highlighted box will indicate where you can place the widget. All store functionalities remain accessible, allowing you to navigate between pages as needed.
Once you’ve selected a location, click one of the following buttons:
- Replace: Replaces the selected element with the progress bar widget.
- Above: Places the progress bar widget above the selected element.
- Below: Places the progress bar widget below the selected element.
You can also use the Expand option to adjust the widget’s placement area. This can help you achieve a more precise placement.
After selecting a location, you can either Accept or Reset your choice.
If you proceed with accepting, you’ll be prompted to name the widget placement. Choose a specific name to make it easier to identify the widget later in the list.
Click Save to finalize the installation.
Important: The widget will only display if there is relevant data to show (e.g., active goals). If no goals are available, the widget will not appear.
Installing the Progress Bar Using the Template Editor (Shopify)
To install the widget using Shopify’s template editor, navigate to the Progress Bar Widgets section and open the Install Widgets tab. Under “Option B,” expand the section and click the Customize Theme button.
To install the widget using Shopify’s template editor, navigate to the Progress Bar Widgets section and open the Install Widgets tab. Under “Option B,” expand the section and click the Customize Theme button.
Follow these steps to complete the installation:
- Click Customize Theme.
- Add an item to your cart.
- Go to the cart page.
- Click the area where you’d like to add a widget to Add a Section.
- Scroll down and select the Gift Progress Bar.
- Configure the App Block settings as needed.
Tip: Enable faster widget loading for improved performance and user experience. To do this, go to the App Embeds section, find the app name, and toggle it on.
This will ensure faster widget rendering, reducing potential errors and improving the shopping experience.
Configuration Options for the Progress Bar
Our app offers a variety of configuration options. You can choose between Minimal Options and All Available Options when setting up the widget. Note that advanced options include all minimal settings.
Here’s the current list of configurable features:
- Alignment of the progress bar (Left / Right / Center)
- Primary color
- Secondary color
- Goal achieved color
- Progress bar height
- Progress bar corner rounding
- Widget background
- Margin between the progress bar and surrounding elements
- Hide product-dependent goals
- Link the free gift to the product page (Note: This may allow customers to purchase the free gift without meeting the requirements, depending on your theme).
- Metric to display (Quantity / Value)
- Edit progress bar description (color / size / style / alignment)
- Display an image for each goal (Yes / No)
- Show goal descriptions (Yes / No)
- Display goal target values (Yes / No)
- Show goal descriptions on hover (Yes / No)
- Display progress details on hover (Yes / No)
- Title configuration (color / background / size / style)
- Value/Counter configuration (color / size / style)
- Configure the free gift choice button for each goal (variant/product) on hover
- Add custom text under the progress bar
Note: This list may change with future updates.
Make sure to save all changes by clicking the Save button.
By following this guide, you’ll be able to install and fully customize the progress bar widget for your store.
Manual Installation (Adding a Code Snippet)
We recommend this method only for developers. Using this option without technical expertise may result in layout issues.
To manually install the widget:
- Open the code editor for your store. Go to Online Store > Themes. Under your active theme, click the three-dot icon and select Edit Code.
- In the code editor, locate the file you want to edit. Add the code snippet found in the app under Progress Bar Widgets > Install Widgets in the “Widget Code for Custom Installations” section.
- Save the changes and test to ensure the widget displays correctly on your site.