Edit Shopify Theme

It's required to edit your theme code to show the locker in your store online.

There are 2 ways to do:

Automatic Installation: Our installation script will add all relevant code to your Shopify theme automatically!

Manual Installation: If you're comfortable with editing theme files and Liquid code, you can complete your own install! Click below for the full instructions.

Duplicate themes, to create a backup copy.

Automatic Install

Step 1: From your Shopify admin, go to Apps. Click Social Locker.

Step 2: Go to Liquid Installation

Step 3: At Automatic Install. Select the theme you would like to insert the app liquid code at Your Theme.

Step 4: Click Install and waiting to finish.

Manual Installation

Duplicate themes, to create a backup copy.

Step 1: From Shopify's admin, select Online Store

Step 2: Next to the Theme, click Actions > Edit code

Edit Theme Code

Step 3: Under Layout, select theme.liquid

Copy and paste this code directly above the </head>, bellow other script code

<script>
{% if shop.metafields.arn_locker %}
      function encryptKey() {
        this.prepareApp(`{{ shop.metafields.arn_locker.api }}`)
      }  
    {% endif %}    
</script>

Copy and paste this code directly above the </head>, bellow other CSS/SCSS code

{% if shop.metafields.arn_locker %}
      {{ shop.metafields.arn_locker.stylesheet }}
{% endif %}

Verify The code setup

When you finish setup code, view your theme code you will see following detail:

Script Code

Css Code