> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 🎨 Free Shipping Upsell Bar – Design & Styling

The Design tab gives you full control over how the Free Shipping Upsell Bar looks and feels across your store. From colors and spacing to typography, animations, buttons, and upsell cards — almost every visual aspect can be customized to match your brand.

We’ve provided a wide range of settings so you can either:

* Quickly launch using ready-made templates

* Or deeply customize every detail to perfectly match your storefront

Most color-related settings include:

* A Color Picker

* A Hex Code Input

This makes it easier whether you prefer visual selection or exact brand colors.

# **⚠️ Before You Begin**

To configure Design settings:

→ Open an existing Free Shipping Upsell setup  
→ Or create a new setup first

Then:

* For the **Based on Placement** workflow  
  → Open the **Design** tab  
* For the **Based on Goals** workflow  
  → Open the placement tab you want to customize

ℹ️ Styling settings are accessed differently depending on the workflow type being used.

---

## **🎨 Template**

* **What it does:** Lets you instantly apply a pre-made visual style to your Free Shipping Upsell Bar.  
* **How to use:** Choose from available templates to quickly kickstart your design without manually customizing every setting.

---

## **👀 Visibility**

* **What it does:** Controls where the Free Shipping Upsell Bar appears.  
* **Options:**  
  * *Desktop and Mobile* – Visible on all devices.  
  * *Desktop Only*  
  * *Mobile Only*

---

## **📏 Bar Width**

* **What it does:** Controls how much horizontal width the Free Shipping Bar should occupy.  
* **How to use:** Increase or decrease the width percentage depending on how compact or wide you want the section to appear.

---

## **🖼️ Background Style**

* **What it does:** Changes the background appearance of the Free Shipping Upsell Bar.  
* **Options Available:**  
  * **Single Color** – Apply one solid background color.  
  * **Gradient** – Blend two colors together smoothly.  
  * **Patterns** – Apply decorative background patterns.

### **🎨 Single Color**

* Choose a color using the **Color Picker** or manually enter a **Hex Code**.

### **🌈 Gradient**

* **Gradient Angle Degree:** Controls the direction of the gradient effect.  
* **Color Picker 1 & 2:** Select the two colors used in the gradient.

### **✨ Patterns**

* Enables the **Select Pattern** option where you can choose from a variety of built-in background patterns.

---

## **📐 Borders & Corners**

* **Border Radius (px):** Controls how rounded the corners of the section appear.  
* **Border Size (px):** Adjusts the thickness of the border.  
* **Border Color:** Changes the border color using the color picker or hex input.

---

## **📏 Spacing**

This section helps you control the spacing both inside and outside the Free Shipping Upsell Bar.

* **Outside Top / Bottom:** Adds spacing outside the section to separate it from surrounding elements.  
* **Inside Top / Bottom:** Adds internal spacing between the content and the edges of the section.

Here is what Outside/Inside spacing mean:

---

## **🎆 Add Fireworks Animation**

* **What it does:** Adds a subtle fireworks animation effect when goals are achieved.  
* **Options:**  
  * Show fireworks on **every goal achievement**.  
  * Show fireworks **only on the final goal**.

---

## **🔤 Typography**

This section controls how all the text elements appear throughout the Free Shipping Upsell Bar.

### **📝 Message Styling**

* **Message Size:** Adjusts the size of the main message text.  
* **Message Color:** Changes the color of the message shown above the progress bar.

### **🎉 Goal Message Color**

* Changes the color of the success message displayed after a goal is achieved.

### **🔠 Font**

* Choose from available fonts or select **Use your theme font** to match your store theme automatically.

### **💪 Font Weight**

* Controls how bold or light the text appears.  
* You can also select **Inherit** to follow your theme’s existing font weight.

### **💰 Price Text Styling**

Customize how the price amount appears within the message.

* **Size:** Controls the font size of the highlighted price.  
* **Color:** Changes the price text color.

### **✨ Price Text Animation**

* Adds animation effects to the price text to help it stand out more.

---

## **📊 Progress Bar**

This section allows you to customize the appearance and behavior of the progress bar.

### **👁️ Show Progress Bar**

* Toggle the progress bar visibility on or off.

### **🎨 Background Color**

* Changes the background color of the unfilled progress bar.

### **🟩 Fill Color**

* Controls the color of the filled progress section.

### **🎯 Multiple Goals Marker**

Choose how multiple goals are displayed inside the progress bar.

