Skip to main content
All CollectionsAffiliate Marketing Program
Setup Affiliate V2 at the Front store
Setup Affiliate V2 at the Front store
Updated over a month ago

Introduction

In this article, you will learn how to setup Affiliate V2 at the front store

Overview🗂️

App block is available on your theme

Here are the steps to do setup of Affiliate V2 at Front store if the App block is not available on your theme -:

Step 1: Go to Shopify admin >> Online store >> Themes >> Customize

Step 2: Click on Default page >> Search the page where you would like to add the block >> Click on Add section >> Click on Affiliate V2 >> Click on Save

App block is not available on your theme

Here are the steps to setup Affiliate V2 at Front store if App block is not available on your theme -:

Step 1: Go to Shopify admin >> Online store >> Edit code



Step 2: Create a liquid file under section with name - ait-affiliate-v2.liquid and copy the below code

<!--- Affiliate code started --->
<div id="aio-affiliate-app"
data-customer-id="{{ customer.id }}"
data-customer-email="{{ customer.email }}"
data-shop-url="{{ shop.permanent_domain }}"
data-shop-name="{{ shop.name }}"
style="min-height:400px;display:none"
class="aio-affiliate-block-width"></div>

<script>
const affiliateAppDiv = document.getElementById("aio-affiliate-app");
const script = document.createElement("script");
const aioAffiliatev2Version = new Date().getTime();
script.src = `https://app.aitrillion.com/aio-script/aio-affiliate-prod.js?v=${aioAffiliatev2Version}`;
script.defer = true;
affiliateAppDiv.appendChild(script);
</script>

<style>
.aio-affiliate-block-width {
width: 100%;
text-align: center;
}
.aio-affiliate-block-width .aio-app-container {
width: {{ section.settings.aioblockWidth | default: "1200" }}px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: {{ section.settings.aioblockpaddingleft | default: "15" }}px;
padding-right: {{ section.settings.aioblockpaddingright | default: "15" }}px;
padding-top: {{ section.settings.aioblockpaddingtop | default: "15" }}px;
padding-bottom: {{ section.settings.aioblockpaddingbottom | default: "15" }}px;
display: inline-block;
text-align: left;
}
</style>
{% schema %}
{
"name": "Affiliate",
"settings": [
{ "type": "text", "id": "aioblockWidth", "label": "Width", "default": "1200", "info": "Do not set the width below 992px for better desktop view." },
{ "type": "text", "id": "aioblockpaddingleft", "label": "Padding left (px)", "default": "15" },
{ "type": "text", "id": "aioblockpaddingright", "label": "Padding right (px)", "default": "15" },
{ "type": "text", "id": "aioblockpaddingtop", "label": "Padding top (px)", "default": "15" },
{ "type": "text", "id": "aioblockpaddingbottom", "label": "Padding bottom (px)", "default": "15" }
]
}
{% endschema %}

<!--- Affiliate code end --->

Step 3: Create a liquid template with the same name - ait-affiliate-v2, Click on Add new template >> select page >> select liquid and copy and paste the below code

{% section 'ait-affiliate-v2' %}

Step 4: Go to Pages >> Click on Add Page

Step 5: Give a name to the page and select the template - ait-affiliate-v2

Now, the affiliate program will be visible to the front store

Did this answer your question?