UpPromote

Top trusted Shopify referral & affiliate app.

Features

Affiliate programme management.
Invite affiliates, set commission rates and cookie windows, and let UpPromote generate unique tracking links for each one.

Customer referral widget.
A Refer & Earn button on your storefront lets existing customers share a personal invite link. Both the referrer and the new customer can be rewarded when a purchase is made.

Automated payouts.
Track earnings and send payouts via PayPal, store credit, or manual approval — no spreadsheets needed.

Performance reporting.
See clicks, conversions, and revenue per affiliate or referral source from a single dashboard.

Try UpPromote for free

See it in action

Check out UpPromote running on our demo store — styled to look like a native part of your store.

Customer referral widget and affiliate registration page on the demo storeView page

Style it to match your theme

Follow the steps below to apply the same look to your store. Each section covers one part of UpPromote's UI and includes a ready-to-use CSS snippet tailored to your theme settings.

Proceed with caution
Only make code changes if you are confident in your skills.
Improper code modifications can lead to unexpected errors, broken layouts, and negatively impact your store's performance and user experience.
If you are unsure, it's best to hire a professional.

Let us handle it

Not comfortable editing the code? Our team can implement the full UpPromote integration for you — styled to match your store, tested, and ready to go.

On your storefront

The referral widget and message bar appear on your storefront. With one CSS file added to your theme, they will automatically pick up your store's colours, fonts, and button styles — no manual adjustments needed.

Add the CSS to your theme

Open the code editor.In your Shopify Admin, go to Online Store > Themes. Next to your active theme, click ... > Edit code.
Create a new CSS asset.In the Assets folder, click Add a new asset and create a blank file called uppromote.css.

Paste the snippets.Copy the CSS blocks below and paste them into the new file. Save.

uppromote.css

.sca_aff_customer_refer_button,
.sca_aff_customer_refer_invite_button {
  --color-button-border: var(--add-to-cart-button-border-color) !important;
  border: 1px solid var(--add-to-cart-button-text-color) !important;
  border-radius: var(--button-border-radius) !important;
}

.sca_aff_customer_refer_button {
  color: var(--add-to-cart-button-text-color) !important;
  background-color: var(--add-to-cart-button-color) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  display: flex !important;
  align-items: flex-end !important;
}

.sca_aff_customer_refer_invite_button {
  background-color: var(--color-button-background) !important;
  color: var(--color-button-text) !important;
}

.sca_aff_customer_refer_icon {
  fill: var(--add-to-cart-button-text-color) !important;
}

.sca_aff_custom_invite_input {
  border: 0 !important;
  border-radius: 0 !important;
}

.sca_aff_customer_refer_invite_container {
  border-radius: var(--image-border-radius--min) !important;
  background-color: var(--color-base) !important;
  box-shadow: 0 15px 35px color-mix(in srgb, rgba(var(--color-dark-rgb)), transparent 70%),
              0 5px 15px color-mix(in srgb, rgba(var(--color-dark-rgb)), transparent 70%) !important;
}

.sca_aff_customer_refer_invite_header {
  text-transform: none !important;
  color: var(--color-heading) !important;
}

.sca_aff_customer_refer_invite_content {
  color: var(--color-foreground-85) !important;
}

.sca_aff_custom_invite_inputs .sca_aff_custom_invite_input {
  border-radius: var(--input-border-radius) !important;
  color: var(--color-foreground) !important;
  background-color: var(--color-foreground-5) !important;
  border: 0 !important;
}

.sca_aff_customer_refer_close_button {
  padding-top: 25px;
  color: var(--color-foreground) !important;
}

.sca_aff_customer_refer_container {
  transition: bottom var(--duration-short) ease-out !important;
}

/* Message Bar */
.scaaf-message-bar {
  background-color: var(--color-base) !important;
  color: var(--color-foreground) !important;
  padding: 8px 2rem !important;
  font-size: 1rem !important;
}

Load the file from theme.liquid.Open layout/theme.liquid and add the following line inside the <head> tag, after the existing stylesheet tags:
```
{{ 'uppromote.css' | asset_url | stylesheet_tag }}
```
Save and preview.Save theme.liquid and open your storefront to confirm the styles have applied.

Customer Referral Widget

