How to Manually Add an App Embed to the Homepage (Dawn Theme)
Applies to:
Shopify Online Store 2.0
Dawn theme
Rose Perl App Embeds (Store Locator, Pickup, Delivery, ProMap, etc.)
Overview
In Shopify’s Dawn theme, App Embeds do not automatically render visually on the homepage.
This is expected behavior.
App Embeds load scripts and markup invisibly
You must manually choose where the app appears
The homepage does not support app sections, so manual placement is required
This guide shows the supported method for displaying a Rose Perl app embed on the home page of the Dawn theme.
Step 1: Enable the App Embed
This step is required for the embed to load at all.
Go to Shopify Admin → Online Store → Themes
Click Customize
Open App embeds in the left sidebar
Toggle ON the Rose Perl app embed
Click Save
⚠️ If the app embed is disabled, the app cannot be rendered anywhere on the site.
Step 2: Open the Theme Code
Go to Online Store → Themes
Click the ⋯ menu next to your theme
Select Edit code
Open the file:
layout/theme.liquid
Step 3: Add a Homepage Placeholder
Inside theme.liquid, locate the main content area.
In Dawn, this is usually inside:
<main id="MainContent">
Add the following placeholder where you want the app to appear:
<div id="roseperl-app-home"></div>
This placeholder acts as an anchor point for the app embed.
Step 4: Move the App Embed Into Place
Still in theme.liquid, scroll to the bottom of the file.
Just before the closing </body> tag, add the following script:
<script> document.addEventListener('DOMContentLoaded', function () { const appEmbed = document.querySelector('#locator-app-embed'); const target = document.querySelector('#roseperl-app-home'); if (appEmbed && target) { target.appendChild(appEmbed.parentNode); } }); </script>What this does
Finds the Rose Perl app embed once it loads
Moves it into the homepage placeholder
Ensures compatibility with Dawn’s lazy loading behavior
Step 5: Save and Publish
Click Save
Refresh your storefront homepage
The app should now appear in the selected location
Notes Specific to the Dawn Theme
The homepage cannot use “Add section → App”
JavaScript placement is required for homepage embeds
This method:
Works with future app updates
Survives theme updates
Avoids legacy snippet installs
Troubleshooting
App does not appear
Right-click the page → Inspect
Confirm the embed exists in the DOM:
#locator-app-embed
In some Dawn versions, the embed may be wrapped inside a Shopify container.
If so, update the selector to:
document.querySelector('.shopify-app-block #locator-app-embed')Still not working?
Confirm the app embed is enabled
Confirm you saved
theme.liquidClear cache and reload the page
Recommended Best Practice
Whenever possible:
Use App Embeds or App Blocks
Avoid legacy snippet installs
Only use manual placement for homepage or advanced layouts