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
Note📝: Affiliate V2 supports RTL (Right to left text)
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
