Control web elements in app webview

To display web content in the app without web headers, please follow the below steps

Step 1 - Navigate to ‘Online Store’ on your Shopify Admin

Step 2 - Click on the three dots to open more options on your live theme.

Step 3 - Click on Edit code

Step 4 - Click on Layout → Add a new layout

Step 5 - Select Theme.liquid

Step 6 - Add Appbrew to file name

Step 7 - Replace the code with the below snippet

Make sure you replace the font and css file as per your store

Copy

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="color-scheme" content="light dark">
    <title></title>
    {%- liquid
      render 'css-variables'
      render 'fontfaces'
      echo 'base.css' | asset_url | stylesheet_tag: preload: true
    -%}
    {{ 'custom.css' | asset_url | stylesheet_tag }}
    {%- if template == 'index' -%}
      {{ content_for_header }}
    {% endif %}
  </head>
  <body>
    {{ content_for_layout }}
  </body>
</html>


Step 8 - Click on template → Add a new template

Step 9 - Select template type to page and 'JSON'

Step 10 - Enter the code below

Copy

{
  "layout": "theme.appbrew",
  "sections": {
    "main": {
      "type": "main-page",
      "settings": {
        "padding_top": 28,
        "padding_bottom": 28
      }
    }
  },
  "order": [
    "main"
  ]
}


Once the above steps are configured, use ?view=appbrew at the end of your custom page url.