By default, we render a completely standalone page when rendering as a WebView. This is the simplest way to get started, but can only be customized with the Theme Editor, and does not support additional custom CSS, fonts or JavaScript. Instead, you can create a dedicated Shopify layout and page and we’ll use this when rendering as a WebView. This offers several advantages since you can customize the page directly within your Shopify Theme, such as adding custom CSS that will only apply in the mobile app, and any additional JavaScript or analytics you may need, such as auto-translation.

​
Configure your Shopify theme

1

Create a new minimal layout

In your Shopify Theme, create a new layout (in the layout/ directory) called theme.loyaltylion-webview.liquid.This will be the layout used when rendering as a mobile WebView, so you should keep it as small and simple as possible.
  • do not include a <head> section in your layout. This prevents app blocks from being included in the resulting webview, which is important to ensure a fast and uncluttered experience when rendering on a mobile device - otherwise the mobile webview may show cookie warnings, popups, or other UI elements like offers etc, which are not appropriate for a mobile webview
  • include only the CSS that is needed for the LoyaltyLion page, i.e. your main CSS file that includes fonts, variables, ete. These can be added to the <body> section and will still work fine in the webview
  • only include JavaScript that is needed for the LoyaltyLion page (e.g. auto translation apps), or for analytics. Shopify analytics are included automatically with the {{ content_for_header }} tag
Since every theme is different, we can’t provide a one-size-fits-all example that is guaranteed to work for all themes, but the examples below should work for some common Shopify themes, and provide a starting point for other themes.

Generic example

2

Create a new CSS file for custom styling

Create a new CSS file (in the assets/ directory) called loyaltylion-webview.css, with the following content.You can leave this file blank for now; any CSS in this file will apply exclusively to the Loyalty Page when it’s rendered as in your mobile app as a WebView.
3

Create a new section

In your Shopify Theme, create a new section (in the sections/ directory) called loyaltylion-webview.liquid, with the following content:
{{ 'loyaltylion-webview.css' | asset_url | stylesheet_tag }}

<script>
  !function(t,n){var e=n.loyaltylion||[];if(!e.isLoyaltyLion){n.loyaltylion=e,void 0===n.lion&&(n.lion=e),e.version=2,e.isLoyaltyLion=!0;var o=n.URLSearchParams,i=n.sessionStorage,r="ll_loader_revision",a=(new Date).toISOString().replace(/-/g,""),s="function"==typeof o?function(){try{var t=new o(n.location.search).get(r);return t&&i.setItem(r,t),i.getItem(r)}catch(t){return""}}():null;c("https://sdk.loyaltylion.dev/static/2/"+a.slice(0,8)+"/loader"+(s?"-"+s:"")+".js");var l=!1;e.init=function(t){if(l)throw new Error("Cannot call lion.init more than once");l=!0;var n=e._token=t.token;if(!n)throw new Error("Token must be supplied to lion.init");var o=[];function i(t,n){t[n]=function(){o.push([n,Array.prototype.slice.call(arguments,0)])}}"_push configure bootstrap shutdown on removeListener authenticateCustomer".split(" ").forEach(function(t){i(e,t)}),c("https://sdk.loyaltylion.dev/sdk/start/"+a.slice(0,11)+"/"+n+".js"),e._initData=t,e._buffer=o}}function c(n){var e=t.getElementsByTagName("script")[0],o=t.createElement("script");o.src=n,o.crossOrigin="",e.parentNode.insertBefore(o,e)}}(document,window);

  {% if shop.metafields.loyaltylion.token != nil %}
    {% if customer != nil %}
      {% assign date = 'now' | date: "%Y-%m-%d %H:%M:%S%z" %}
      {% assign auth_token =
        customer.id | append: date | append: customer.email | append: shop.metafields.loyaltylion.secret | sha1 %}

      loyaltylion.init({
        token: "{{ shop.metafields.loyaltylion.token }}",
        customer: {
          id: "{{ customer.id }}",
          email: "{{ customer.email }}",
          name: "{{ customer.name }}",
          rechargeHash: "{{ customer.metafields.subscriptions.customer_string | if: customer.metafields.subscriptions.customer_string }}",
          shopify: {
            hasAccount: {{ customer.has_account }}
          }
        },
        auth: {
          date: "{{ date }}",
          token: "{{ auth_token }}"
        },
      });
    {% else %}
      loyaltylion.init({ token: "{{ shop.metafields.loyaltylion.token }}" });
    {% endif %}
  {% endif %}
</script>

{{ page.content }}

{% schema %}
{
  "name": "t:sections.loyaltylion-webview.name",
  "tag": "section",
  "class": "section",
  "settings": []
}
{% endschema %}
4

Create a new template

In your Shopify Theme, create a new template (in the templates/ directory) called page.loyaltylion-webview.json, with the following content:
{
  "layout": "theme.loyaltylion-webview",
  "sections": {
    "main": {
      "type": "loyaltylion-webview",
      "settings": {}
    }
  },
  "order": [
    "main"
  ]
}
This simple template, when applied to a page, will render the page using the new layout and section we created in the previous steps.

​
Set up a new Shopify page

​
Create a new page

Once your Shopify Theme has been configured, we need to create a new page and apply the new page template to it. This will be the actual page that will be rendered inside the WebView.
Webview page
  • We recommend naming the page “Rewards (webview)” to distinguish it from any other loyalty pages
  • Configure the page to use the loyaltylion-webview template
For the page content, switch to HTML mode and paste in the following: 
<div data-lion-integrated-page=""></div>

​
Preview and customize the page

Assuming LoyaltyLion is already installed and launched on your store, you can open this new page to preview how the Loyalty Page will look, and add any customizations you need to make using custom CSS added to the loyaltylion-webview.css Because the page will be rendered in a full-screen webview, we recommend that the page renders using 100% width, i.e. is not rendered inside a grid container and limited to a specific width.

​
Share the page URL with us

Once you’re happy with how the page looks, share the page URL with your LoyaltyLion account manager or our support team and we’ll configure it as your WebView page.