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

![](https://1886657235-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZIycKxCq1yqTPZWwoe%2F-LZsqcKWtOOY9obHZGoW%2F-LZsqh6W0zWuzG-3LtKr%2Fliquid_install.png?alt=media\&token=5f88005d-8457-440a-ad35-9bfe30408a8f)

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

![](https://1886657235-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZIycKxCq1yqTPZWwoe%2F-LZsqcKWtOOY9obHZGoW%2F-LZsqh6c-XSwKDoqPMat%2Fliquid_select_theme.png?alt=media\&token=1df053af-aea2-482a-9a58-52d12c1b2a6d)

**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](https://1886657235-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZIycKxCq1yqTPZWwoe%2F-LZnIn5YR_AEI9ti3AR4%2F-LZnLNhUhTSh2bQaoGZh%2Fedit-theme.png?alt=media\&token=86fc0547-4b1f-466d-8ce9-3a7c553beb3c)

**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](https://1886657235-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZIycKxCq1yqTPZWwoe%2F-LZstPdkdQuDX2trNpmm%2F-LZstgwxNk8PqnaDpKWR%2Fjs.png?alt=media\&token=328fa331-8031-485b-9b88-14dc9ad760f2)

![Css Code](https://1886657235-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZIycKxCq1yqTPZWwoe%2F-LZstPdkdQuDX2trNpmm%2F-LZstgx-9ljHvfKQzfze%2Fcss.png?alt=media\&token=db416707-20d1-4b3a-b15d-490b1b5238a5)