# Referred By Widget Integration

#### To integrate the shopping cart referred by widget in your store theme:&#x20;

Go to the Online Store section in the Shopify admin panel.&#x20;

<figure><img src="/files/vNZcmGVwf6PTjZJ5fYtb" alt=""><figcaption><p>Shopify admin panel > Online Store</p></figcaption></figure>

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

<figure><img src="/files/clR5MHqYadXNMdUSQARb" alt=""><figcaption><p>Themes > Click on Customize</p></figcaption></figure>

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

<figure><img src="/files/cWH2ArDYyFc8wmj674bU" alt=""><figcaption><p>Home page > Cart option</p></figcaption></figure>

Next, click on **Add section**.

<figure><img src="/files/bY2J1mLf89KHOgXKxRXC" alt=""><figcaption><p>Click on Add section</p></figcaption></figure>

After this, select the **Custom Liquid** option.

<figure><img src="/files/ssvftHiximAHGKs5EKYX" alt=""><figcaption><p>Select the Custom Liquid option</p></figcaption></figure>

Now, open the Custom Liquid section.&#x20;

<figure><img src="/files/amjjwnIIOFtqOLDPjz6i" alt=""><figcaption><p>Open the Custom Liquid section</p></figcaption></figure>

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

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

<figure><img src="/files/LeZlGsl8MkPtrA6tQCGc" alt=""><figcaption><p>Copy the tag</p></figcaption></figure>

Next, paste the code into the Custom Liquid box.

<figure><img src="/files/WU3ChJEr2pOKVAMyL20X" alt=""><figcaption><p>Paste the code into the custom liquid box</p></figcaption></figure>

Finally, click on **Save**.

<figure><img src="/files/cuTc3WOzEvJRUCbJmdUC" alt=""><figcaption><p>Click on Save</p></figcaption></figure>

The referred by widget will be displayed on the cart page of your store.&#x20;

<figure><img src="/files/j1ZNItuQEgBzDGZC1TY5" alt=""><figcaption><p>The referred by widget will be displayed</p></figcaption></figure>

#### 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.

<figure><img src="/files/b0egQNlLjelmqFk9gxB7" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/CaxPnnrCjYifOmnaHUOL" alt=""><figcaption><p>Auto-Complete/Search Input</p></figcaption></figure>

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

<figure><img src="/files/NXsLWianojb7dR89Ad2S" alt=""><figcaption></figcaption></figure>

**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.

<figure><img src="/files/vZLei6fXSKJwQuhuv77g" alt=""><figcaption></figcaption></figure>

<details>

<summary>Advanced Customization</summary>

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:

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

In effect any piece of code with:&#x20;

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

It will be sufficient for the widget to function properly.

</details>

{% embed url="<https://youtu.be/hfWHbbil2ps>" %}
Referred By Widget Integration
{% endembed %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.goaffpro.com/affiliate-portal-customization/toolbars/setup-shopping-cart-referred-by-widget/referred-by-widget-in-your-cart.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
