How to Change Square App Locations Using the Shopify Theme Editor (OS 2.0)

With the introduction of Shopify Online Store 2.0 (OS 2.0), it's now easier than ever to customize the placement of Square apps on your store pages—no coding required! If your theme supports OS 2.0, you can add, move, and remove compatible Square apps directly from the Shopify Theme Editor.

✅ Why Use the Shopify Theme Editor?

• No code edits required
• Drag-and-drop app placement
• Full control over layout
• Works seamlessly with OS 2.0-compatible themes

💡 Note: When you enable a Square app, it may appear on your store right away—but that’s just the default location. To move it elsewhere, you need to manually insert it via the Theme Editor.

🛠 How to Insert Square Apps via the Shopify Theme Editor

Follow these steps to manually insert and move Square apps in your OS 2.0-enabled theme (e.g., Horizon Theme):

Step-by-Step Instructions:

1. From your Shopify admin, go to:

   Online Store → Themes

   

2. Find your published theme, then click Customize

   In the Shopify Theme Editor, you have two options:

   • Option A: Add as a Block (using the + button)

     

     • Choose the section where you want to place the app
     • Click Add block

     • Search for the Square app (type “Square” in the search field)

       

   • Option B: Add as a Section

     

     • Click Add section
     • Look for a category named Apps

     • Search for the Square app you want to add

       

3. Once added, drag and drop the app to your desired location
4. Click Save

That's it! Your Square app is now placed precisely where you want it on your store page.

📋 Square App Placement Reference Table

🔔 Note: The Sticky Add to Cart Bar is a floating widget and cannot be positioned via the Theme Editor. You can manage its display from the app’s Settings page.

❓ Frequently Asked Questions

Q: How do I remove a Square app from the Theme Editor?

In most themes, you can:

• Click on the app’s block or section
• Click Remove block/section

Need help? Here’s Shopify’s official guide: Removing Sections in the Theme Editor

Q: Can I hide a Square app from the Theme Editor if I’m not ready to customize it?

You can’t remove it directly from the Theme Editor if it appeared automatically, but you can disable it temporarily by going to:

Shopify Admin → Online Store → Themes → Customize → App Embeds

Turn off the toggle for the specific Square app you want to hide.

Q: I am seeing the Vitals apps load on my live store, but I'm not seeing these apps on my Shopify theme editor. What's going on?

This normally happens when the specific Vitals apps got enabled first, before inserting these apps manually inside your Shopify Theme Editor. When a Vitals app is enabled, it will be shown immediately on your live store through its default locations. This placement is done by our Vitals app.

However, our apps cannot be placed automatically inside your Shopify Theme Editor. This is because our whole Vitals app does not inject any code into your theme files upon installation except the main Vitals script itself.

Therefore, if a Vitals app is enabled, it will show right away on the live store according to its default location. If you would like to have its location changed, you would need to insert this particular app first into your Shopify Theme Editor using the instructions above.

🎯 Final Tips

• Only OS 2.0-compatible themes support these features. If your theme isn’t compatible, consider updating your theme or reaching out to your developer.
• Always preview changes before publishing to ensure everything displays as expected across devices.

🚀 Take Control of Your Store Layout

With the Shopify Theme Editor and Square apps, you're empowered to create a fully personalized shopping experience—no technical skills required. Make your storefront uniquely yours today!