## Overview

Fordeer uses an automated algorithm to detect common components in your theme and display labels in the positions you've configured.

In some themes, the app may not be able to detect the correct product image position. If your label does not appear properly, you can use **Snippet Code** to manually add the label to your theme.

This guide explains how to add Snippet Code to your Shopify theme.

> ***Important:*** *After creating a label, wait 10–15 seconds and check your storefront first. If the label displays correctly, you do not need to use Snippet Code.*

---

## How do I add Snippet Code to my theme?

### Step 1: Create a label

Make sure you have already created the label you want to display.

If you haven't created one yet, click **Create** and complete your label setup first.

### Step 2: Copy the Snippet Code

1. Open your label and go to the **Design** tab.

2. Scroll down and expand **Advanced**, then find **Snippet Code** and click **Copy code**.

![](https://chat.fordeercommerce.io/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdTBFIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--dfadaefff1da870de32421db57de6cac36b9dfbd/label2371_1pprc0l.jpg)

![](https://chat.fordeercommerce.io/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdTRFIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--1ff66b95b74657a7cdd36316b438aa4171b61656/image.png)

### Step 3: Identify the product image wrapper

1. Go to your storefront and open your browser's developer tools.

2. Navigate to the page where you want the label to appear and identify the outer wrapper of the product image.

3. Make sure the wrapper uses `position: relative` rather than `position: absolute`.

![](https://chat.fordeercommerce.io/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdThFIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--04883054bc375e7c4330c224b8f984e2b561ff81/label2373_6cgey7.jpg)

> ***Important:*** *This step requires basic knowledge of HTML, CSS, and your Shopify theme structure. If you're unsure which element to use, contact our support team before editing your theme.*

### Step 4: Open your theme code

1. From your Shopify admin, go to **Online Store > Themes**, then open **Edit code** for your current theme.

2. Find the Liquid file that contains the product image wrapper you identified in the previous step.

3. Double-check that you've found the correct element before making any changes.

![](https://chat.fordeercommerce.io/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdkFFIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--1bfbbd47c2b6a52fae799be17a76a84243448575/image.png)

![](https://chat.fordeercommerce.io/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdkVFIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--baa032f1d8077234e6c71c01a9ebc1f421690428/image.png)

### Step 5: Add the Snippet Code

1. Paste the Snippet Code you copied from Fordeer into the appropriate product image wrapper.

2. Click **Save** to apply your changes.

![](https://chat.fordeercommerce.io/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdklFIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--b3962c4bdcb30bef4988d2a227279ec4c30972f7/image.png)

![](https://chat.fordeercommerce.io/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdk1FIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--8b4aebf0dd23943f0a52403a627803248075db53/image.png)

> ***Important:*** *Each label has its own Snippet Code. If you want to manually display multiple labels, add the Snippet Code for each label.*

### Step 6: Add the code to other pages if needed

Snippet Code must be added to each relevant theme location where you want the label to appear.

> **For example,** if you want to display the label on **Product pages**, **Collection pages**, and the **Homepage**, you may need to add the Snippet Code to the corresponding Liquid files or sections for each location..

### Step 7: Check the label on your storefront

Visit the pages where you added the Snippet Code and make sure the label appears correctly on the product images.

![](https://chat.fordeercommerce.io/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdlFFIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--9feabfb0631c92b934769e43fd31098cd1ea2092/image.png)

---

## Before using Snippet Code

Keep the following in mind:

* Use Snippet Code only when Fordeer's automatic positioning does not display the label correctly.

* Each label has its own unique Snippet Code.

* The code may need to be added separately to different page templates or sections.

* Editing theme code requires coding knowledge.

* Consider duplicating or backing up your theme before editing its code.

> ***Tip:*** *If you're unsure where to add the Snippet Code, keep the default label position and contact our support team. We can help you resolve theme compatibility issues without risking incorrect changes to your theme.*

---

We value your feedback — it helps us continuously improve ForDeer and provide you with a better experience.

🖥️ **Demo store:** Check out [here](https://fordeer-label-demo.myshopify.com/) with password: 1

👉 **Chat with us:** [Share your feedback](https://chat.fordeercommerce.io/widget?website_token=SkftR92ALebTgo2mN83SVuwn#/messages) directly with our team.\
👉 **Email us:** [hi@fordeercommerce.io](mailto:support@fordeercommerce.io)\
👉 **Explore more apps:** Discover more [ForDeer apps](https://apps.shopify.com/partners/fordeercommerce?utm_source=support&utm_medium=helpdesk).\
👉 **Join our community:** Join [ForDeer Community](https://www.facebook.com/groups/ecommerce.beginners.community/) to get the latest updates, tips, and special deals.

🕐 **Working hours:** 8:30 AM – 5:00 PM (UTC+7), Monday–Friday.\
We typically reply to live chats within minutes and emails within a few hours.

Need help? Feel free to reach out anytime via live chat or email!