Using the Mobile App Embed Extension in Evlop

Introduction

The Mobile App Embed Extension allows you to seamlessly embed pages from your website or Shopify website into your Evlop mobile app. It displays only the main content of your webpage, automatically hiding headers, footers, and other non-essential elements to ensure a smooth user experience within your app.

When to Use

Quickly display custom or complex website pages without recreating them.
Ensure consistency between your website and your mobile app.
Include policies, FAQs, or special pages directly into the app.

How It Works

The extension identifies the <main> HTML element directly inside the <body> tag on your website or Shopify website, displaying only this content within the app and hiding all other elements. For optimal results, ensure your website theme places the <main> tag directly within <body>, with headers and footers also inside the <body> tag but outside of <main>.

Troubleshooting

1. If nothing is displayed after enabling

Check: Confirm your website theme has a <main> HTML tag directly within the <body> around your primary content.
Resolve: If the <main> tag is missing, add it to your theme code or contact your theme developer for assistance.
Check: Ensure the Mobile App Embed is enabled in your Shopify theme settings:
- Go to Shopify Admin > Online Store > Themes > Customize.
- Navigate to Theme Settings > App Embeds.
- Activate the Mobile App Embed extension.
Resolve: If not activated, enable and save the theme settings.

2. If header or footer is still showing

Check: Verify your website theme structure. Headers and footers must be inside the <body> tag but outside the <main> tag.
Resolve: Adjust your theme structure by moving headers and footers outside of <main>. If you're not comfortable editing the code, reach out to your theme developer.

For further assistance, reach out to Evlop Support.