> ## 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).

# 📍 How to Place Free Shipping Bar in a Custom Position

Hoppy Free Shipping offers two primary placement types for the Free Shipping Bar:

* 📌 Default Placements  
* 🧩 Custom Placements

In most cases, the default placement areas work perfectly fine.

However, sometimes merchants may want more flexibility and prefer placing the Free Shipping Bar in a completely custom location depending on their storefront layout.

That’s exactly where the **Custom Position** feature becomes useful ✨

Using Custom Position, the Free Shipping Bar can be placed:

* Inside Shopify App Blocks  
* Inside Custom Liquid sections  
* Inside Theme Files  
* Inside manually controlled storefront locations

This documentation explains how to properly enable Custom Position and how to place the Free Shipping Bar using both available methods.

---

# **⚠️ Understanding Workflow Differences**

The Custom Position behavior depends on the workflow type selected while creating the Free Shipping Upsell setup.

---

# **🎯 Based on Goals (Multiple Placement)**

The **Based on Goals** workflow includes multiple placement areas:

* Product Page  
* Cart Drawer  
* Cart Page  
* Banner

For this workflow:

→ Open the placement tab you want to customize  
→ Change its placement to **Custom Position**

Once enabled:

→ A **Shipping Bar Code Snippet** becomes available

⚠️ Important:

The placement tab must actually be changed to **Custom Position**.

Otherwise, the Free Shipping Bar will continue using the default placement behavior.

---

# **📍 Based on Placement (Single Placement)**

The **Based on Placement** workflow controls only one placement area.

For this workflow, two Custom Position methods become available:

1. 🆔 Shipping Bar ID  
2. 🧩 Shipping Bar Code Snippet

---

## **🆔 Shipping Bar ID**

This method is mainly used with Shopify App Blocks.

The Shipping Bar ID connects the storefront App Block with the selected Free Shipping setup.

---

## **🧩 Shipping Bar Code Snippet**

This method provides more advanced placement flexibility.

The code snippet can be:

* Added inside a Custom Liquid block  
* Added directly into Shopify Theme files

---

# **🛠️ Step 1 — Open Hoppy Free Shipping**

Open the **Hoppy Free Shipping** app from your Shopify Admin.

---

# **📂 Step 2 — Open or Create a Free Shipping Upsell**

You can either:

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

---

# **⚙️ Step 3 — Navigate to the Placement Settings**

The next step depends on the workflow type currently being used.

---

## **🎯 Based on Goals Workflow**

If you are using the **Based on Goals** workflow:

→ Open the placement tab where you want to manually place the Free Shipping Bar

Examples:

* Product Page  
* Cart Drawer  
* Cart Page  
* Banner

---

## **📍 Based on Placement Workflow**

If you are using the **Based on Placement** workflow:

→ Navigate directly to the **Placement** tab

Since this workflow controls only one placement, all placement-related settings will appear there.

---

# **🎯 Step 4 — Change Placement to Custom Position**

Inside the Placement settings:

→ Change the **Display On (Include)** or **Placement** option to:

**Custom Position**

Then:

→ Click **Save**

⚠️ Important:

Enabling Custom Position removes the Free Shipping Bar from the default placement areas.

The Free Shipping Bar will now appear only where you manually place it.

ℹ️ If using **Based on Goals** workflow, go to **Method 2**.

---

# **🆔 Method 1 — Using Shipping Bar ID**

This method is ideal when you want to place the Free Shipping Bar directly using Shopify’s Theme Editor.

ℹ️ This method is mainly available for the **Based on Placement** workflow.

---

# **🎨 Step 5 — Open Shopify Theme Editor**

From Shopify Admin:

→ Go to **Sales Channels → Online Store**  
→ Click **Edit Theme**

This opens the Shopify Theme Editor.

---

# **➕ Step 6 — Add the Free Shipping App Block**

Inside the Theme Editor:

→ Navigate to the section where you want the Free Shipping Bar to appear  
→ Hover around compatible sections until the blue-colored ➕ icon appears  
→ Click **Add Block**

Then:

→ Open the **Apps** category  
→ Select **Free Shipping Upsell**

