Earning Points Campaigns
Campaigns are Circles
Set campaign shape to circle instead of square, including mobile (excluding modal in mobile)
Â
Here’s the CSSÂ
.yotpo-widget-campaign-widget.yotpo-widget-override-css .flexified-child.yotpo-outer-tile,
.yotpo-widget-campaign-widget.yotpo-widget-override-css .yotpo-tile,
.yotpo-widget-campaign-widget.yotpo-widget-override-css .yotpo-container-action-tile,
.yotpo-widget-campaign-widget.yotpo-widget-override-css .yotpo-message-tile,
.yotpo-widget-campaign-widget.yotpo-widget-override-css .yotpo-widget-campaign-widget-container:not(.yotpo-is-mobile) .yotpo-logged-out-tile.yotpo-overlay-tile {
  border-radius: 50%;
}
Â
Refer A Friend
Input box and button on same row
This will cause the form button to appear next to the input field only on desktop.Â
Â
Â
Here’s the CSSÂ
.yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-background:not(.yotpo-is-mobile) .yotpo-referral-widget-form { flex-direction: row; align-items: flex-end; } .yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-background:not(.yotpo-is-mobile) .yotpo-inputs-container { width: 70%; } .yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-background:not(.yotpo-is-mobile) .yotpo-action-button-widget { margin-top: 0; width: 25%; } .yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-background:not(.yotpo-is-mobile) .yotpo-button-style { width: 100% !important; } .yotpo-widget-referral-widget.yotpo-widget-override-css .yotpo-background:not(.yotpo-is-mobile) .yotpo-go-back-button { width: 100%; margin: 0 auto; }
VIP Tiers
Table Layout - Replace check with text
In case there should be text instead of just a check mark in one of the table cells, we can replace it using CSS nth-child. The first number is the column and the second number is the row.
Here’s the CSSÂ
.yotpo-grid-vip-tier-container.yotpo-vip-tiers-grid-column:nth-child(2) .yotpo-vip-tiers-grid-benefit-status:nth-child(3) p svg { display: none; } .yotpo-grid-vip-tier-container.yotpo-vip-tiers-grid-column:nth-child(2) .yotpo-vip-tiers-grid-benefit-status:nth-child(3) p:after { content: "10%"; } .yotpo-grid-vip-tier-container.yotpo-vip-tiers-grid-column:nth-child(3) .yotpo-vip-tiers-grid-benefit-status:nth-child(3) p svg { display: none; } .yotpo-grid-vip-tier-container.yotpo-vip-tiers-grid-column:nth-child(3) .yotpo-vip-tiers-grid-benefit-status:nth-child(3) p:after { content: "15%"; } .yotpo-grid-vip-tier-container.yotpo-vip-tiers-grid-column:nth-child(4) .yotpo-vip-tiers-grid-benefit-status:nth-child(3) p svg { display: none; } .yotpo-grid-vip-tier-container.yotpo-vip-tiers-grid-column:nth-child(4) .yotpo-vip-tiers-grid-benefit-status:nth-child(3) p:after { content: "20%"; } /*MOBILE*/ .VueCarousel-slide:nth-child(1) .yotpo-vip-tiers-grid-benefit-status:nth-child(3) p svg { display: none; } .VueCarousel-slide:nth-child(1) .yotpo-vip-tiers-grid-benefit-status:nth-child(3) p:after { content: "10%"; } .VueCarousel-slide:nth-child(2) .yotpo-vip-tiers-grid-benefit-status:nth-child(3) p svg { display: none; } .VueCarousel-slide:nth-child(2) .yotpo-vip-tiers-grid-benefit-status:nth-child(3) p:after { content: "15%"; } .VueCarousel-slide:nth-child(3) .yotpo-vip-tiers-grid-benefit-status:nth-child(3) p svg { display: none; } .VueCarousel-slide:nth-child(3) .yotpo-vip-tiers-grid-benefit-status:nth-child(3) p:after { content: "20%"; }
Â
Welcome Banner Module
Text on top of image on mobile
By default on mobile the text appears below the banner image. Use the following CSS to get it to appear on the image (image height might need to be adjusted as well).Â
Â
Here’s the CSSÂ
.yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-text-on-background.yotpo-is-mobile .yotpo-text-container { position: relative; } .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-text-on-background.yotpo-is-mobile .yotpo-text-and-buttons { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-direction: column; justify-content: center; } .yotpo-widget-hero-section.yotpo-widget-override-css .yotpo-text-on-background.yotpo-is-mobile { min-height: unset; }