The Refer & Earn button and invite popup use your theme's existing CSS variables — button colours, border-radius, shadows — so they adapt automatically to your settings.

Refer & Earn widget styled to match the themeView page

Message Bar

A banner shown at the top of your storefront when a customer visits via an affiliate link.

Styled message barView page

UpPromote-hosted pages

These pages are hosted on UpPromote's domain and don't load your theme's stylesheet. Fill in your theme settings below and click Generate CSS — the snippet for each page updates at once.

Page background colourTheme Settings → Colors → Schemes → Base → Background

Page text colourTheme Settings → Colors → Schemes → Base → Text

Button background colourTheme Settings → Colors → Add to cart button color

Button text colourTheme Settings → Colors → Add to cart button text color

Button border radiusTheme Settings → Styles → Rounded corners → Button

Input background colourTheme Settings → Colors → Schemes → Base → Background

Input text colourTheme Settings → Colors → Schemes → Base → Text

Input border radiusTheme Settings → Styles → Rounded corners → Input

Font nameTheme Settings → Typography → Body

Affiliate Registration Page

The affiliate registration page is hosted on UpPromote's domain. Paste the generated CSS snippet below into UpPromote to style it to match your theme.

Example affiliate registration page styled to match the themeView page

Apply the CSS

Copy the generated CSS.Click Copy to copy the snippet to your clipboard.
Paste it into UpPromote.In the UpPromote app, go to UpPromote Affiliate > Displays > Registration > Registration page > Customize > Design > Custom CSS.
Save and preview.Save the settings and open your registration page to confirm the styles have applied.

Generated CSS

@import url('https://fonts.googleapis.com/css2?family=Fustat:wght@300;400;500;700;900&display=swap');

/* ─────────────────────────────────────────────────────────────
   SECTION 1 — Design tokens
   ───────────────────────────────────────────────────────────── */

:root {
  --up-primary:             #883413;
  --up-font-family:         "Fustat", sans-serif;

  --up-button-bg:           #883413;
  --up-button-text:         #fcf6b1;
  --up-button-radius:       50px;

  --up-input-bg:            #f3ece1;
  --up-input-text:          #883413;
  --up-input-radius:        4px;

  --up-sidebar-bg:          #883413;
  --up-sidebar-text:        #fcf6b1;

  --up-body-bg:             #f9f6ec;
  --up-text-color:          #883413;
  --up-label-color:         #883413;

  --up-body-weight:         400;
  --up-heading-weight:      500;
  --up-body-line-height:    1.4;
  --up-heading-line-height: 1.2;
  --up-letter-spacing:      0;
}

/* ─────────────────────────────────────────────────────────────
   SECTION 2 — UpPromote selectors (do not edit)
   ───────────────────────────────────────────────────────────── */

.basic-wrapper {
  background-color: var(--up-body-bg) !important;
  font-family: var(--up-font-family) !important;
  font-weight: var(--up-body-weight) !important;
  line-height: var(--up-body-line-height) !important;
  letter-spacing: var(--up-letter-spacing) !important;
}