The App Block will now be added to the selected storefront area.

---

# **🔗 Step 7 — Add the Shipping Bar ID**

Once the App Block is added:

→ Enter the Shipping Bar ID inside the App Block settings

Then:

→ Save the Shopify Theme  
→ Save the Free Shipping setup inside Hoppy Free Shipping as well

⚠️ Important:

Both saves are required.

Otherwise, the Free Shipping Bar may not appear correctly on the storefront.

---

# **🧩 Method 2 — Using Shipping Bar Code Snippet**

This method is useful when you want more advanced placement flexibility.

The Shipping Bar Code Snippet can be:

* Added using a Custom Liquid block  
* Added directly into Shopify Theme files

ℹ️ This is the only available Custom Position method for the **Based on Goals** workflow.

---

# **➕ Step 8 — Add a Custom Liquid Block**

Inside Shopify Theme Editor:

→ Navigate to the area where you want the Free Shipping Bar to appear  
→ Hover around compatible sections until the blue-colored ➕ icon appears  
→ Search for **Custom Liquid**

Then:

→ Add the Shipping Bar Code Snippet inside the Custom Liquid block

This allows the Free Shipping Bar to render in the selected storefront position.

---

# **💻 Adding the Code Snippet Directly into Theme Files**

If needed, the Shipping Bar Code Snippet can also be added directly into Shopify Theme code files.

This is useful when:

* App Blocks are unavailable  
* Custom Liquid sections are unsupported  
* Advanced storefront customization is needed

---

# **⚙️ Opening Shopify Code Editor**

To open the Shopify Code Editor:

→ Go to **Sales Channels → Online Store**  
→ Click the three-dots menu beside the **Edit Theme** button  
→ Click **Edit Code**

⚠️ Important:

We do not recommend modifying Shopify Theme files unless:

* You are comfortable working with Shopify code  
* Or you understand what changes are being made

Incorrect modifications inside Theme files may affect storefront behavior.

---

# **🧩 Identify the Correct Storefront Area**

Before inserting the Shipping Bar Code Snippet, it is important to identify the exact storefront location where the Free Shipping Bar should appear.

One simple way to do this:

→ Open your storefront in the browser  
→ Right-click near the area where you want the Free Shipping Bar  
→ Click **Inspect**

This opens the browser Developer Tools.

From there:

→ Inspect the surrounding HTML structure  
→ Identify useful class names or section references  
→ Match those sections with the corresponding Shopify `.liquid` files in the Code Editor

# This helps you locate the correct Theme file more accurately ✨

# ---

# **🔍 Finding the Correct Theme File**

After opening the Shopify Code Editor:

→ Navigate through the Theme files on the left side  
→ Locate the `.liquid` file responsible for the area where you want the Free Shipping Bar to appear  
→ Search for any id/class reference using the Code Editor’s Search feature.  
→ Click on the most promising `.liquid` file 

For example:

* Product-related sections may exist inside:  
  * `main-product.liquid`  
  * `product-template.liquid`  
* Cart-related sections may exist inside:  
  * `cart.liquid`  
  * `cart-drawer.liquid`  
* Custom sections may exist inside:  
  * `sections/*.liquid`

---

# **➕ Add the Shipping Bar Code Snippet**

Once the correct `.liquid` file is identified:

→ Paste the Shipping Bar Code Snippet in the desired position inside the file

⚠️ Important:

Make sure the snippet is added carefully in the correct location.

Incorrect placement may cause:

* Layout issues  
* Improper rendering  
* Unexpected storefront behavior

---

# **💾 Save the Theme File**

After inserting the code snippet:

→ Click **Save**

Then:

→ Refresh the storefront preview  
→ Verify that the Free Shipping Bar appears correctly in the selected custom location ✨

---

# **🎉 Final Result**

Once configured successfully:

✅ The Free Shipping Bar can appear in fully custom storefront positions  
✅ Shopify App Blocks can connect correctly using Shipping Bar ID  
✅ Advanced storefront placement becomes possible using Code Snippets  
✅ Merchants gain much more flexibility over storefront visibility ✨