Displaying the Free Shipping Counter on the Product, Cart, Home, and Checkout Pages
Follow these step-by-step instructions to set up and customize the Free Shipping Amount Counter on your PrestaShop store:
Step 1: Install and Activate the Module
- Install the PrestaShop Free Shipping Amount Counter module on your store.
- Navigate to Modules > Installed Modules in the backend of your PrestaShop store.
- Locate the “Free Shipping Amount Counter” module and click to begin configuration.
Step 2: Display and Customize the Counter on the Cart Page
- Enable Display on Cart Page: Go to the cart page settings and toggle the Display on Cart Page option to enable or disable the counter.
- Add Text Before the Shipping Amount: Toggle Text Before Shipping Amount to enable.
- Use the Add Before Text field to input custom text, e.g., “You’re just”.
- Customize the font size and color for better visibility.
- Add Text After the Shipping Amount: Toggle Text After Shipping Amount to enable.
- Use the Add After Text field to input custom text, e.g., “away from free shipping!”.
- Customize the font size and color for seamless alignment with your theme.
- Customize Free Shipping Amount: Adjust the font size and color of the shipping amount for emphasis.
- Add a Free Shipping Message: Enter a motivational message like, “Congratulations! You have earned free shipping.”
- Adjust the font size, text color, and message background for a professional look.
- Enable and Style the Progress Bar: Toggle Display Progress Bar to show a progress indicator.
- Select a Progress Bar Color that matches your store’s branding.
Step 3: Display and Customize the Counter on Product Pages
- Enable Display on Product Page: Toggle Display on Product Page to enable or disable the counter on product pages.
- Add Text Before and After the Shipping Amount: Use the same fields as in the cart page settings to configure pre- and post-text for the shipping amount.
- Customize Free Shipping Amount: Adjust the size and color of the amount to make it prominent.
- Add a Free Shipping Message: Enter a message like, “Congratulations! You have earned free shipping.”
- Customize the font size, text color, and background for better integration.
- Enable and Style the Progress Bar: Enable the Progress Bar and select a suitable color.
Step 4: Display and Customize the Counter on Checkout Page
Enable Display on Checkout Page: Toggle the Display on Checkout Page setting.
Add Text Before and After the Shipping Amount: Configure pre- and post-text as outlined in cart page settings.
Customize Free Shipping Amount: Set the font size and color of the shipping amount.
Add a Free Shipping Message: Provide a message like, “Congratulations! You have earned free shipping.”
Customize text size, color, and background for aesthetic appeal.
Enable and Style the Progress Bar: Enable the Progress Bar and choose a color that complements the checkout page.
Step 5: Display and Customize the Counter on the Home Page
- Enable Display on Home Page: Toggle the Display on Home Page option to show the counter.
- Add Text Before and After the Shipping Amount: Use the provided fields to input custom pre- and post-text for the shipping amount.
- Customize Free Shipping Amount: Highlight the shipping amount with an appropriate font size and color.
- Add a Free Shipping Message: Create an engaging message like, “Congratulations! You have earned free shipping.”
- Customize the font size, color, and background for better visibility.
- Enable and Style the Progress Bar: Enable the Progress Bar and configure its color to align with your home page design.
Don’t forget to hit the “Save” button when configuring settings on each tab.