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 ✨

Updated on: 03/06/2026