> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.nector.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to add Customer Redeem section to your Shopify theme?

If you want to add the customer redeem section to your Shopify website but you have an older theme that does not support app blocks, you need to add the section by editing the code of your theme.
 
Follow the below steps for adding the customer redeem section to your website:

1. Go to your Shopify admin page

2. Under **Online Store**, click on **Themes** and click on **Edit Code** in the options

![](https://storage.crisp.chat/users/helpdesk/website/d9947dc4cf2ed000/image_14bmx7t.png)

3. Find the **Snippets** folder and click on **Add a new snippet** and write the name **nectorcustom_customer_redeem**

![](https://storage.crisp.chat/users/helpdesk/website/d9947dc4cf2ed000/image_1s85v2i.png)

4. Copy the below block of code and paste in the file you just created and click on **Save**

```
{{ 'nectorcustom_styles.css' | asset_url | stylesheet_tag }}

{% liquid
  assign nector_font_size = font_size | default: '16px'
  assign nector_background_color = background_color | default: '#eee'
  assign nector_text_color = text_color | default: '#000'
  assign nector_link_text_color = link_text_color | default: '#000'
  assign nector_text_align = text_align | default: 'start'
%}

{% if customer and customer != empty %}
  <div style="text-align: {{ nector_text_align }};">
    <div
      class="nector-customer-redeem-container"
      style="background-color: {{ nector_background_color }}; color: {{ nector_text_color }}; font-size: {{ nector_font_size }};"
    >
      <div class="nector-customer-redeem-header-container">
        <svg
          stroke="currentColor"
          fill="none"
          stroke-width="2"
          viewBox="0 0 24 24"
          stroke-linecap="round"
          stroke-linejoin="round"
          height="1.5em"
          width="1.5em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <desc></desc><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><line x1="9" y1="15" x2="15" y2="9"></line><circle cx="9.5" cy="9.5" r=".5" fill="currentColor"></circle><circle cx="14.5" cy="14.5" r=".5" fill="currentColor"></circle><path d="M5 7.2a2.2 2.2 0 0 1 2.2 -2.2h1a2.2 2.2 0 0 0 1.55 -.64l.7 -.7a2.2 2.2 0 0 1 3.12 0l.7 .7a2.2 2.2 0 0 0 1.55 .64h1a2.2 2.2 0 0 1 2.2 2.2v1a2.2 2.2 0 0 0 .64 1.55l.7 .7a2.2 2.2 0 0 1 0 3.12l-.7 .7a2.2 2.2 0 0 0 -.64 1.55v1a2.2 2.2 0 0 1 -2.2 2.2h-1a2.2 2.2 0 0 0 -1.55 .64l-.7 .7a2.2 2.2 0 0 1 -3.12 0l-.7 -.7a2.2 2.2 0 0 0 -1.55 -.64h-1a2.2 2.2 0 0 1 -2.2 -2.2v-1a2.2 2.2 0 0 0 -.64 -1.55l-.7 -.7a2.2 2.2 0 0 1 0 -3.12l.7 -.7a2.2 2.2 0 0 0 .64 -1.55v-1"></path>
        </svg>

        <span>Redeem coins for extra discount</span>
      </div>

      <div class="nector-customer-redeem-content-container">
        <span> Available Coins: <span id="nector-customer-available-coins"></span> </span>

        <a
          href="#show-nector-rewards---/waystoredeem-list"
          class="nector-customer-redeem-action-btn"
          style="color: {{ nector_link_text_color }};"
        >
          Redeem Now
        </a>
      </div>
    </div>
  </div>
{% endif %}
```

![](https://storage.crisp.chat/users/helpdesk/website/d9947dc4cf2ed000/image_11o1gt5.png)

5. Find the **Assets** folder and click on **Add a new asset** and write the name **nectorcustom_styles** with the extension **CSS**

![](https://storage.crisp.chat/users/helpdesk/website/d9947dc4cf2ed000/image_16adexk.png)

6. Copy the below block of code and paste in the file you just created and click on **Save**

```
/* Customer Earning Block Styles */

.nector-customer-earning-content-container {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.nector-customer-earning-info-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  height: 0.85em;
  width: 0.85em;
  font-size: 100%;
  padding: 0.2em;
  background-color: black;
  color: white;
  border-radius: 50%;
}

.nector-customer-earning-tooltip {
  position: relative;
}

.nector-customer-earning-tooltip:before {
  content: attr(data-text);
  position: absolute;

  bottom: 100%;
  margin-bottom: 5px;

  /* basic styles */
  width: 200px;
  padding: 10px;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #ccc;
  color: #333;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

  visibility: hidden;
  opacity: 0;
  transition: all 0.4s;
}

.nector-customer-earning-tooltip:hover:before {
  visibility: visible;
  opacity: 1;
}

/* Customer Redeem Block Styles */

.nector-customer-redeem-container {
  display: inline-block;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 12px 12px;
}

.nector-customer-redeem-header-container {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-right: 25px;
}

.nector-customer-redeem-content-container {
  font-size: 0.9em;
  margin-top: 20px;

  display: flex;
  gap: 25px;
  justify-content: space-between;
  align-items: center;
}

.nector-customer-redeem-action-btn {
  text-decoration: underline;
}
```

5. After that, find the file that has the code related to your product page, and paste the below line of code wherever appropriate based on where you want to display the section

|| Since each theme will have different files and structure, it is not possible to mention the exact file in which you have to put the below line of code. You need to find the appropriate file for your current theme and paste it in there.

```
{% render 'nectorcustom_customer_redeem',
  customer: customer,
  font_size: '16px',
  background_color: '#eee',
  text_color: '#000',
  link_text_color: '#000',
  text_align: 'start'
%}
```

6. Click on **Save** button

###### After adding the above line of code, the customer redeem section will be visible on your product page

![](https://storage.crisp.chat/users/helpdesk/website/d9947dc4cf2ed000/image_1tzkb6t.png)