Control web elements in app webview

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

Navigate to ‘Online Store’ on your Shopify Admin
Click on the three dots to open more options on your live theme.

Click on Edit code
Click on Layout → Add a new layout
Select Theme.liquid
Add Appbrew to file name

Replace the code with the below snippet

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

<!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>

Click on template → Add a new template
Select template type to page and 'JSON'
Enter the code below

{
  "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.

PreviousApp web-view NextDiscounts

Last updated 3 months ago