Social Locker
Search
K

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