Beautify Your Loyalty Modules!

General

Changing the background color of the modules

All modules except for redemption:

.yotpo-widget-override-css {
   background-color: white;
   display: block;
}

Redemption module:

.yotpo-background.yotpo-align-text {
   background-color: white !important;
}

mobile only

.yotpo-widget-override-css .yotpo-is-mobile {
   background-color: white !important;
}

Banner Module

Add background color to banner text (desktop)

.yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-text-on-background:not(.yotpo-is-mobile) .yotpo-text-container {
    background-color: rgb(255 255 255 / 80%);
    padding: 20px;
}

Add background color to text on mobile

.yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-text-on-background.yotpo-is-mobile { background-color: black; }

Change the color of the text for mobile only

.yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-is-mobile .yotpo-title, .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-is-mobile .yotpo-description { color: black !important; } .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-is-mobile .yotpo-login-link .yotpo-button-style.yotpo-button-standard-size { color: black !important; border-color: black !important; } .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-is-mobile .yotpo-register-link .yotpo-button-style.yotpo-button-standard-size { background-color: black !important; color: white !important; }

Change the height of the background

The default minimum height of the banner is 600px. It can be decreased, but if it is notice that the text and buttons are not "leaking" out of the banner.

.yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-text-on-background { min-height: 600px; }

Referral Module

Remove white space in between module on mobile

.yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-is-mobile .yotpo-tile {
    min-height: unset !important;
}

Change the color of the sample emails of Step 2 of the Refer a Friend module

.yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-input-container .yotpo-input-example {
    color: white !important;
}

Referral Post Purchase Popup Code (Shopify only)

In checkout.liquid, at the end of the file add this code. Make sure to update the widget repo and instance id

Changing height of module on desktop

Right-aligned image:

.yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-background:not(.yotpo-is-mobile) .yotpo-right-align-image,
.yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-background.yotpo-right-align-background:not(.yotpo-is-mobile) {
      height: 500px !important;
}

Left-aligned image: 

.yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-background:not(.yotpo-is-mobile) .yotpo-left-align-image,
.yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-background.yotpo-left-align-background:not(.yotpo-is-mobile) {
      height: 500px !important;
}

Center image:

.yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-background.yotpo-center-background {
    height: 500px !important;
}

.yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-tile {
    min-height: 90%;
}

Adjust the color of the tab text on the referral history section

By default, the color is inherited from the background color of the CTA. 

Changing the color of both tabs:

.yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-tabs-text {
    color: black;
}

Changing the color of the active tab only

​.yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-lower-line-tab.yotpo-tab-active { color: black !important; border-color: black !important; }


​

Change font family of button

By default the font is inherited from the primary font. 

.yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-button-style span.yopto-widget-button-text { font-family: serif !important; }

My Activity Module

Changing the step icons to text

Remove the icons and add the following CSS:

.yotpo-reward-steps-item:before { display: block; text-align: center; margin: 20px auto; } .yotpo-reward-steps-item.yotpo-reward-steps-item-1:before { content: "1"; } .yotpo-reward-steps-item.yotpo-reward-steps-item-2:before { content: "2"; } .yotpo-reward-steps-item.yotpo-reward-steps-item-3:before { content: "3"; }

Changing the size of the step icons

By default the height of the icon is 60px and the width is adjusted automatically to scale. We can make the icons either larger or smaller. Note the 2 CSS snippets below, depending on whether the module uses the default icons or uploaded images. 

default icons:

.yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-step-icon svg { height: 30px; }

image icons:

.yotpo-widget-my-rewards-widget.yotpo-widget-override-css .yotpo-step-icon { height: 30px; }

Edit the color of sub-headers on the rewards history section

.yotpo-grid-row-headers .yotpo-inner-text { color: black !important; }

VIP Tiers

Hide the header of the VIP module

.yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-headline {
    display: none;
}

Limit the width of tier threshold to create line-break

.yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tier-threshold { max-width: 200px; margin: 0 auto; }

Hide the VIP tiers (leave only the progress bar)

.yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tiers-container {
    display: none;
}

Change background color for current tier

.yotpo-vip-tiers-widget.yotpo-widget-override-css .yotpo-vip-tier-container.yotpo-active.yotpo-has-status-tag .yotpo-vip-tier.yotpo-desktop.yotpo-expanded {
    background-color: #color !important;
}

Earning Points Module

Fixing CSS leakage to the birthday campaign form

.yotpo-widget-date-picker .vs__search {
    min-height: unset;
    background-color: transparent;
    border: none;
    margin: 10px 0 0 10px;
}

Changing the size of campaign icons

By default the height of the icons is 58px with the width adjusting automatically to scale. Use the snippet below to increase or decrease the icon size - whether it's the default icon or an uploaded image.

.yotpo-widget-campaign-widget.yotpo-widget-override-css .yotpo-widget-campaign-widget-icon-container {
    height: 20px;
}

Redemption Module - Read only

Add spend minimum to redemption section

The number in the brackets represents the order of the redemption options.

.yotpo-widget-visual-redemption-widget.yotpo-widget-override-css .yotpo-redemption-item .yotpo-redemption-reward:after {
    display: block;
}
.yotpo-redemption-item:nth-child(1) .yotpo-redemption-reward:after {
    content: "*on purchases of $50";
}

.yotpo-redemption-item:nth-child(2) .yotpo-redemption-reward:after {
    content: "*on purchases of $75";
}

.yotpo-redemption-item:nth-child(3) .yotpo-redemption-reward:after {
    content: "*on purchases of $100";
}

Redemption Module - Interactive

Hiding Redemption Button for Logged Out Customers

.yotpo-coupons-redemption-widget.yotpo-widget-override-css .yotpo-login-button {
    display: none;
}

Updating the text color of the modal after redeeming points

.yotpo-message-toast-container .yotpo-message-toast-title-text, .yotpo-message-toast-container svg, .yotpo-message-toast-text { color: black !important; }

Not Possible with CSS

• Can’t change the VIP Tier checkmarks into copy (i.e., one line item that says “Point multiplier” and then instead of a checkmark for each tier, it shows 1, 1.5x, and 2x under each tier
• display point balance on the banner section of the rewards page builder