* **Show only one goal at a time** – Resets the bar after reaching a goal to focus on the next one.  
* **Show all goals at once** – Displays all goal milestones together within the same bar.  
  Example:

  

### **📦 Bar Style**

* Select from available visual styles for the progress bar.

### **📐 Width**

* Controls the width of the progress bar itself.

### **⭕ Corner Radius**

* Adjusts how rounded the progress bar corners appear.

### **📏 Height**

* Controls the thickness/height of the progress bar.

### **↕️ Space Above / Below**

* Adjusts spacing above and below the progress bar.

---

## **🔘 Button Design**

This section customizes the CTA button shown beside the Free Shipping message.

**Note:** This section only applies when **Button** is selected as the **Call to Action Type** in the Goal tab.

### **🎨 Button Color**

* Changes the background color of the CTA button.

### **🔤 Button Text Size & Color**

* Controls the text size and color inside the button.

### **⭕ Corner Radius**

* Adjusts how rounded the button corners appear.

### **📦 Button Style**

* Quickly switch between styles like:  
  * *Square*  
  * *Rounded*  
  * *Fully Rounded*

### **💪 Font Weight**

* Controls the thickness of the button text.

### **✍️ Font Style**

* Toggle between:  
  * *Normal*  
  * *Italic*  
  * *Underline*

### **✨ Button Animation Style**

* Adds continuous animation effects to the button.

### **🖱️ Button Hover Effects**

* Adds interactive effects when users hover over the button.

---

## **🛍️ Upsell Design**

This section customizes the appearance of the Upsell section.

**Note:** This section only applies when an Upsell option other than **No Upsell** is selected in the Upsell/Placement tab.

### **🔤 Typography**

#### **🏷️ Upsell Title**

* **Title Size:** Controls the size of the Upsell heading.  
* **Title Color:** Changes the color of the Upsell heading.

#### **📦 Product Title**

* **Product Title Size:** Controls the product name size.  
* **Product Title Color:** Changes the product title color.

#### **💰 Price Styling**

* **Price Size:** Controls the product price text size.  
* **Price Color:** Changes the product price color.

#### **➡️ Arrow Styling**

* **Arrow Size:** Controls the size of navigation arrows.  
* **Arrow Color:** Changes the arrow color.

### **🔘 Add to Cart Button Styling**

* **Button Color:** Changes the button background color.  
* **Button Text Size & Color:** Controls the text appearance.  
* **Corner Radius:** Adjusts button roundness.  
* **Button Style:** Select from available button styles.  
* **Font Weight:** Controls text thickness.  
* **Font Style:** Toggle between different text styles.

---

## **💻 Custom CSS (For Developers)**

💡**Advanced Feature**: If you want to add completely unique styling that isn't available in the standard settings, you can paste your custom CSS directly into the editor box.

* **Target Classes provided:**  
  * Entire Badge Container: **`.futureblink-free-shipping`**  
  * Progress Message: **`.futureblink-free-shipping .futureblink-message`**  
  * Icon above Progress bar: **`.futureblink-free-shipping .futureblink-icon`**  
  * Call-to-Action Button: **`.futureblink-free-shipping .futureblink-cta-button`**  
* Click **Apply** to test your styles immediately.

‘⚠️ Please note: If the styles are not applied after clicking Apply, kindly try again by adding **`!important`** to each declaration.

---

## **🎯 Icon Settings**

Add and customize an icon displayed above the progress bar.

### **🖼️ Select / Remove Icon**

* Open the built-in Icon Library to choose an icon.  
* Remove the currently selected icon anytime.  
  

### **📤 Upload Icon**

* Upload your own custom icon for complete flexibility.

### **📏 Icon Size & Color**

* Adjust the icon size and change its color.

---

## **🚀 Final Result**

Once configured successfully, the **Design & Styling** settings help merchants create a more visually engaging, professional, and conversion-focused shopping experience.

With proper styling customization in place:

✅ The Free Shipping Bar feels more aligned with your store branding  
✅ Important messages become more noticeable and engaging  
✅ Progress tracking feels cleaner and easier to understand  
✅ CTA buttons become more visually attractive  
✅ Upsell sections blend more naturally into the storefront  
✅ Customers experience a more polished and interactive interface  
✅ Merchants gain better control over the overall appearance and user experience

Using these design and styling options effectively can greatly improve customer engagement, storefront presentation, and overall conversion potential ✨