.main-wrapper {
  background-color: var(--up-body-bg) !important;
  max-width: 50rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.basicSidebar {
  display: none !important;
}

.header .loginBtn {
  border: 1px solid var(--up-primary) !important;
  border-bottom-width: 3px !important;
  color: var(--up-primary) !important;
  background-color: #ffffff !important;
  border-radius: var(--up-button-radius) !important;
  padding: .6em 1rem !important;
  cursor: pointer;
}

.header .loginBtn:hover {
  background-color: var(--up-button-bg) !important;
  color: var(--up-button-text) !important;
  opacity: 0.9;
}

.content .title .textTitle span {
  color: var(--up-primary) !important;
  font-family: var(--up-font-family) !important;
  font-weight: var(--up-heading-weight) !important;
  line-height: var(--up-heading-line-height) !important;
  letter-spacing: var(--up-letter-spacing) !important;
  text-transform: none !important;
}

.benefits .benefitsTextTitle span {
  color: var(--up-primary) !important;
  font-weight: var(--up-heading-weight) !important;
  line-height: var(--up-heading-line-height) !important;
  letter-spacing: var(--up-letter-spacing) !important;
}

.benefits .item .itemLabel span {
  color: var(--up-label-color) !important;
  font-weight: var(--up-body-weight) !important;
  line-height: var(--up-body-line-height) !important;
  letter-spacing: var(--up-letter-spacing) !important;
}

.benefits .item .value .textValue {
  color: var(--up-text-color) !important;
  font-weight: var(--up-body-weight) !important;
  line-height: var(--up-body-line-height) !important;
  letter-spacing: var(--up-letter-spacing) !important;
}

.benefits .item .checkIcon i {
  color: var(--up-primary) !important;
}

.form .inputWrapper .labelInput span {
  color: var(--up-label-color) !important;
  font-weight: var(--up-body-weight) !important;
  line-height: var(--up-body-line-height) !important;
  letter-spacing: var(--up-letter-spacing) !important;
  text-transform: none !important;
}

.form .inputField {
  border: 0 !important;
  color: var(--up-input-text) !important;
  border-radius: var(--up-input-radius) !important;
  background-color: var(--up-input-bg) !important;
  font-weight: var(--up-body-weight) !important;
  line-height: var(--up-body-line-height) !important;
  letter-spacing: var(--up-letter-spacing) !important;
}

.form .inputField:focus {
  outline: none !important;
}

.main-wrapper .filedWrapper {
  border: 0 !important;
}

.form .submit {
  background-color: var(--up-button-bg) !important;
  color: var(--up-button-text) !important;
  border: 1px solid var(--up-button-bg) !important;
  border-bottom-width: 3px !important;
  border-radius: var(--up-button-radius) !important;
  padding: .6em 1rem !important;
  font-weight: var(--up-heading-weight) !important;
  line-height: var(--up-heading-line-height) !important;
  letter-spacing: var(--up-letter-spacing) !important;
  cursor: pointer;
}

.form .submit:hover {
  opacity: 0.9;
}

.form .innerForm {
  padding-bottom: 3rem !important;
}

.styles_footer__DHgfN {
  color: var(--up-text-color) !important;
}

Thank You Page

Shown after a successful affiliate registration. Paste the generated CSS into UpPromote Affiliate > Displays > Registration > Thank you page > Customize > Design > Custom CSS.

Styled thank you page

Generated CSS

@import url('https://fonts.googleapis.com/css2?family=Fustat:wght@300;400;500;700;900&display=swap');

/* ─────────────────────────────────────────────────────────────
   SECTION 1 — Design tokens
   ───────────────────────────────────────────────────────────── */

:root {
  --up-primary:             #883413;
  --up-font-family:         "Fustat", sans-serif;

  --up-button-bg:           #883413;
  --up-button-text:         #fcf6b1;
  --up-button-radius:       50px;

  --up-input-bg:            #f3ece1;
  --up-input-text:          #883413;
  --up-input-radius:        4px;

  --up-sidebar-bg:          #883413;
  --up-sidebar-text:        #fcf6b1;

  --up-body-bg:             #f9f6ec;
  --up-text-color:          #883413;
  --up-label-color:         #883413;

  --up-body-weight:         400;
  --up-heading-weight:      500;
  --up-body-line-height:    1.4;
  --up-heading-line-height: 1.2;
  --up-letter-spacing:      0;
}

/* ─────────────────────────────────────────────────────────────
   SECTION 2 — UpPromote selectors (do not edit)
   ───────────────────────────────────────────────────────────── */

body {
  background-color: var(--up-body-bg) !important;
  font-family: var(--up-font-family) !important;
  font-weight: var(--up-body-weight) !important;
  line-height: var(--up-body-line-height) !important;
}

body, h1, p, * {
  font-family: var(--up-font-family) !important;
  letter-spacing: var(--up-letter-spacing) !important;
}

h1, .title-color {
  color: var(--up-primary) !important;
  font-weight: var(--up-heading-weight) !important;
  line-height: var(--up-heading-line-height) !important;
  text-transform: none !important;
}

#content-color, .text-content {
  color: var(--up-text-color) !important;
  font-weight: var(--up-body-weight) !important;
  line-height: var(--up-body-line-height) !important;
}

