> For the complete documentation index, see [llms.txt](https://docs.jaka.app/shopify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.jaka.app/shopify/2-referral-program/referral-popup-design.md).

# 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&amp;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&amp;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&amp;token=bbf2fbd6-4807-49ca-a6b1-dabd6581c8bd" alt=""><figcaption></figcaption></figure>

4. Click **Save**

Check the result on the onlines store&#x20;