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 add the Stockist form, you first need to create a designated page for it. The app will generate a default page during installation, or you can embed the code into any page of your choice. Additionally, ensure that the page template supports app embeds for seamless integration.
If the Stockist app embed option is not available while editing a page, ensure that embedded templates are supported for the page type you're modifying. For instance, only certain templates allow app embeds; double-check template compatibility when facing embedding issues.
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.
As an easier alternative to custom scripting for repositioning, consider using the theme editor. Open the page section settings, then adjust the Stockist form's placement within the layout to move it to your desired position without additional code.
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).
Ensure page template compatibility when embedding the Stockist form, as some templates may not allow certain app embeds.
🧪 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.
For more customization, open the Stockist app settings where you can modify various elements such as form fields and labels. These changes allow better alignment with your store's overall design and functionality.