Using this method you can place a part of your app using the app embed logic build into Shopify. In our example here we moved the Stockist/dealer form to the center of a page using the Ecomposer Shopify page builder add on. However the same concept would work on any page or theme.
To edit your theme you will need to open the theme editor and click on the three dots then click edit code :
To start we added a script inside the theme.liquid that:
Targets the correct page (
/stockist-form) by checking the URL path. You can target a specific page based on the name of the page.Finds the app embed element by its ID:
#stockist-app-embed- if you need assistance finding the app embed element just let us know.Appends it into the main content area (
#main) after the page finishes loading.
Here’s the code inserted using the Shopify liquid format :
{% if request.path contains 'stockist-form' %}
<script>
window.addEventListener('load', function () {
var rootElem = document.querySelector('#main');
var appEmbed =
document.querySelector('.shopify-app-block #stockist-app-embed');
if (rootElem && appEmbed) {
rootElem.appendChild(appEmbed);
}
});
</script>
{% endif %}
Using the Same logic we can also select different page and apply CSS to the output result to format the app embed block This one used the Store Locator App Embed name.
This version targets the pro-network page
And uses a script to find the parent of the target element and inserts it before instead of after.
Finally it applies a 100% width to the app embed to allow it to take up the full width
{% if request.path contains 'pro-network' %}
<script>
window.addEventListener('load', function () {
const appEmbed = document.querySelector('.shopify-app-block #locator-app-embed');
const targetBlock = document.querySelector('.ecom-block.ecom-core.core__block.elmspace.ecom-oop3xvxlr4e');
if (appEmbed && targetBlock && targetBlock.parentNode) {
targetBlock.parentNode.insertBefore(appEmbed.parentNode, targetBlock.nextSibling);
document.querySelector('#locator-app-embed').parentNode.style.width = '100%';
}
});
</script>
{% endif %}
⚠️ Notes & Tips
This method only works with App Embed, not Snippets.
Using the snippet method would override other blocks on the page — which is not recommended unless you want a standalone locator page.
If the map appears in the wrong place, you can adjust the
rootElemselector to a more specific block where you want the map to appear (e.g.,.custom-sectionor.page__content > .containerdepending on your theme layout).
🧪 Want to change position later?
Just update this line:
var rootElem = document.querySelector('#main');
To match your desired block in the DOM. You can use browser DevTools (right click → Inspect) to find the right selector.
Or use different elements and styles in your scripts.