.thank-you__content-button {
  background: var(--up-button-bg) !important;
  color: var(--up-button-text) !important;
  border-color: var(--up-button-bg) !important;
  border-bottom-width: 3px !important;
  border-radius: var(--up-button-radius) !important;
  font-weight: var(--up-heading-weight) !important;
  line-height: var(--up-heading-line-height) !important;
}

.thank-you__content-button:hover {
  opacity: 0.9;
}

html body .btn-primary.active,
html body .btn-primary.active:focus,
html body .btn-primary.active:hover,
html body .btn-primary:active,
html body .btn-primary:active:focus,
html body .btn-primary:active:hover,
html body .btn-primary:focus,
html body .btn-primary:hover,
html body .open .dropdown-toggle.btn-primary {
  box-shadow: none !important;
}

Login Form

The affiliate login page. Paste the generated CSS into UpPromote Affiliate > Displays > Login > Login form > Customize > Design > Custom CSS.

Styled affiliate login pageView page

Generated CSS

@import url('https://fonts.googleapis.com/css2?family=Fustat:wght@300;400;500;700;900&display=swap');

/* ─────────────────────────────────────────────────────────────
   SECTION 1 — Design tokens
   ───────────────────────────────────────────────────────────── */

:root {
  --up-primary:             #883413;
  --up-font-family:         "Fustat", sans-serif;

  --up-button-bg:           #883413;
  --up-button-text:         #fcf6b1;
  --up-button-radius:       50px;

  --up-input-bg:            #f3ece1;
  --up-input-text:          #883413;
  --up-input-radius:        4px;

  --up-sidebar-bg:          #883413;
  --up-sidebar-text:        #fcf6b1;

  --up-body-bg:             #f9f6ec;
  --up-text-color:          #883413;
  --up-label-color:         #883413;

  --up-body-weight:         400;
  --up-heading-weight:      500;
  --up-body-line-height:    1.4;
  --up-heading-line-height: 1.2;
  --up-letter-spacing:      0;
}

/* ─────────────────────────────────────────────────────────────
   SECTION 2 — UpPromote selectors (do not edit)
   ───────────────────────────────────────────────────────────── */

body {
  background-color: var(--up-body-bg) !important;
  font-family: var(--up-font-family) !important;
  font-weight: var(--up-body-weight) !important;
  line-height: var(--up-body-line-height) !important;
}

body, h2, p, * {
  font-family: var(--up-font-family) !important;
  letter-spacing: var(--up-letter-spacing) !important;
}

h2#main_heading_text {
  color: var(--up-primary) !important;
  font-weight: var(--up-heading-weight) !important;
  line-height: var(--up-heading-line-height) !important;
  text-transform: none !important;
}

.form-control {
  border: 0 !important;
  border-radius: var(--up-input-radius) !important;
  background-color: var(--up-input-bg) !important;
  color: var(--up-input-text) !important;
  font-weight: var(--up-body-weight) !important;
  line-height: var(--up-body-line-height) !important;
}

.form-control:focus {
  outline: none !important;
  box-shadow: none !important;
}

#login_button_text,
#create_account_button_text {
  background-color: var(--up-button-bg) !important;
  color: var(--up-button-text) !important;
  border: 1px solid var(--up-button-bg) !important;
  border-bottom-width: 3px !important;
  border-radius: var(--up-button-radius) !important;
  font-weight: var(--up-heading-weight) !important;
  line-height: var(--up-heading-line-height) !important;
}

#login_button_text:hover,
#create_account_button_text:hover,
.btn:hover,
.btn:focus {
  opacity: 0.9;
  box-shadow: none !important;
}

html body .btn-primary.active,
html body .btn-primary.active:focus,
html body .btn-primary.active:hover,
html body .btn-primary:active,
html body .btn-primary:active:focus,
html body .btn-primary:active:hover,
html body .btn-primary:focus,
html body .btn-primary:hover,
html body .open .dropdown-toggle.btn-primary {
  box-shadow: none !important;
}

#forgot_password_text,
#do_not_have_an_account_text {
  color: var(--up-text-color) !important;
  font-weight: var(--up-body-weight) !important;
}

#do_not_have_an_account_text {
  display: block !important;
  margin-bottom: 0.5em !important;
}

Not comfortable editing the code?

Let us handle it

Our team can implement the full UpPromote integration for you — styled to match your store, tested, and ready to go.