Referred By Widget Integration

Custom Integration tutorial for "Referred By" widget in your store theme

To integrate the shopping cart referred by widget in your store theme:

Go to the Online Store section in the Shopify admin panel.

Shopify admin panel > Online Store

Here, go to the Themes section and click on Customize.

Themes > Click on Customize

Now, go to the Home page > Select the Cart option.

Home page > Cart option

Next, click on Add section.

Click on Add section

After this, select the Custom Liquid option.

Select the Custom Liquid option

Now, open the Custom Liquid section.

Open the Custom Liquid section

Copy the following code from Look and Feel > Toolbars > Shopping Cart Referred By section:

<div class="gfp_ref_input"></div>

Copy the tag

Next, paste the code into the Custom Liquid box.

Paste the code into the custom liquid box

Finally, click on Save.

Click on Save

The referred by widget will be displayed on the cart page of your store.

The referred by widget will be displayed

The Shopping Cart Referred by widget has three input types:

You can go to Look and Feel > Toolbars > Shopping Cart Referred By and click on Customize. Here, you can choose how to display the referred-by widget input.

Auto-Complete/Search Input: Customers can enter an affiliate's name to search for them.

Auto-Complete/Search Input

Affiliate List Dropdown: A dropdown list will appear, allowing customers to select an affiliate.

Referral Code Input: The customer can enter the affiliate's referral code, which is the unique code found at the end of the affiliate's referral link.

Advanced Customization

If you want to customize the widget to meet your needs, the widget script requires only an input field with the id gfp_refcode_input for it to function properly.

Instead of adding the code as shown in the custom integration, you can add the following code as well:

<div>
<label>Referred By</label>
<input type="text" id="gfp_refcode_input" /> 
</div>

In effect any piece of code with:

<input type="text" id="gfp_refcode_input" /> 

It will be sufficient for the widget to function properly.

Referred By Widget Integration