Setup Affiliate V2 at the Front store

Setup Affiliate V2 at the Front store

Introduction

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

Overview🗂️

If App block is available on your theme

If App block is not available on your theme

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

Step 3: To change the banner of Affiliate V2 follow the below steps -:

a) Go to Affiliate Program >> Display on store. Click on the Custom button.

b) Click on the Plus icon and select the image

c) Crop the image according to the requirement and click on Crop & Save

Now, the custom image that you have added to the Affiliate Program will appear
​

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


    • Related Articles

    • Setup Affiliate V2 in WooCommerce

      Introduction In this article, you will learn how to setup Affiliate V2 to your store in WooCommerce Here are the steps to setup Affiliate V2 in WooCommerce: Step 1: Go to WooCommerce store >> Pages >> All pages >>Click or Add New or Edit button Step ...

    • Setup Affiliate Page On The Store

      Introduction: Establish a dynamic affiliate presence on your online store. Learn how to create an engaging affiliate page that attracts partners, outlines program details, and encourages collaboration for mutual growth and success. Here is a quick 10 ...

    • How to setup Membership V2 at front store

      Introduction Managing memberships effectively is crucial for creating a seamless experience for your customers and boosting engagement. This guide will walk you through the step-by-step process of setting up Membership V2, ensuring you get the most ...

    • Setup Affiliate Marketing Withdrawals

      Introduction: A withdrawal is a process of transferring money earned through the affiliate program to the affiliate's bank account or another payment method. Overview?️ How do affiliates request withdrawals? How did the store owner approve the ...

    • Setup Affiliate Commission

      Introduction: Craft a lucrative affiliate program with strategic commission structures. Dive into the essentials of setting up affiliate commissions to incentivize partners effectively, driving sales and fostering long-term collaborations. Here is a ...