> For the complete documentation index, see [llms.txt](https://doc.arenacommerce.com/social-locker/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.arenacommerce.com/social-locker/edit-your-shopify-theme.md).

# 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](https://doc.arenacommerce.com/social-locker/edit-your-shopify-theme#manual-installation).

{% hint style="info" %}
[Duplicate themes](https://help.shopify.com/manual/using-themes/theme-files#duplicate-themes), to create a backup copy.
{% endhint %}

### **Automatic Install**

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

**Step 2:** Go to **Liquid Installation**

![](/files/-LZsqh6W0zWuzG-3LtKr)

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

![](/files/-LZsqh6c-XSwKDoqPMat)

**Step 4:** Click **Install** and waiting to finish.

### Manual Installation

{% hint style="info" %}
[Duplicate themes](https://help.shopify.com/manual/using-themes/theme-files#duplicate-themes), to create a backup copy.
{% endhint %}

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

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

![Edit Theme Code](/files/-LZnLNhUhTSh2bQaoGZh)

**Step 3:** Under **Layout**, select **theme.liquid**

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

```javascript
<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

```javascript
{% 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:&#x20;

![Script Code](/files/-LZstgwxNk8PqnaDpKWR)

![Css Code](/files/-LZstgx-9ljHvfKQzfze)