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.
Mockups
If your team has a specific design vision, you can submit a mockup for Yotpo to build.
Format: Share the design as a live design link (like Figma or Sketch). This allows our team to extract colors, typography, and assets directly.
What to include in the design for the Loyalty Widget:
Logged-in and logged-out states
Hover states for earning points
VIP tiers, including progress and current tier
A mobile-responsive view
Process: Your CSM will manage the review and approval process with our Customization team.
After a mockup is approved and the Customization team is given a green light to start working on it, please do not make any further changes to the design.
After the Customization team is done, your CSM will inform you, at which point you can ask for edits. You will have 1 round of edits, so please make sure to collect all of your edits before sending them back to the CSM.
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.
Banner Module
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: How long does it take for Yotpo to implement a mockup?
A: Timelines vary depending on the complexity of your design. Your Yotpo POC will provide an estimated timeframe after review.
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.