Loyalty Customization Playbook

Prev Next

Products


Loyalty & Referrals

Supported plans

All plans

eCommerce Platform

Shopify, Shopify Plus, BigCommerce, Custom

Getting Started

Explore our Loyalty Lookbook with designs built using out-of-the-box settings, no CSS required.

This shows how much flexibility is possible without code, ensuring faster updates and easier maintenance.

Documentation for out-of-the-box customizations for the:

If you require more advanced design changes, each loyalty module includes a CSS editor.

CSS Edits Cheatsheet

Here are some quick CSS snippets you can use to fine-tune your widgets and bring them even closer to your brand.

Align text center 

.yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-text-on-background .yotpo-text-container .yotpo-title,
.yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-text-on-background .yotpo-description {
    text-align: center;
}

.yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-text-on-background .yotpo-action-buttons-wrapper {
    justify-content: center;
    display: flex;
}

Result

Hide one of the CTAs

.yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-customer-logged-out-buttons  .yotpo-login-link,
.yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-customer-logged-out-buttons-mobile .yotpo-login-link {
   display: none;
}

Result

My Activity Module

Rewards History Modal - change text color

.yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-grid-row .yotpo-inner-text {
   /* replace #0b5394 with relevant hex code */
    color: #0b5394 !important;
}

Result

VIP Tiers Module

Remove border radius from Tiers

.yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tier-container,
.yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-current-status,
.yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tier-header {  
     border-radius:0;
}

Result

Earning Points Module

Change the background color of the completed tile

.yotpo-widget-campaign-widget.yotpo-widget-override-css .yotpo-tile.yotpo-tile-completed,
.yotpo-widget-campaign-widget.yotpo-widget-override-css .yotpo-message-already-completed {  
   /* replace #f2f2f2 with relevant hex code */
   background-color:#f2f2f2 !important;
}

Result

Switching the order of Points and Action

.yotpo-widget-campaign-widget.yotpo-widget-override-css .yotpo-tile div:not(.yotpo-widget-campaign-widget-icon-container) {
  display:flex;
  flex-direction:column-reverse;
}

Result

Remove border radius from tiles

.yotpo-widget-campaign-widget.yotpo-widget-override-css .yotpo-tile,
.yotpo-widget-campaign-widget.yotpo-widget-override-css .yotpo-tile-wrapper,
.yotpo-widget-campaign-widget.yotpo-widget-override-css .yotpo-outer-tile,
.yotpo-widget-campaign-widget.yotpo-widget-override-css .yotpo-message-tile:not(.yotpo-is-mobile),
.yotpo-widget-campaign-widget.yotpo-widget-override-css .yotpo-container-action-tile:not(.yotpo-is-mobile),
.yotpo-widget-campaign-widget.yotpo-widget-override-css .yotpo-logged-out-tile {
    border-radius: 0px !important;
}

Result

Points Redemption Module (Interactive)

Remove border radius

.yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-redemption-option-container.yotpo-redemption-no-background {
    border-radius: 0;
}

Result

Points Redemption Module (Read-only)

Remove border radius

.yotpo-widget-visual-redemption-widget.yotpo-widget-override-css .yotpo-redemption-item {
    border-radius: 0;
}

Result

Product Redemption Module

Add border radius

.yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-redemption-option {
    border-radius: 10px;
}

.yotpo-widget-products-redemption.yotpo-widget-override-css .yotpo-redemption-option-image {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

Result

Referral

Dark mode

Use the code below to change the colors of all the borders in case the background of your module is dark. 

.yotpo-widget-referral-share.yotpo-widget-override-css .yotpo-input-container .yotpo-input,
.yotpo-widget-referral-share.yotpo-widget-override-css .yotpo-copy-text-button.yotpo-main-copy-link,
.yotpo-widget-referral-share.yotpo-widget-override-css .yotpo-main-share-body-textarea{
   /* replace #fff with relevant hex code */
    border-color: #fff !important;
    color: #fff !important;
}
.yotpo-widget-referral-share.yotpo-widget-override-css .yotpo-copy-text-button .yotpo-copy-text,
.yotpo-widget-referral-share.yotpo-widget-override-css span.yotpo-share-button-txt,
.yotpo-widget-referral-share.yotpo-widget-override-css .yotpo-input-container .yotpo-input::placeholder,
.yotpo-widget-referral-share.yotpo-widget-override-css .yotpo-share-options-headline-text,
.yotpo-widget-referral-share.yotpo-widget-override-css .yotpo-input-container .yotpo-input-example {
/* replace #fff with relevant hex code */
    color: #fff !important;
}
.yotpo-widget-referral-share.yotpo-widget-override-css .yotpo-share-button-icon path {
/* replace #fff with relevant hex code */
    fill: #fff;
}

FAQs

Q: Can I test changes before publishing them live?

A: Yes, you can preview edits in the customization interface before pushing them to your site.