# Referral popup design

 1\. Open the app > click **Referrals** on the left side menu

The app allows you customize  3  referral popups

2\. Click **Customize** button of the widget you want to edit

This opens the popup editor with live preview.

<figure><img src="https://2078839253-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvdV1PFu8mN1B3K5QZCrx%2Fuploads%2Fjo66X3UKP3Kv7rr4nm4N%2F2024-07-01_16-56-56.png?alt=media&#x26;token=b2abccec-6296-45d7-9ed3-8da57a4d48d8" alt=""><figcaption></figcaption></figure>

&#x20;3\. Click **appearance** icon on the left side menu&#x20;

<figure><img src="https://2078839253-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvdV1PFu8mN1B3K5QZCrx%2Fuploads%2FETXB26CTA7v1ROFkUNIR%2F2024-07-01_16-57-11.png?alt=media&#x26;token=7b772f16-efc1-4841-ab9d-455647bc4323" alt=""><figcaption></figcaption></figure>

The app allows change the below parts

(1) Tick on checkbox **Show image banner**  and add the image link below (optional)&#x20;

(2) Select **Shape style** of the field on the widget

(3) Change the color of the field, text, background of the popup&#x20;

(4) Add custom CSS if you want advanced styling

<figure><img src="https://2078839253-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FvdV1PFu8mN1B3K5QZCrx%2Fuploads%2FVLBUbzC9zShZUYk2WhwC%2F2024-07-01_17-01-31.png?alt=media&#x26;token=bbf2fbd6-4807-49ca-a6b1-dabd6581c8bd" alt=""><figcaption></figcaption></figure>

4. Click **Save**

Check the result on the onlines store&#x20;


---

# 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.jaka.app/shopify/2-referral-program/referral-popup-design.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.