Everything you can change with the custom stylesheet in Settings → Advanced → Custom Stylesheet. It ships with the page, so changes appear on the next page load.
Try the theme editor first. Each block has settings for its title, colors, fonts, layout and spacing. Anything tagged Theme editor below already has a control there, and using it is easier than overriding it in CSS.
Filters every table on this page as you type.
Copy any of these into your custom stylesheet. Each one is tested against the live widget.
Clears the rules under the summary, tabs, toolbar and each review. Do not do this by setting --cr-border-color to transparent: that variable also draws the rating distribution bars, so they would disappear too.
.cr-rating-summary,
.cr-toolbar,
.cr-tabs,
.cr-review,
.cr-actions-bar,
.cr-media-gallery {
border-bottom: none;
}Both lines are needed. .cr-summary-right grows to fill the row by default, so centering does nothing until you stop it.
.cr-rating-summary { justify-content: center; }
.cr-summary-right { flex: 0 1 auto; }The widget inherits your theme font unless you say otherwise.
.cr-review-body,
.cr-review-title {
font-family: "Your Brand Font", sans-serif;
}Ordinary CSS. No !important needed.
.cr-write-review-btn {
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: 999px;
}Star color comes from the app, and the app applies it inline, so this needs !important. Prefer changing it in Settings unless you want it to differ per widget.
.classic-ratings-product-reviews {
--cr-star-color: #ff6b35 !important;
}| Variable | Currently | Changes | Set by | To override |
|---|---|---|---|---|
--cr-focus-color |
currentColor | Color | Widget builder | plain CSS |
--cr-focus-offset |
2px | Offset | Widget builder | plain CSS |
--cr-focus-width |
2px | Width | Widget builder | plain CSS |
| Class | What it styles |
|---|---|
.classic-ratings-badge |
display: flex; align-items: center; gap: 0.375rem; margin: 0.375rem 0 |
.classic-ratings-review-count |
color: #6D7175; font-size: 0.8125rem |
.classic-ratings-stars-small |
display: flex; gap: 1px |
| Variable | Currently | Changes | Set by | To override |
|---|---|---|---|---|
--cr-button-bg |
#000 |
Bg
used by 6 rules |
Widget builder | plain CSS |
--cr-button-radius |
10px | Radius | Widget builder | plain CSS |
--cr-button-text |
#fff | Text | Widget builder | plain CSS |
--cr-disclosure-bg |
rgba(0,0,0,0.06 | Bg | Widget builder | plain CSS |
--cr-disclosure-text |
#5c5c5c | Text | Widget builder | plain CSS |
--cr-focus-color |
currentColor | Color | Widget builder | plain CSS |
--cr-focus-offset |
2px | Offset | Widget builder | plain CSS |
--cr-focus-width |
2px | Width | Widget builder | plain CSS |
--cr-footer-min-h |
0 | Min h | Widget builder | plain CSS |
--cr-overlay-text |
#fff | Text | Widget builder | plain CSS |
--cr-play-btn-bg |
rgba(255,255,255,.95 | Btn bg | Widget builder | plain CSS |
--cr-play-btn-icon |
#000 | Btn icon | Widget builder | plain CSS |
--cr-play-btn-opacity |
.25 | Btn opacity | Widget builder | plain CSS |
--cr-play-btn-size |
48px |
Btn size
used by 8 rules |
Widget builder | plain CSS |
--cr-po-opacity |
.7 | Opacity | Widget builder | plain CSS |
--cr-po-scale |
1 |
Scale
used by 13 rules |
Widget builder | plain CSS |
--cr-scale-speed |
.4s | Speed | Widget builder | plain CSS |
--cr-shoppable-max-width |
100% | Max width | Widget builder | plain CSS |
--cr-text-color |
#1a1a1a | Color | Widget builder | plain CSS |
--cr-text-muted |
#666 | Muted | Widget builder | plain CSS |
--cr-toast-bg |
unset | Bg | Widget builder | plain CSS |
--cr-toast-offset |
unset | Offset | Widget builder | plain CSS |
--cr-toast-radius |
unset | Radius | Widget builder | plain CSS |
--cr-toast-text |
unset | Text | Widget builder | plain CSS |
--cr-transition-speed |
.4s | Speed | Widget builder | plain CSS |
--cr-video-border-radius |
8px | Border radius | Widget builder | plain CSS |
--cr-video-height |
355px | Height | Widget builder | plain CSS |
--cr-video-width |
200px |
Width
used by 4 rules |
Widget builder | plain CSS |
| Class | What it styles |
|---|---|
.cr-media-with-text |
position:relative; font-family:inherit; max-width:100% |
.cr-powered-by |
text-align: center; padding: 1rem 0 0.5rem; font-size: 12px; color: var(--cr-text-muted, #666) |
.cr-shoppable |
position:relative; font-family:inherit; max-width:var(--cr-shoppable-max-width,100%); background:#000 |
.cr-shoppable--bottom_overlay |
position:absolute |
.cr-shoppable--continuous-scroll |
|
.cr-shoppable--floating_button |
position:absolute; display:none; width:100%; padding:10px 16px |
.cr-shoppable--full-width |
width:100vw!important; max-width:100vw!important; position:relative!important; padding:0!important |
.cr-shoppable--inline |
justify-content:flex-start; align-items:center; padding:0 |
.cr-shoppable--product-overlay |
position:absolute; border-radius:inherit; display:flex; align-items:center |
.cr-shoppable--side_panel |
display:flex; flex:0 0 320px; max-width:320px; width:180px |
.cr-shoppable-lightbox |
position:fixed; display:flex; background:rgba(0,0,0,.95); font-family:inherit |
.cr-shoppable-lightbox__buy-btn |
padding:10px 20px; border:none; border-radius:8px; font-size:13px |
.cr-shoppable-lightbox__close |
position:absolute; width:40px; height:40px; border-radius:50% |
.cr-shoppable-lightbox__logo |
position:absolute; max-width:180px |
.cr-shoppable-lightbox__main |
flex:1; display:flex; align-items:center; justify-content:center |
.cr-shoppable-lightbox__main--has-panel |
align-items:stretch; display:none; flex:0 0 auto |
.cr-shoppable-lightbox__media |
position:relative; height:100%; max-width:100%; margin:0 auto |
.cr-shoppable-lightbox__media--enter-active |
opacity:1 |
.cr-shoppable-lightbox__media--enter-below |
opacity:0 |
.cr-shoppable-lightbox__media--exit-up |
opacity:0 |
.cr-shoppable-lightbox__media-col |
flex:1; position:relative |
.cr-shoppable-lightbox__mute |
position:absolute; width:40px; height:40px; border-radius:50% |
.cr-shoppable-lightbox__panel |
display:none; width:350px; background:#fff; border-radius:12px |
.cr-shoppable-lightbox__panel--fade |
opacity:.5 |
.cr-shoppable-lightbox__panel-atc |
width:100%; padding:14px; border:none; border-radius:10px |
.cr-shoppable-lightbox__panel-atc--success |
background:#16a34a!important; color:#fff!important |
.cr-shoppable-lightbox__panel-carousel |
position:relative; border-radius:12px; background:#f5f5f5 |
.cr-shoppable-lightbox__panel-carousel-dot |
width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.5) |
.cr-shoppable-lightbox__panel-carousel-dot--active |
background:#fff |
.cr-shoppable-lightbox__panel-carousel-dots |
position:absolute; display:flex; gap:6px |
.cr-shoppable-lightbox__panel-carousel-img |
position:absolute; width:100%; height:100%; opacity:0 |
.cr-shoppable-lightbox__panel-carousel-img--active |
opacity:1 |
.cr-shoppable-lightbox__panel-carousel-nav |
position:absolute; width:32px; height:32px; border-radius:50% |
.cr-shoppable-lightbox__panel-carousel-nav--next |
|
.cr-shoppable-lightbox__panel-carousel-nav--prev |
|
.cr-shoppable-lightbox__panel-carousel-track |
position:relative; width:100%; height:100% |
.cr-shoppable-lightbox__panel-compare |
font-size:14px; color:#999 |
.cr-shoppable-lightbox__panel-content |
flex:1; padding:16px; display:none |
.cr-shoppable-lightbox__panel-details |
border-top:1px solid #eee |
.cr-shoppable-lightbox__panel-details-body |
|
.cr-shoppable-lightbox__panel-details-body--open |
|
.cr-shoppable-lightbox__panel-details-chevron |
width:16px; height:16px |
.cr-shoppable-lightbox__panel-details-html |
padding:12px 0; font-size:13px; color:#555; max-width:100% |
.cr-shoppable-lightbox__panel-details-toggle |
display:flex; align-items:center; justify-content:space-between; width:100% |
.cr-shoppable-lightbox__panel-details-toggle--open |
|
.cr-shoppable-lightbox__panel-fallback |
padding:20px 0 |
.cr-shoppable-lightbox__panel-fallback-link |
display:inline-block; color:var(--cr-button-bg,#000); font-size:14px; font-weight:500 |
.cr-shoppable-lightbox__panel-price |
font-size:18px; font-weight:600; color:#1a1a1a |
.cr-shoppable-lightbox__panel-price-row |
display:flex; align-items:center; gap:8px |
.cr-shoppable-lightbox__panel-qty |
display:inline-flex; align-items:center; border:1px solid #ddd; border-radius:8px |
.cr-shoppable-lightbox__panel-qty-btn |
width:40px; height:40px; border:none; background:#fff |
.cr-shoppable-lightbox__panel-qty-val |
width:48px; height:40px; display:flex; align-items:center |
.cr-shoppable-lightbox__panel-skeleton-img |
border-radius:12px; background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%) |
.cr-shoppable-lightbox__panel-skeleton-line |
border-radius:4px; background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%) |
.cr-shoppable-lightbox__panel-skeleton-line--price |
height:14px; width:30% |
.cr-shoppable-lightbox__panel-skeleton-line--title |
height:16px; width:70% |
.cr-shoppable-lightbox__panel-tab |
display:flex; align-items:center; gap:8px; padding:8px 12px |
.cr-shoppable-lightbox__panel-tab--active |
background:#f5f5f5 |
.cr-shoppable-lightbox__panel-tab-img |
width:32px; height:32px; border-radius:4px |
.cr-shoppable-lightbox__panel-tab-name |
max-width:100px |
.cr-shoppable-lightbox__panel-tabs |
display:flex; gap:4px; padding:12px 16px; border-bottom:1px solid #eee |
.cr-shoppable-lightbox__panel-title |
font-size:16px; font-weight:600; color:#1a1a1a; margin:0 0 8px |
.cr-shoppable-lightbox__panel-variant |
width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:8px |
.cr-shoppable-lightbox__panel-variant-wrap |
|
.cr-shoppable-lightbox__poster-overlay |
position:absolute; width:100%; height:100% |
.cr-shoppable-lightbox__poster-overlay--hidden |
opacity:0 |
.cr-shoppable-lightbox__product |
position:absolute; display:flex; align-items:center; gap:12px |
.cr-shoppable-lightbox__product--enter-active |
opacity:1 |
.cr-shoppable-lightbox__product--enter-below |
opacity:0 |
.cr-shoppable-lightbox__product--exit-up |
opacity:0 |
.cr-shoppable-lightbox__product-img |
width:48px; height:48px; border-radius:8px |
.cr-shoppable-lightbox__product-name |
flex:1; color:#fff; font-size:14px; font-weight:500 |
.cr-shoppable-lightbox__review |
margin:12px auto 0; max-width:52ch; width:100%; color:#fff |
.cr-shoppable-lightbox__review-body |
margin:0; font-size:14px; color:rgba(255,255,255,.92) |
.cr-shoppable-lightbox__review-cta |
border:none; font-family:inherit; font-weight:600; font-size:13px |
.cr-shoppable-lightbox__review-date |
margin:6px 0 0; font-size:12px; color:rgba(255,255,255,.6) |
.cr-shoppable-lightbox__review-head |
display:flex; align-items:center; gap:8px |
.cr-shoppable-lightbox__review-incentivized |
display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px |
.cr-shoppable-lightbox__review-name |
font-size:14px; font-weight:600 |
.cr-shoppable-lightbox__review-pinfo |
flex:1 1 0 |
.cr-shoppable-lightbox__review-pprice |
margin:2px 0 0; font-size:13px; opacity:.85 |
.cr-shoppable-lightbox__review-product |
display:flex; align-items:center; gap:10px; border-top:1px solid rgba(255,255,255,.14) |
.cr-shoppable-lightbox__review-ptitle |
margin:0; font-size:14px; font-weight:600 |
.cr-shoppable-lightbox__review-rating |
display:inline-flex; gap:1px; align-items:center |
.cr-shoppable-lightbox__review-thumb |
width:44px; height:44px; border-radius:8px; background:rgba(255,255,255,.12) |
.cr-shoppable-lightbox__review-verified |
display:inline-flex; align-items:center; gap:4px; font-size:12px |
.cr-shoppable-lightbox__share |
position:absolute; width:40px; height:40px; border-radius:50% |
.cr-shoppable-lightbox__share-copy |
width:100%; padding:16px; background:#000; color:#fff |
.cr-shoppable-lightbox__share-divider |
border:none; border-top:1px solid #eee; margin:0 0 16px |
.cr-shoppable-lightbox__share-modal |
position:absolute; display:flex; align-items:center; justify-content:center |
.cr-shoppable-lightbox__share-modal-close |
width:36px; height:36px; border-radius:50%; border:2px solid #333 |
.cr-shoppable-lightbox__share-modal-content |
background:#fff; border-radius:16px; padding:28px 24px; max-width:480px |
.cr-shoppable-lightbox__share-modal-header |
display:flex; align-items:center; justify-content:space-between |
.cr-shoppable-lightbox__share-modal-title |
margin:0; font-size:22px; font-weight:600; color:#1a1a1a |
.cr-shoppable-lightbox__share-social |
display:flex; align-items:center; gap:8px; padding:0 |
.cr-shoppable-lightbox__share-socials |
display:flex; gap:16px; justify-content:center |
.cr-shoppable-lightbox__share-url |
width:100%; padding:14px 12px; border:1px solid #ddd; border-radius:10px |
.cr-shoppable-lightbox__share-url-label |
font-size:14px; font-weight:600; color:#1a1a1a; margin:0 0 8px |
.cr-shoppable-lightbox__sidebar |
width:100px; display:flex; align-items:center; justify-content:center |
.cr-shoppable-lightbox__sidebar-nav |
width:44px; height:44px; border:none; background:none |
.cr-shoppable-lightbox__sidebar-track |
display:flex; gap:8px; align-items:center; padding:4px 0 |
.cr-shoppable-lightbox__thumb |
width:80px; height:120px; border-radius:8px; opacity:.5 |
.cr-shoppable-lightbox__unmute-pill |
position:absolute; display:inline-flex; align-items:center; gap:6px |
.cr-shoppable__buy-btn |
display:inline-flex; align-items:center; justify-content:center; padding:10px 12px |
.cr-shoppable__buy-btn--bottom-center |
|
.cr-shoppable__buy-btn--bottom-left |
|
.cr-shoppable__buy-btn--bottom-right |
|
.cr-shoppable__buy-btn--floating |
width:auto; box-shadow:0 2px 12px rgba(0,0,0,.3); position:absolute |
.cr-shoppable__buy-btn--top-center |
|
.cr-shoppable__buy-btn--top-left |
|
.cr-shoppable__buy-btn--top-right |
|
.cr-shoppable__card |
background:#000; position:relative; opacity:0; display:flex |
.cr-shoppable__card--image |
position:relative; display:block; opacity:1!important |
.cr-shoppable__content |
position:relative |
.cr-shoppable__content-overlay |
position:absolute; padding:28px 10px 10px; display:flex; align-items:center |
.cr-shoppable__content-overlay--flat |
|
.cr-shoppable__content-overlay--top |
padding:10px 10px 28px |
.cr-shoppable__dot |
width:6px; height:6px; border-radius:50%; background:#ddd |
.cr-shoppable__dots |
display:flex; justify-content:center; gap:6px |
.cr-shoppable__duration |
position:absolute; background:rgba(0,0,0,.75); color:#fff; font-size:11px |
.cr-shoppable__empty |
text-align:center; padding:2rem 1rem; color:#666; font-size:14px |
.cr-shoppable__footer |
position:absolute; display:flex; gap:8px; border-radius:inherit |
.cr-shoppable__footer--even |
|
.cr-shoppable__footer--flat |
|
.cr-shoppable__footer--split |
align-items:flex-start |
.cr-shoppable__footer--top |
|
.cr-shoppable__footer-cta |
display:inline-flex; align-items:center; justify-content:center; gap:6px |
.cr-shoppable__footer-cta--bar |
width:100%; padding:10px 14px; border-radius:8px; font-size:13px |
.cr-shoppable__footer-cta--icon |
width:44px; height:44px; padding:0; border-radius:50% |
.cr-shoppable__footer-cta--icon-outline |
width:44px; height:44px; padding:0; border-radius:50% |
.cr-shoppable__footer-cta--pill |
max-width:100%; padding:8px 16px; border-radius:999px; font-size:12px |
.cr-shoppable__footer-info |
flex:1 1 0; text-align:left |
.cr-shoppable__footer-price |
margin:3px 0 0; font-size:16px; font-weight:700; color:var(--cr-overlay-text,#fff) |
.cr-shoppable__footer-product |
display:flex; align-items:center; gap:10px; width:100% |
.cr-shoppable__footer-review |
display:flex; align-items:center; gap:4px |
.cr-shoppable__footer-thumb |
width:52px; height:62px; border-radius:8px; background:#fff |
.cr-shoppable__footer-title |
margin:0; font-size:14px; font-weight:500; color:var(--cr-overlay-text,#fff) |
.cr-shoppable__header |
text-align:center |
.cr-shoppable__inline-controls |
position:absolute; display:flex; gap:8px; opacity:0 |
.cr-shoppable__inline-mute |
width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,.6) |
.cr-shoppable__inline-pause |
width:36px; height:36px; border-radius:50%; background:rgba(0,0,0,.6) |
.cr-shoppable__modal |
position:fixed; display:flex; align-items:center; justify-content:center |
.cr-shoppable__modal-add-btn |
width:100%; padding:16px; background:var(--cr-button-bg,#000); color:var(--cr-button-text,#fff) |
.cr-shoppable__modal-backdrop |
position:absolute; background:rgba(0,0,0,.6) |
.cr-shoppable__modal-body |
padding:24px |
.cr-shoppable__modal-close |
position:absolute; width:36px; height:36px; border-radius:50% |
.cr-shoppable__modal-content |
position:relative; background:#fff; border-radius:20px; max-width:420px |
.cr-shoppable__modal-image |
width:100%; border-radius:14px |
.cr-shoppable__modal-price |
font-size:16px; color:#666; margin:0 0 16px |
.cr-shoppable__modal-title |
font-size:18px; font-weight:600; margin:0 0 8px |
.cr-shoppable__modal-variant-label |
font-size:14px; font-weight:500 |
.cr-shoppable__modal-variant-select |
width:100%; padding:12px; border:1px solid #ddd; border-radius:10px |
.cr-shoppable__modal-variants |
|
.cr-shoppable__mute-icon |
display:block |
.cr-shoppable__nav |
position:absolute; width:36px; height:36px; border-radius:50% |
.cr-shoppable__overlay-name |
max-width:100% |
.cr-shoppable__overlay-stars |
display:flex; gap:1px; align-items:center |
.cr-shoppable__overlay-verified |
|
.cr-shoppable__play-btn |
position:absolute; width:var(--cr-play-btn-size,48px); height:var(--cr-play-btn-size,48px); border-radius:50% |
.cr-shoppable__poster |
position:absolute; width:100%; height:100%; opacity:0 |
.cr-shoppable__poster--static |
position:relative; display:block; opacity:1!important |
.cr-shoppable__product-card |
display:none; align-items:flex-start; flex:1; background:transparent |
.cr-shoppable__product-image |
display:none; width:100%; height:auto; border-radius:calc(6px * var(--cr-po-scale,1)) |
.cr-shoppable__product-info |
display:none; flex:1; gap:calc(2px * var(--cr-po-scale,1)) |
.cr-shoppable__product-overlay |
position:absolute; flex:1; background:#fff; padding:16px |
.cr-shoppable__product-overlay--floating |
position:absolute |
.cr-shoppable__product-price |
display:none; color:rgba(255,255,255,.85); font-size:calc(11px * var(--cr-po-scale,1)); font-weight:600 |
.cr-shoppable__product-title |
display:none; font-size:16px; color:#fff; font-weight:500 |
.cr-shoppable__setup |
display:flex; align-items:center; gap:12px; padding:24px |
.cr-shoppable__skeleton-card |
flex:0 0 var(--cr-video-width,200px)!important; width:var(--cr-video-width,200px)!important; max-width:var(--cr-video-width,200px)!important; border-radius:var(--cr-video-border-radius,8px) |
.cr-shoppable__skeleton-image |
width:36px; height:36px; border-radius:6px; background:#e0e0e0 |
.cr-shoppable__skeleton-info |
flex:1 |
.cr-shoppable__skeleton-price |
height:10px; width:40%; background:#e0e0e0; border-radius:4px |
.cr-shoppable__skeleton-product |
display:flex; gap:8px; padding:10px; background:#fff |
.cr-shoppable__skeleton-title |
height:12px; width:80%; background:#e0e0e0; border-radius:4px |
.cr-shoppable__skeleton-track |
display:flex; gap:12px; justify-content:center |
.cr-shoppable__skeleton-video |
height:var(--cr-video-height,355px)!important; background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%) |
.cr-shoppable__title |
font-size:1.25rem; font-weight:600; margin:0; color:var(--cr-text-color,#1a1a1a) |
.cr-shoppable__toast |
position:fixed; background:var(--cr-toast-bg); color:var(--cr-toast-text); padding:12px 24px |
.cr-shoppable__track |
display:flex; gap:12px; padding:0 16px; justify-content:center |
.cr-shoppable__unmute-icon |
display:none |
.cr-shoppable__video |
|
.cr-shoppable__video-container |
position:relative; background:#000; border-radius:inherit; width:180px |
| Variable | Currently | Changes | Set by | To override |
|---|---|---|---|---|
--cr-focus-color |
currentColor | Color | Widget builder | plain CSS |
--cr-focus-offset |
2px | Offset | Widget builder | plain CSS |
--cr-focus-width |
2px | Width | Widget builder | plain CSS |
--cr-mwt-cta-bg |
#000000 | Cta bg | Widget builder | plain CSS |
--cr-mwt-cta-color |
#ffffff | Cta color | Widget builder | plain CSS |
--cr-mwt-cta-font |
inherit | Cta font | Widget builder | plain CSS |
--cr-mwt-cta-padding |
12px 28px | Cta padding | Widget builder | plain CSS |
--cr-mwt-cta-radius |
6px | Cta radius | Widget builder | plain CSS |
--cr-mwt-cta-size |
15px | Cta size | Widget builder | plain CSS |
--cr-mwt-cta-x |
50% | Cta x | Widget builder | plain CSS |
--cr-mwt-cta-y |
75% | Cta y | Widget builder | plain CSS |
--cr-mwt-heading-color |
#1a1a1a | Heading color | Widget builder | plain CSS |
--cr-mwt-heading-font |
inherit | Heading font | Widget builder | plain CSS |
--cr-mwt-heading-size |
32px | Heading size | Widget builder | plain CSS |
--cr-mwt-heading-weight |
700 | Heading weight | Widget builder | plain CSS |
--cr-mwt-heading-x |
50% | Heading x | Widget builder | plain CSS |
--cr-mwt-heading-y |
40% | Heading y | Widget builder | plain CSS |
--cr-mwt-max-width |
none | Max width | Widget builder | plain CSS |
--cr-mwt-media-width |
50% | Media width | Widget builder | plain CSS |
--cr-mwt-notice-color |
#999 | Notice color | Widget builder | plain CSS |
--cr-mwt-notice-padding |
20px | Notice padding | Widget builder | plain CSS |
--cr-mwt-radius |
0 | Radius | Widget builder | plain CSS |
--cr-mwt-sub-color |
#6b7280 | Sub color | Widget builder | plain CSS |
--cr-mwt-sub-font |
inherit | Sub font | Widget builder | plain CSS |
--cr-mwt-sub-size |
16px | Sub size | Widget builder | plain CSS |
--cr-mwt-sub-x |
50% | Sub x | Widget builder | plain CSS |
--cr-mwt-sub-y |
55% | Sub y | Widget builder | plain CSS |
--cr-mwt-text-bg |
#ffffff | Text bg | Widget builder | plain CSS |
--cr-text-muted |
#666 | Muted | Widget builder | plain CSS |
| Class | What it styles |
|---|---|
.cr-is-loading |
display:none |
.cr-media-with-text |
border-radius:var(--cr-mwt-radius,0); max-width:var(--cr-mwt-max-width,none); display:none |
.cr-mwt--full-width |
width:100vw; max-width:100vw; position:relative |
.cr-mwt__content |
display:none |
.cr-mwt__cta |
position:absolute; background:var(--cr-mwt-cta-bg,#000000); color:var(--cr-mwt-cta-color,#ffffff); font-family:var(--cr-mwt-cta-font,inherit) |
.cr-mwt__heading |
position:absolute; font-size:var(--cr-mwt-heading-size,32px); font-weight:var(--cr-mwt-heading-weight,700); color:var(--cr-mwt-heading-color,#1a1a1a) |
.cr-mwt__img |
width:100%; height:100%; display:block |
.cr-mwt__layout |
display:flex; gap:0 |
.cr-mwt__layout--reverse |
|
.cr-mwt__media |
flex:0 0 var(--cr-mwt-media-width,50%); max-width:var(--cr-mwt-media-width,50%); position:relative; background:#e5e7eb |
.cr-mwt__notice |
text-align:center; color:var(--cr-mwt-notice-color,#999); padding:var(--cr-mwt-notice-padding,20px) |
.cr-mwt__skeleton |
display:flex; gap:0 |
.cr-mwt__skeleton-line |
border-radius:4px; background:#e0e0e0 |
.cr-mwt__skeleton-line--btn |
height:32px; width:100px; border-radius:6px |
.cr-mwt__skeleton-line--heading |
height:20px; width:70% |
.cr-mwt__skeleton-line--sub |
height:14px; width:50% |
.cr-mwt__skeleton-media |
flex:1; background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%) |
.cr-mwt__skeleton-text |
flex:1; padding:32px; display:flex; justify-content:center |
.cr-mwt__subheading |
position:absolute; font-size:var(--cr-mwt-sub-size,16px); color:var(--cr-mwt-sub-color,#6b7280); font-family:var(--cr-mwt-sub-font,inherit) |
.cr-mwt__text-side |
flex:1; position:relative; padding:0; background:var(--cr-mwt-text-bg,#ffffff) |
.cr-mwt__video |
width:100%; height:100%; display:block |
.cr-powered-by |
text-align: center; padding: 1rem 0 0.5rem; font-size: 12px; color: var(--cr-text-muted, #666) |
Available on: product
| Variable | Currently | Changes | Set by | To override |
|---|---|---|---|---|
--cr-qa-body-size |
16px |
Body Font Size
used by 14 rules |
Theme editor | plain CSS |
--cr-qa-button-color |
#1a1a2e |
Button Color
used by 5 rules |
Theme editor | plain CSS |
--cr-qa-button-radius |
4px | Button Corner Radius | Theme editor | plain CSS |
--cr-qa-empty-bg |
#faf9f7 | Empty State Background | Theme editor | plain CSS |
--cr-qa-header-size |
28px | Header Font Size | Theme editor | plain CSS |
--cr-qa-section-padding |
40px | Section Padding | Theme editor | plain CSS |
--cr-qa-text-color |
#1a1a2e |
Text Color
used by 12 rules |
Theme editor | plain CSS |
--cr-focus-color |
currentColor | Color | Widget builder | plain CSS |
--cr-focus-offset |
2px | Offset | Widget builder | plain CSS |
--cr-focus-width |
2px | Width | Widget builder | plain CSS |
--cr-qa-bg-light |
#f9fafb | Fixed value | Hardcoded | plain CSS |
--cr-qa-bg-muted |
#f3f4f6 | Fixed value | Hardcoded | plain CSS |
--cr-qa-border-color |
#e5e5e5 |
Fixed value
used by 4 rules |
Hardcoded | plain CSS |
--cr-qa-input-border |
#d1d5db | Fixed value | Hardcoded | plain CSS |
--cr-qa-text-muted |
#666666 |
Fixed value
used by 11 rules |
Hardcoded | plain CSS |
--cr-qa-verified-color |
#15803d | Fixed value | Hardcoded | plain CSS |
| Class | What it styles |
|---|---|
.classic-ratings-product-qa |
padding:var(--cr-qa-section-padding,40px) 0; max-width:100%; font-family:inherit |
.cr-qa-answer |
padding:1rem 1.25rem; background:var(--cr-qa-bg-light,#f9fafb); border-radius:0 6px 6px 0 |
.cr-qa-answer-author |
font-weight:600; color:var(--cr-qa-text-color,#1a1a2e) |
.cr-qa-answer-body |
font-size:var(--cr-qa-body-size,16px); color:var(--cr-qa-text-color,#1a1a2e); margin:0 0 0.625rem |
.cr-qa-answer-label |
font-size:calc(var(--cr-qa-body-size,16px) - 3px); font-weight:700; color:var(--cr-qa-text-muted,#666); text-transform:uppercase |
.cr-qa-answer-meta |
display:flex; align-items:center; gap:0.875rem; font-size:calc(var(--cr-qa-body-size,16px) - 2px) |
.cr-qa-answers |
padding:0; margin:1.75rem 0 0 1.5rem |
.cr-qa-ask-btn |
display:inline-block; padding:0.6rem 1.5rem; background:var(--cr-qa-button-color,#1a1a2e); border:1px solid var(--cr-qa-button-color,#1a1a2e) |
.cr-qa-asker |
display:flex; align-items:center; gap:0.625rem; flex:1 |
.cr-qa-asker-name |
font-weight:600; color:var(--cr-qa-text-color,#1a1a2e); font-size:calc(var(--cr-qa-body-size,16px) - 1px) |
.cr-qa-avatar |
width:44px; height:44px; border-radius:50%; background:var(--cr-qa-bg-muted,#f3f4f6) |
.cr-qa-count |
font-size:var(--cr-qa-body-size,16px); color:var(--cr-qa-text-muted,#666) |
.cr-qa-date |
color:var(--cr-qa-text-muted,#666); font-size:calc(var(--cr-qa-body-size,16px) - 2px) |
.cr-qa-empty |
text-align:center; padding:3rem 1rem; background:var(--cr-qa-empty-bg,#faf9f7); border-radius:8px |
.cr-qa-empty-icon |
font-size:3rem; color:var(--cr-qa-text-muted,#666) |
.cr-qa-empty-subtitle |
font-size:var(--cr-qa-body-size,16px); color:var(--cr-qa-text-muted,#666); margin:0 0 2rem |
.cr-qa-empty-title |
font-size:calc(var(--cr-qa-body-size,16px) + 4px); font-weight:700; color:var(--cr-qa-text-color,#1a1a2e); margin:0 0 0.75rem |
.cr-qa-field-hint |
display:block; font-size:13px; color:var(--cr-qa-text-muted,#666) |
.cr-qa-form |
display:flex; gap:20px; width:100%; padding:12px 14px |
.cr-qa-form-footer |
display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--cr-qa-border-color,#e5e5e5) |
.cr-qa-form-group |
display:flex; gap:6px |
.cr-qa-form-half |
flex:1 |
.cr-qa-form-label |
font-size:15px; font-weight:600; color:var(--cr-qa-text-color,#1a1a2e) |
.cr-qa-form-row |
display:flex; gap:16px |
.cr-qa-header |
display:flex; align-items:center; justify-content:space-between; gap:1rem |
.cr-qa-header-actions |
display:flex; align-items:center |
.cr-qa-item |
border-bottom:1px solid var(--cr-qa-border-color,#e5e5e5); padding:2rem 0 2.25rem |
.cr-qa-item-head |
display:flex; align-items:center; gap:0.75rem |
.cr-qa-list |
margin:0 |
.cr-qa-loading |
text-align:center; color:var(--cr-qa-text-muted,#666); padding:3rem; font-size:var(--cr-qa-body-size,16px) |
.cr-qa-modal |
position:fixed; display:flex; align-items:center; justify-content:center |
.cr-qa-modal-close |
position:absolute; background:none; border:none; color:var(--cr-qa-text-muted,#666) |
.cr-qa-modal-content |
position:relative; background:white; padding:32px 40px 40px; border-radius:16px |
.cr-qa-modal-overlay |
position:absolute; background:rgba(0,0,0,0.5) |
.cr-qa-modal-title |
font-size:22px; font-weight:600; margin:0 0 28px; text-align:center |
.cr-qa-powered-by |
text-align:center; padding:1rem 0 0.5rem; font-size:12px; color:var(--cr-qa-text-muted,#666) |
.cr-qa-question-body |
font-size:var(--cr-qa-body-size,16px); font-weight:600; color:var(--cr-qa-text-color,#1a1a2e); margin:0 |
.cr-qa-required |
color:#e53e3e |
.cr-qa-required-note |
font-size:13px; color:var(--cr-qa-text-muted,#666); text-align:center |
.cr-qa-sr-only |
position:absolute; width:1px; height:1px; padding:0 |
.cr-qa-store-badge |
display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px |
.cr-qa-submit-btn |
padding:12px 32px; background:var(--cr-qa-button-color,#1a1a2e); color:white; border:none |
.cr-qa-success |
background:#dcfce7; color:#166534; padding:1rem; border-radius:8px |
.cr-qa-summary |
display:flex; align-items:center; gap:1rem; padding:0 0 1rem |
.cr-qa-toggle-answers |
background:none; border:none; color:var(--cr-qa-button-color,#1a1a2e); font-size:calc(var(--cr-qa-body-size,16px) - 2px) |
.cr-qa-verified |
display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 7px |
.cr-review |
border-bottom:1px solid var(--cr-qa-border-color,#e5e5e5); padding:2rem 0 2.25rem |
.cr-review-avatar |
width:44px; height:44px; border-radius:50%; background:var(--cr-qa-bg-muted,#f3f4f6) |
Available on: product
| Variable | Currently | Changes | Set by | To override |
|---|---|---|---|---|
--cr-body-size |
16px |
Body Font Size
used by 45 rules |
Theme editor | plain CSS |
--cr-button-color |
#1a1a2e |
Button Color
used by 51 rules |
Theme editor | plain CSS |
--cr-button-radius |
4px |
Button Corner Radius
used by 9 rules |
Theme editor | plain CSS |
--cr-empty-bg |
#faf9f7 | Empty State Background | Theme editor | plain CSS |
--cr-header-size |
32px | Header Font Size | Theme editor | plain CSS |
--cr-icon-size |
set in the editor | Rating Icon Size | Theme editor | plain CSS |
--cr-max-width |
1200px | Section Max Width | Theme editor | plain CSS |
--cr-section-padding |
40px | Section Padding | Theme editor | plain CSS |
--cr-text-color |
#1a1a2e |
Text Color
used by 35 rules |
Theme editor | plain CSS |
--cr-star-color |
#FFC107 |
Star color
used by 6 rules |
App settings | plain CSS |
--cr-bg-muted |
#f3f4f6 |
Muted
used by 10 rules |
Widget builder | plain CSS |
--cr-border-color |
#e5e5e5 |
Color
used by 16 rules |
Widget builder | plain CSS |
--cr-danger-color |
#dc2626 |
Color
used by 7 rules |
Widget builder | plain CSS |
--cr-disclosure-bg |
rgba(0,0,0,0.06 | Bg | Widget builder | plain CSS |
--cr-disclosure-text |
#5c5c5c | Text | Widget builder | plain CSS |
--cr-error-color |
#e53e3e |
Color
used by 4 rules |
Widget builder | plain CSS |
--cr-error-text |
#b91c1c | Text | Widget builder | plain CSS |
--cr-focus-color |
currentColor | Color | Widget builder | plain CSS |
--cr-focus-offset |
2px | Offset | Widget builder | plain CSS |
--cr-focus-width |
2px | Width | Widget builder | plain CSS |
--cr-input-border |
#d1d5db |
Border
used by 11 rules |
Widget builder | plain CSS |
--cr-toast-bg |
#dcfce7 | Bg | Widget builder | plain CSS |
--cr-toast-error-bg |
#fee2e2 | Error bg | Widget builder | plain CSS |
--cr-toast-error-text |
#991b1b | Error text | Widget builder | plain CSS |
--cr-toast-offset |
unset | Offset | Widget builder | plain CSS |
--cr-toast-radius |
unset | Radius | Widget builder | plain CSS |
--cr-toast-text |
#166534 | Text | Widget builder | plain CSS |
--cr-verified-color |
#15803d |
Color
used by 5 rules |
Widget builder | plain CSS |
--cr-bg-light |
#f9fafb |
Fixed value
used by 6 rules |
Hardcoded | plain CSS |
--cr-modal-shadow |
0 25px 50px -12px rgba(0,0,0,.25) | Fixed value | Hardcoded | plain CSS |
--cr-overlay-bg |
rgba(0,0,0,.5) | Fixed value | Hardcoded | plain CSS |
--cr-text-muted |
#666666 |
Fixed value
used by 37 rules |
Hardcoded | plain CSS |
| Class | What it styles |
|---|---|
.classic-ratings-header |
display:flex; align-items:center; justify-content:space-between; gap:1rem |
.classic-ratings-product-reviews |
padding:var(--cr-section-padding,40px) 0; max-width:var(--cr-max-width,1200px); font-family:inherit; display:block!important |
.classic-ratings-reviews-list |
margin:0 |
.cr-actions-bar |
display:flex; justify-content:center; padding:1.5rem 0; border-bottom:1px solid var(--cr-border-color,#e5e5e5) |
.cr-add-photo-btn |
display:flex; align-items:center; gap:8px; padding:10px 16px |
.cr-ai-summary |
padding:1.25rem 1.5rem; background:var(--cr-bg-light,#f9fafb); border-radius:0 6px 6px 0 |
.cr-ai-summary-text |
margin:0; font-size:var(--cr-body-size,16px); color:var(--cr-text-muted,#666) |
.cr-already-reviewed |
background:transparent; color:var(--cr-button-color,#1a1a2e); border:1px solid var(--cr-button-color,#1a1a2e); font-weight:500 |
.cr-ask-btn-primary |
background:var(--cr-button-color,#1a1a2e); color:white; border:1px solid var(--cr-button-color,#1a1a2e); box-shadow:0 4px 12px rgba(0,0,0,0.15) |
.cr-ask-question-btn |
padding:0.5rem 1rem; font-size:calc(var(--cr-body-size,16px) - 2px); display:inline-block; background:transparent |
.cr-back-btn |
display:none; padding:12px 24px; background:#fff; border:1px solid var(--cr-input-border,#d1d5db) |
.cr-char-count |
margin:4px 0 0; font-size:13px; color:var(--cr-text-muted,#666) |
.cr-char-count-met |
color:var(--cr-verified-color,#15803d) |
.cr-char-hint |
color:var(--cr-text-muted,#666); font-weight:400; font-size:13px |
.cr-clear-filters |
padding:6px 12px; background:transparent; border:1px solid var(--cr-input-border,#d1d5db); border-radius:6px |
.cr-clear-filters-btn |
display:inline-block; padding:0.5rem 1.5rem; background:transparent; border:1px solid var(--cr-input-border,#d1d5db) |
.cr-compact-header |
display:flex; align-items:center; gap:0.5rem |
.cr-delete-review-link |
color:var(--cr-danger-color,#dc2626); font-size:13px; background:none; border:none |
.cr-dist-active |
background:var(--cr-bg-muted,#f3f4f6); font-weight:700; color:var(--cr-text-color,#1a1a2e) |
.cr-dist-bar |
flex:1; height:8px; background:var(--cr-border-color,#e5e5e5); border-radius:4px |
.cr-dist-count |
width:30px; text-align:right; color:var(--cr-text-muted,#666); font-weight:700 |
.cr-dist-fill |
height:100%; background:var(--cr-star-color,#FFC107); border-radius:4px; width:0% |
.cr-dist-label |
width:50px; color:var(--cr-text-color,#1a1a2e); font-weight:700 |
.cr-dist-row |
display:flex; align-items:center; gap:0.75rem; font-size:calc(var(--cr-body-size,16px) - 2px) |
.cr-distribution |
display:flex; gap:0.125rem |
.cr-done-btn |
padding:12px 32px; background:var(--cr-button-color,#1a1a2e); border:1px solid var(--cr-button-color,#1a1a2e); border-radius:var(--cr-button-radius,4px) |
.cr-done-icon |
color:var(--cr-verified-color,#15803d) |
.cr-done-message |
margin:0; font-size:15px; color:var(--cr-text-muted,#666); max-width:38ch |
.cr-done-referral |
margin:0; font-size:14px; color:#166534; background:#f0fdf4 |
.cr-done-share |
display:flex; gap:10px; width:100%; max-width:42ch |
.cr-done-title |
margin:0; font-size:20px; font-weight:600; color:var(--cr-text-color,#1a1a2e) |
.cr-edit-review-btn |
background:transparent; color:var(--cr-button-color,#1a1a2e); border:1px solid var(--cr-button-color,#1a1a2e); font-weight:500 |
.cr-empty-icon |
font-size:3rem |
.cr-empty-star |
background:none; border:0; padding:2px; margin:0 |
.cr-empty-star-on |
opacity:1 |
.cr-empty-stars |
display:flex; justify-content:center; gap:8px |
.cr-empty-state |
text-align:center; padding:3rem 1rem; background:var(--cr-empty-bg,#faf9f7); border-radius:8px |
.cr-empty-subtitle |
font-size:var(--cr-body-size,16px); color:var(--cr-text-muted,#666); margin:0 0 2rem |
.cr-empty-title |
font-size:calc(var(--cr-body-size,16px) + 4px); font-weight:700; color:var(--cr-text-color,#1a1a2e); margin:0 0 0.75rem |
.cr-error-actions |
display:flex; gap:12px; justify-content:center |
.cr-error-icon |
color:var(--cr-text-muted,#999) |
.cr-error-message |
background:var(--cr-toast-error-bg,#fee2e2); color:var(--cr-toast-error-text,#991b1b) |
.cr-error-state |
text-align:center; padding:3rem 1rem; background:var(--cr-empty-bg,#faf9f7); border-radius:8px |
.cr-error-subtitle |
font-size:var(--cr-body-size,16px); color:var(--cr-text-muted,#666); margin:0 0 1.5rem |
.cr-error-title |
font-size:calc(var(--cr-body-size,16px) + 2px); font-weight:600; color:var(--cr-text-color,#1a1a2e); margin:0 0 0.5rem |
.cr-field-error |
display:none; align-items:flex-start; gap:6px; margin:0 |
.cr-field-error-icon |
|
.cr-form-footer |
display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--cr-border-color,#e5e5e5) |
.cr-form-group |
display:flex; gap:6px |
.cr-form-half |
flex:1 |
.cr-form-hint |
font-size:13px; color:var(--cr-text-muted,#666) |
.cr-form-label |
padding:0; font-size:15px; font-weight:600; color:var(--cr-text-color,#1a1a2e) |
.cr-form-row |
display:flex; gap:16px |
.cr-has-questions |
display:flex |
.cr-header-actions |
justify-content:flex-end; padding:0.5rem 1rem; font-size:calc(var(--cr-body-size,16px) - 2px); display:flex |
.cr-hidden |
display:none |
.cr-invalid |
box-shadow:0 0 0 1px var(--cr-error-color,#e53e3e); border-radius:8px; padding:2px |
.cr-layout-grid |
display:grid; gap:1rem; border-bottom:none; border:1px solid var(--cr-border-color,#e5e5e5) |
.cr-lightbox |
position:fixed; background:rgba(0,0,0,0.9); display:flex; align-items:center |
.cr-lightbox-close |
position:absolute; background:none; border:none; color:white |
.cr-lightbox-film |
display:flex; gap:6px; max-width:100%; padding:4px |
.cr-lightbox-main |
max-width:90%; display:grid; gap:20px; align-items:stretch |
.cr-lightbox-nav |
position:absolute; background:rgba(255,255,255,0.2); border:none; color:white |
.cr-lightbox-next |
|
.cr-lightbox-panel |
background:#fff; border-radius:8px; padding:20px; color:#1a1a1a |
.cr-lightbox-panel-body |
margin:0 0 10px; font-size:14px |
.cr-lightbox-panel-date |
font-size:12px; color:#6d7175 |
.cr-lightbox-panel-head |
display:flex; align-items:center; gap:8px |
.cr-lightbox-panel-name |
font-weight:600; font-size:15px |
.cr-lightbox-panel-stars |
|
.cr-lightbox-panel-title |
margin:0 0 6px; font-weight:600; font-size:15px |
.cr-lightbox-panel-verified |
font-size:12px; font-weight:600; color:#0f5132; background:#dff3e6 |
.cr-lightbox-prev |
|
.cr-lightbox-stage |
display:flex; align-items:center; gap:12px; width:92% |
.cr-lightbox-thumb |
flex:0 0 auto; width:56px; height:56px; padding:0 |
.cr-lightbox-thumb-play |
position:absolute; width:20px; height:20px; background:rgba(0,0,0,0.6) |
.cr-lightbox-thumb-video |
position:relative |
.cr-lightbox-video |
display:block; width:100%; max-width:100% |
.cr-lightbox-video-player |
width:100% |
.cr-loading |
text-align:center; color:var(--cr-text-muted,#666); padding:3rem; font-size:var(--cr-body-size,16px) |
.cr-manage-actions |
display:flex; justify-content:flex-end; width:100% |
.cr-manage-email |
width:100%; padding:12px 14px; border:1px solid var(--cr-input-border,#d1d5db); border-radius:8px |
.cr-manage-form |
display:flex; gap:8px |
.cr-manage-modal |
position:fixed; display:flex; align-items:center; justify-content:center |
.cr-manage-review-link |
color:var(--cr-button-color,#1a1a2e); font-size:12px; background:none; border:none |
.cr-media-gallery |
padding:1rem 0; border-bottom:1px solid var(--cr-border-color,#e5e5e5) |
.cr-media-gallery-scroll |
display:flex; gap:8px; height:4px; background:transparent |
.cr-media-more-overlay |
position:absolute; background:rgba(0,0,0,0.55); display:flex; align-items:center |
.cr-media-on |
display:flex |
.cr-media-row |
display:flex; gap:24px; flex:1 |
.cr-media-thumb |
width:72px; height:72px; border-radius:6px; position:relative |
.cr-media-thumb-play |
position:absolute; width:28px; height:28px; background:rgba(0,0,0,0.6) |
.cr-modal-close |
position:absolute; background:none; border:none; color:var(--cr-text-muted,#666) |
.cr-modal-confirmed |
display:none |
.cr-modal-content |
position:relative; background:white; padding:32px 40px 40px; border-radius:16px |
.cr-modal-overlay |
display:block!important; position:absolute; background:var(--cr-overlay-bg,rgba(0,0,0,0.5)) |
.cr-modal-title |
font-size:22px; font-weight:600; margin:0 0 28px; text-align:center |
.cr-next-btn |
display:none; padding:12px 28px; background:var(--cr-button-color,#1a1a2e); border:1px solid var(--cr-button-color,#1a1a2e) |
.cr-optional |
color:var(--cr-text-muted,#999); font-weight:400; font-size:13px |
.cr-photo-container |
display:flex; gap:10px; align-items:flex-start |
.cr-photo-preview |
position:relative; width:80px; height:80px; border-radius:8px |
.cr-photo-previews |
display:flex; gap:10px |
.cr-photo-remove |
position:absolute; width:20px; height:20px; background:var(--cr-overlay-bg,rgba(0,0,0,0.6)) |
.cr-photo-section |
flex:1; display:none |
.cr-powered-by |
text-align:center; padding:1rem 0 0.5rem; font-size:12px; color:var(--cr-text-muted,#666) |
.cr-preview-actions |
display:flex; justify-content:space-between; align-items:center; gap:8px |
.cr-processing-spinner |
display:block!important; width:40px; height:40px; border:3px solid #e5e7eb |
.cr-processing-spinner-small |
display:block!important; width:20px; height:20px; border:2px solid #e5e7eb |
.cr-processing-text |
font-size:calc(var(--cr-body-size,16px) - 2px); color:var(--cr-text-muted,#666) |
.cr-qa-answer |
padding:1rem 1.25rem; background:var(--cr-bg-light,#f9fafb); border-radius:0 6px 6px 0 |
.cr-qa-answer-author |
font-weight:600; color:var(--cr-text-color,#1a1a2e) |
.cr-qa-answer-body |
font-size:var(--cr-body-size,16px); color:var(--cr-text-color,#1a1a2e); margin:0 0 0.625rem |
.cr-qa-answer-label |
font-size:calc(var(--cr-body-size,16px) - 3px); font-weight:700; color:var(--cr-text-muted,#666); text-transform:uppercase |
.cr-qa-answer-meta |
display:flex; align-items:center; gap:0.875rem; font-size:calc(var(--cr-body-size,16px) - 2px) |
.cr-qa-answers |
padding:0; margin:1.75rem 0 0 1.5rem |
.cr-qa-asker |
display:flex; align-items:center; gap:0.625rem; flex:1 |
.cr-qa-asker-name |
font-weight:600; color:var(--cr-text-color,#1a1a2e); font-size:calc(var(--cr-body-size,16px) - 1px) |
.cr-qa-avatar |
width:44px; height:44px; border-radius:50%; background:var(--cr-bg-muted,#f3f4f6) |
.cr-qa-date |
color:var(--cr-text-muted,#666); font-size:calc(var(--cr-body-size,16px) - 2px) |
.cr-qa-item |
border-bottom:1px solid var(--cr-border-color,#e5e5e5); padding:2rem 0 2.25rem |
.cr-qa-item-head |
display:flex; align-items:center; gap:0.75rem |
.cr-qa-list |
margin:0 |
.cr-qa-question-body |
font-size:var(--cr-body-size,16px); font-weight:600; color:var(--cr-text-color,#1a1a2e); margin:0 |
.cr-qa-store-badge |
display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px |
.cr-qa-verified |
display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 7px |
.cr-question-form |
display:none |
.cr-question-item |
border-bottom:none |
.cr-question-modal |
display:none |
.cr-rating-recap |
border-bottom:1px solid var(--cr-border-color,#e5e5e5); padding:0; width:24px; height:24px |
.cr-rating-summary |
display:flex; gap:3rem; padding:2rem 0 |
.cr-read-more |
padding:0; background:none; border:0; color:var(--cr-text-color,#1a1a2e) |
.cr-recommend-group |
border:0; padding:0; margin:0 |
.cr-recommend-input |
background:var(--cr-bg-muted,#f3f4f6); font-weight:600; margin:0; width:18px |
.cr-recommend-option |
display:flex; align-items:center; gap:8px; padding:10px 18px |
.cr-recommend-options |
display:flex; gap:10px |
.cr-recommend-pct |
color:var(--cr-text-color,#1a1a2e); font-weight:700 |
.cr-recording-controls |
display:flex; justify-content:space-between; align-items:center |
.cr-recording-dot |
width:12px; height:12px; background:var(--cr-danger-color,#dc2626); border-radius:50% |
.cr-recording-indicator |
display:flex; align-items:center; gap:8px; color:var(--cr-danger-color,#dc2626) |
.cr-remove-video-btn |
display:flex; align-items:center; gap:4px; padding:6px 12px |
.cr-required |
color:var(--cr-error-color,#e53e3e) |
.cr-required-note |
font-size:13px; color:var(--cr-text-muted,#666); display:none |
.cr-retry-btn |
display:inline-block; padding:0.75rem 2rem; background:transparent; border:2px solid var(--cr-button-color,#1a1a2e) |
.cr-review |
display:grid; gap:2.5rem; border-bottom:1px solid var(--cr-border-color,#e5e5e5); padding:2rem 0 |
.cr-review-author |
display: none; font-weight:600; color:var(--cr-text-color,#1a1a2e); font-size:calc(var(--cr-body-size,16px) - 1px) |
.cr-review-author-line |
display:flex; align-items:center; gap:0.75rem |
.cr-review-avatar |
width:44px; height:44px; border-radius:50%; background:var(--cr-bg-muted,#f3f4f6) |
.cr-review-body |
display: none; color:var(--cr-text-color,#1a1a2e); font-size:var(--cr-body-size,16px); margin:0 |
.cr-review-body-clamped |
display:-webkit-box |
.cr-review-body-container |
|
.cr-review-content |
|
.cr-review-customer |
display:flex; gap:0.875rem; align-items:center |
.cr-review-customer-details |
display:flex; gap:4px |
.cr-review-customer-head |
display:flex; align-items:center; gap:0.75rem |
.cr-review-date |
color:var(--cr-text-muted,#666); font-size:calc(var(--cr-body-size,16px) - 2px) |
.cr-review-form |
display:flex; gap:24px; width:100%; padding:12px 14px |
.cr-review-header |
display:flex; align-items:center; justify-content:space-between; gap:1rem |
.cr-review-incentivized |
display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px |
.cr-review-meta |
display:flex; align-items:center; gap:0.5rem |
.cr-review-modal |
position:fixed; display:flex; align-items:center; justify-content:center |
.cr-review-photo |
width:60px; height:60px; border-radius:6px |
.cr-review-photos |
display:flex; gap:0.5rem |
.cr-review-pinned |
display:inline-flex; color:var(--cr-text-muted,#666) |
.cr-review-recommends |
display:flex; align-items:center; gap:6px; color:var(--cr-text-color,#1a1a2e) |
.cr-review-stars |
color:var(--cr-star-color,#FFC107); font-size:calc(var(--cr-body-size,16px) + 4px); letter-spacing:3px; display:inline-flex |
.cr-review-title |
display: none; font-weight:700; color:var(--cr-text-color,#1a1a2e); margin:0 0 0.75rem |
.cr-review-verified |
display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 7px |
.cr-review-video |
|
.cr-review-video-player |
width:100%; border-radius:8px; background:#000 |
.cr-review-votes |
display:flex; align-items:center |
.cr-search-icon |
position:absolute; color:var(--cr-text-muted,#999) |
.cr-search-input |
width:100%; padding:6px 10px 6px 32px; border:1px solid var(--cr-input-border,#d1d5db); border-radius:6px |
.cr-search-wrap |
position:relative; display:flex; align-items:center |
.cr-share-code |
flex:1 1 auto; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:15px; font-weight:600 |
.cr-share-code-row |
display:flex; gap:8px; align-items:stretch |
.cr-share-copy |
flex:0 0 auto; padding:0 16px; border:1px solid #d1d5db; border-radius:8px |
.cr-share-lead |
margin:0; font-size:13px; color:#4a4a4a |
.cr-share-links |
display:flex; gap:8px; justify-content:center; align-items:center |
.cr-show-more |
text-align:center; padding:2rem 0 |
.cr-show-more-btn |
display:inline-block; padding:0.75rem 2rem; background:transparent; border:1px solid var(--cr-border-color,#e5e5e5) |
.cr-sort-select |
padding:6px 28px 6px 10px; border:1px solid var(--cr-input-border,#d1d5db); border-radius:6px; font-size:calc(var(--cr-body-size,16px) - 2px) |
.cr-sr-only |
position:absolute; width:1px; height:1px; padding:0 |
.cr-star-btn |
background:none; border:0; padding:2px; margin:0 |
.cr-star-btn-on |
opacity:1 |
.cr-star-input |
display:flex; gap:4px; border-radius:8px; box-shadow:0 0 0 2px var(--cr-error-color,#e53e3e) |
.cr-state-empty |
text-align:center; display:none |
.cr-step |
display:none |
.cr-step-active |
display:none; gap:24px |
.cr-step-count |
display:none |
.cr-step-done |
align-items:center; text-align:center; gap:14px; padding:8px 0 0 |
.cr-step-dot |
display:none; width:8px; height:8px; border-radius:50% |
.cr-step-dot-active |
display:none; background:var(--cr-button-color,#1a1a2e) |
.cr-step-dot-done |
display:none; background:var(--cr-border-color,#e5e5e5) |
.cr-step-dots |
display:flex; gap:6px |
.cr-step-progress |
display:none; align-items:center; justify-content:center; margin:-12px 0 4px |
.cr-stop-recording-btn |
display:flex; align-items:center; gap:8px; padding:8px 16px |
.cr-store-response |
padding:1rem 1.25rem; background:var(--cr-bg-light,#f9fafb); border-radius:0 6px 6px 0 |
.cr-store-response-body |
color:var(--cr-text-color,#1a1a2e); margin:0; font-size:var(--cr-body-size,16px) |
.cr-store-response-date |
font-size:13px; color:#999 |
.cr-store-response-header |
display:flex; align-items:center; gap:0.5rem |
.cr-store-response-label |
font-size:13px; font-weight:600; color:var(--cr-text-muted,#666); text-transform:uppercase |
.cr-submit-btn |
padding:12px 32px; background:var(--cr-button-color,#1a1a2e); color:white; border:none |
.cr-success-message |
background:var(--cr-toast-bg,#dcfce7); color:var(--cr-toast-text,#166534); padding:1rem; border-radius:8px |
.cr-summary-count |
font-size:calc(var(--cr-body-size,16px) - 2px); font-weight:400; color:var(--cr-text-muted,#666) |
.cr-summary-left |
text-align:center; margin:0; font-size:calc(var(--cr-body-size,16px) - 2px); color:var(--cr-text-muted,#666) |
.cr-summary-media |
max-width:100%; flex:0 0 200px |
.cr-summary-media-grid |
display:grid; gap:4px |
.cr-summary-media-item |
background:var(--cr-border-color,#e5e5e5); opacity:0.35; position:relative; border-radius:6px |
.cr-summary-media-reserved |
background:var(--cr-border-color,#e5e5e5); opacity:0.35 |
.cr-summary-recommend |
margin:0; text-align:right; font-size:calc(var(--cr-body-size,16px) - 2px); color:var(--cr-text-muted,#666) |
.cr-summary-right |
flex:1; max-width:400px |
.cr-summary-score |
font-size:calc(var(--cr-body-size,16px) + 30px); font-weight:700; color:var(--cr-text-color,#1a1a2e) |
.cr-summary-stars |
display:flex; justify-content:center; align-items:center; gap:3px |
.cr-tab |
padding:0.75rem 0.5rem; font-size:calc(var(--cr-body-size,16px) - 1px); background:none; border:none |
.cr-tab-active |
color:var(--cr-text-color,#1a1a2e) |
.cr-tab-count |
font-weight:400; font-size:0.8em; color:var(--cr-text-muted,#666) |
.cr-tabs |
display:flex; gap:3rem; padding:2rem 0; align-items:stretch |
.cr-tabs-left |
justify-content:flex-start; display:flex; gap:0 |
.cr-tmpl-compact |
display:flex; align-items:center; gap:0.5rem; margin:0 |
.cr-toast |
background:var(--cr-toast-error-bg,#fee2e2); color:var(--cr-toast-error-text,#991b1b) |
.cr-toast-error |
background:var(--cr-toast-error-bg,#fee2e2); color:var(--cr-toast-error-text,#991b1b) |
.cr-toolbar |
align-items:stretch; display:flex; justify-content:space-between; gap:1rem |
.cr-toolbar-label |
font-size:calc(var(--cr-body-size,16px) - 2px); color:var(--cr-text-muted,#666) |
.cr-toolbar-left |
justify-content:space-between; display:flex; align-items:center; gap:0.5rem |
.cr-toolbar-right |
display:flex; align-items:center |
.cr-upload-progress |
width:100%; height:8px; background:#e5e7eb; border-radius:4px |
.cr-upload-progress-bar |
display:block!important; height:100%; background:var(--cr-button-color,#1a1a2e); border-radius:4px |
.cr-upload-status |
font-size:14px; color:var(--cr-text-muted,#666) |
.cr-video-add-buttons |
display:flex; gap:10px |
.cr-video-btn |
display:flex; align-items:center; gap:8px; padding:10px 16px |
.cr-video-container |
border-radius:8px; padding:0 |
.cr-video-duration |
position:absolute; background:rgba(0,0,0,0.7); color:white; padding:0.25rem 0.5rem |
.cr-video-filename |
font-size:14px; color:var(--cr-text-muted,#666) |
.cr-video-live-preview |
width:100%; border-radius:6px; background:#000 |
.cr-video-play-btn |
position:absolute; width:64px; height:64px; background:var(--cr-overlay-bg,rgba(0,0,0,0.6)) |
.cr-video-player-wrap |
position:relative; display:inline-block; max-width:400px; width:100% |
.cr-video-preview |
position:relative |
.cr-video-preview-player |
width:100%; border-radius:6px; background:#000 |
.cr-video-processing |
display:flex; align-items:center; gap:12px; padding:16px |
.cr-video-processing-display |
display:flex; align-items:center; gap:8px; padding:12px 16px |
.cr-video-recording |
position:relative |
.cr-video-section |
flex:1; display:none |
.cr-video-uploading |
text-align:center |
.cr-vote-btn |
display:inline-flex; align-items:center; justify-content:center; gap:5px |
.cr-vote-label |
color:var(--cr-text-muted,#666); font-size:calc(var(--cr-body-size,16px) - 3px) |
.cr-write-review-btn |
display:inline-block; padding:1rem 2.5rem; background:var(--cr-button-color,#1a1a2e); border:1px solid var(--cr-button-color,#1a1a2e) |
| Variable | Currently | Changes | Set by | To override |
|---|---|---|---|---|
--cr-card-bg |
set in the editor |
Card Background
used by 4 rules |
Theme editor | plain CSS |
--cr-card-border |
set in the editor |
Card Border
used by 5 rules |
Theme editor | plain CSS |
--cr-text-primary |
set in the editor |
Text Color
used by 9 rules |
Theme editor | plain CSS |
--cr-text-secondary |
#666 |
Secondary Text
used by 8 rules |
Theme editor | plain CSS |
--cr-star-color |
set in the editor | Sc | App settings | plain CSS |
--cr-accent-bg |
unset | Bg | Widget builder | plain CSS |
--cr-disclosure-bg |
rgba(0, 0, 0, 0.06 | Bg | Widget builder | plain CSS |
--cr-disclosure-text |
#5c5c5c | Text | Widget builder | plain CSS |
--cr-focus-color |
currentColor | Color | Widget builder | plain CSS |
--cr-focus-offset |
2px | Offset | Widget builder | plain CSS |
--cr-focus-width |
2px | Width | Widget builder | plain CSS |
--cr-gap |
unset | Cr gap | Widget builder | plain CSS |
--cr-radius |
unset |
Cr radius
used by 4 rules |
Widget builder | plain CSS |
--cr-row-span |
20 | Span | Widget builder | plain CSS |
--cr-showcase-heading-align |
left | Heading align | Widget builder | plain CSS |
--cr-showcase-heading-color |
var(--cr-text-primary | Heading color | Widget builder | plain CSS |
--cr-showcase-heading-size |
24px | Heading size | Widget builder | plain CSS |
--cr-showcase-heading-weight |
600 | Heading weight | Widget builder | plain CSS |
--cr-showcase-max-width |
none | Max width | Widget builder | plain CSS |
| Class | What it styles |
|---|---|
.cr-dynamic-slide |
flex: 0 0 100%; padding: 0 2rem; display: grid; gap: 1.5rem |
.cr-dynamic-slide--photos |
height: 100%; width: auto |
.cr-dynamic-slide--text-only |
max-width: 600px; margin: 0 auto; padding: 2.5rem; font-size: 18px |
.cr-dynamic-slide--video |
|
.cr-dynamic__author |
display: flex; align-items: center; gap: 0.75rem; border-top: 1px solid var(--cr-card-border) |
.cr-dynamic__author-name |
font-size: 14px; font-weight: 600; color: var(--cr-text-primary) |
.cr-dynamic__author-product |
font-size: 12px; color: var(--cr-text-secondary) |
.cr-dynamic__avatar |
width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) |
.cr-dynamic__body |
flex: 1; font-size: 16px; color: var(--cr-text-primary); display: -webkit-box |
.cr-dynamic__dot |
width: 8px; height: 8px; border-radius: 4px; background: var(--cr-text-secondary) |
.cr-dynamic__dots |
display: flex; justify-content: center; gap: 8px |
.cr-dynamic__media-grid |
display: grid; gap: 0.75rem |
.cr-dynamic__media-item |
position: relative; border-radius: 12px; background: #f0f0f0; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) |
.cr-dynamic__nav |
position: absolute; width: 44px; height: 44px; background: white |
.cr-dynamic__nav--next |
|
.cr-dynamic__nav--prev |
|
.cr-dynamic__play-btn |
position: absolute; width: 56px; height: 56px; background: rgba(255, 255, 255, 0.95) |
.cr-dynamic__play-btn--large |
width: 80px; height: 80px |
.cr-dynamic__quote |
font-size: 48px; color: var(--cr-star-color); opacity: 0.4; font-family: Georgia, serif |
.cr-dynamic__review-panel |
display: flex; background: var(--cr-card-bg); border-radius: var(--cr-radius); padding: 1.75rem |
.cr-dynamic__stars |
display: flex; gap: 2px; align-items: center |
.cr-dynamic__video-duration |
position: absolute; background: rgba(0, 0, 0, 0.75); color: white; padding: 4px 8px |
.cr-dynamic__video-main |
position: relative; border-radius: 16px; height: 100% |
.cr-dynamic__video-overlay |
position: absolute; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 50%) |
.cr-dynamic__video-player |
width: 100%; height: 100%; border-radius: 16px; background: #000 |
.cr-dynamic__video-thumb |
position: relative; width: 100%; height: 100%; background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%) |
.cr-lightbox__close |
position: absolute; width: 40px; height: 40px; background: transparent |
.cr-lightbox__content |
max-width: 90vw |
.cr-lightbox__nav |
position: absolute; background: transparent; border: none; color: white |
.cr-lightbox__nav--next |
|
.cr-lightbox__nav--prev |
|
.cr-powered-by |
text-align: center; padding: 1rem 0 0.5rem; font-size: 12px; color: var(--cr-text-secondary, #666) |
.cr-review-card |
background: var(--cr-card-bg); border: 1px solid var(--cr-card-border); border-radius: var(--cr-radius); padding: 1.25rem |
.cr-review-card__author |
display: flex; align-items: center; gap: 0.5rem |
.cr-review-card__author-info |
display: flex |
.cr-review-card__author-name |
font-size: 13px; font-weight: 500; color: var(--cr-text-primary) |
.cr-review-card__avatar |
width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) |
.cr-review-card__body |
font-size: 14px; color: var(--cr-text-secondary); display: -webkit-box |
.cr-review-card__footer |
display: flex; align-items: center; justify-content: space-between; gap: 0.75rem |
.cr-review-card__incentivized |
display: inline-flex; align-items: center; background: var(--cr-disclosure-bg, rgba(0, 0, 0, 0.06)); color: var(--cr-disclosure-text, #5c5c5c) |
.cr-review-card__media |
display: flex; gap: 0.5rem |
.cr-review-card__meta |
display: flex; align-items: center; gap: 0.5rem; font-size: 12px |
.cr-review-card__photo |
width: 60px; height: 60px; border-radius: 8px; opacity: 0.85 |
.cr-review-card__product |
font-size: 12px; color: var(--cr-text-secondary) |
.cr-review-card__stars |
display: flex; gap: 1px; align-items: center |
.cr-review-card__title |
font-size: 16px; font-weight: 600; color: var(--cr-text-primary); margin: 0 0 0.5rem 0 |
.cr-review-card__verified |
display: inline-flex; align-items: center; gap: 0.25rem; background: #dcfce7 |
.cr-review-card__video |
position: relative; width: 100px; height: 60px; border-radius: 8px |
.cr-review-card__video-play |
position: absolute; width: 32px; height: 32px; background: rgba(0, 0, 0, 0.6) |
.cr-review-card__video-thumb |
width: 100%; height: 100% |
.cr-showcase |
max-width: var(--cr-showcase-max-width, none) |
.cr-showcase--carousel |
flex: 0 0 calc(33.333% - 0.67rem) |
.cr-showcase--compact |
display: -webkit-box |
.cr-showcase--dynamic |
display: none; background: var(--cr-accent-bg); border-radius: var(--cr-radius); padding: 2rem 0 |
.cr-showcase--featured |
display: grid |
.cr-showcase--full-width |
max-width: var(--cr-showcase-max-width, none); width: 100vw |
.cr-showcase--grid |
display: grid |
.cr-showcase--masonry |
display: grid |
.cr-showcase--standard |
display: -webkit-box |
.cr-showcase--stories |
justify-content: center; text-align: center; display: none; position: relative |
.cr-showcase-lightbox |
position: fixed; background: rgba(0, 0, 0, 0.9); display: none; align-items: center |
.cr-showcase__content |
position: relative; background: var(--cr-accent-bg); border-radius: var(--cr-radius); padding: 2rem 0 |
.cr-showcase__empty |
text-align: center; padding: 3rem 1rem; color: var(--cr-text-secondary) |
.cr-showcase__header |
display: flex; align-items: center; justify-content: space-between; gap: 1rem |
.cr-showcase__nav |
position: absolute; width: 40px; height: 40px; background: var(--cr-card-bg) |
.cr-showcase__nav--next |
|
.cr-showcase__nav--prev |
|
.cr-showcase__overall |
display: none; align-items: center; gap: 0.5rem |
.cr-showcase__overall-stars |
display: flex; gap: 2px; align-items: center |
.cr-showcase__overall-text |
font-size: 14px; color: var(--cr-text-secondary) |
.cr-showcase__title |
flex: 1; font-size: var(--cr-showcase-heading-size, 24px); font-weight: var(--cr-showcase-heading-weight, 600); color: var(--cr-showcase-heading-color, var(--cr-text-primary)) |
.cr-showcase__track |
display: flex; gap: var(--cr-gap); padding: 0 64px 0 4px |
.cr-skeleton-author |
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); border-radius: 8px; width: 120px; height: 14px |
.cr-skeleton-body |
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); border-radius: 8px; width: 100%; height: 60px |
.cr-skeleton-card |
background: var(--cr-card-bg); border: 1px solid var(--cr-card-border); border-radius: var(--cr-radius); padding: 1.25rem |
.cr-skeleton-carousel |
display: flex; gap: 1rem; flex: 0 0 calc(33.333% - 0.67rem) |
.cr-skeleton-dynamic |
background: var(--cr-card-bg); border: 1px solid var(--cr-card-border); border-radius: var(--cr-radius); padding: 1.25rem |
.cr-skeleton-featured |
display: grid; gap: 1rem; height: 150px |
.cr-skeleton-grid |
display: grid; gap: 1rem |
.cr-skeleton-masonry |
display: grid; gap: 1rem; height: 120px |
.cr-skeleton-media |
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); border-radius: 8px |
.cr-skeleton-media-grid |
display: grid; gap: 0.75rem |
.cr-skeleton-quote |
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); border-radius: 8px; width: 48px; height: 36px |
.cr-skeleton-review-panel |
display: flex; gap: 1rem |
.cr-skeleton-side |
display: flex; gap: 1rem |
.cr-skeleton-stars |
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); border-radius: 8px; width: 100px; height: 18px |
.cr-skeleton-stories |
display: flex; gap: 16px |
.cr-skeleton-story |
flex: 0 0 285px; border-radius: 12px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); position: relative |
.cr-skeleton-story-author |
background: rgba(255, 255, 255, 0.3); border-radius: 4px; width: 120px; height: 28px |
.cr-skeleton-story-overlay |
position: absolute; padding: 16px |
.cr-skeleton-story-stars |
background: rgba(255, 255, 255, 0.3); border-radius: 4px; width: 80px; height: 14px |
.cr-skeleton-story-text |
background: rgba(255, 255, 255, 0.3); border-radius: 4px; width: 100%; height: 40px |
.cr-skeleton-story-video |
width: 100%; height: 100% |
.cr-skeleton-title |
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); border-radius: 8px; width: 80%; height: 18px |
.cr-story-card |
flex: 0 0 285px; max-width: 285px; border-radius: 12px; position: relative |
.cr-story-card__author |
display: flex; align-items: center; gap: 8px |
.cr-story-card__author-name |
font-size: 12px; font-weight: 500; opacity: 0.95 |
.cr-story-card__avatar |
width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) |
.cr-story-card__body |
display: none; font-size: 12px |
.cr-story-card__duration |
position: absolute; background: rgba(0, 0, 0, 0.7); color: white; padding: 4px 8px |
.cr-story-card__media |
position: absolute; width: 100%; height: 100%; background: transparent |
.cr-story-card__overlay |
display: none; padding: 80px 12px 16px |
.cr-story-card__play |
position: absolute; width: 72px; height: 72px; background-color: rgba(232, 104, 64, 0.7) |
.cr-story-card__stars |
display: flex; gap: 1px; align-items: center |
.cr-story-card__video-badge |
display: none |
| Variable | Currently | Changes | Set by | To override |
|---|---|---|---|---|
--cr-accent-bg |
set in the editor | Accent Background | Theme editor | plain CSS |
--cr-card-bg |
set in the editor |
Card Background
used by 4 rules |
Theme editor | plain CSS |
--cr-card-border |
set in the editor |
Card Border
used by 5 rules |
Theme editor | plain CSS |
--cr-text-primary |
set in the editor |
Text Color
used by 9 rules |
Theme editor | plain CSS |
--cr-text-secondary |
#666 |
Secondary Text
used by 8 rules |
Theme editor | plain CSS |
--cr-star-color |
set in the editor | Star color | App settings | plain CSS |
--cr-disclosure-bg |
rgba(0, 0, 0, 0.06 | Bg | Widget builder | plain CSS |
--cr-disclosure-text |
#5c5c5c | Text | Widget builder | plain CSS |
--cr-focus-color |
currentColor | Color | Widget builder | plain CSS |
--cr-focus-offset |
2px | Offset | Widget builder | plain CSS |
--cr-focus-width |
2px | Width | Widget builder | plain CSS |
--cr-gap |
unset | Cr gap | Widget builder | plain CSS |
--cr-radius |
unset |
Cr radius
used by 4 rules |
Widget builder | plain CSS |
--cr-row-span |
20 | Span | Widget builder | plain CSS |
--cr-showcase-heading-align |
left | Heading align | Widget builder | plain CSS |
--cr-showcase-heading-color |
var(--cr-text-primary | Heading color | Widget builder | plain CSS |
--cr-showcase-heading-size |
24px | Heading size | Widget builder | plain CSS |
--cr-showcase-heading-weight |
600 | Heading weight | Widget builder | plain CSS |
--cr-showcase-max-width |
none | Max width | Widget builder | plain CSS |
| Class | What it styles |
|---|---|
.cr-dynamic-slide |
flex: 0 0 100%; padding: 0 2rem; display: grid; gap: 1.5rem |
.cr-dynamic-slide--photos |
height: 100%; width: auto |
.cr-dynamic-slide--text-only |
max-width: 600px; margin: 0 auto; padding: 2.5rem; font-size: 18px |
.cr-dynamic-slide--video |
|
.cr-dynamic__author |
display: flex; align-items: center; gap: 0.75rem; border-top: 1px solid var(--cr-card-border) |
.cr-dynamic__author-name |
font-size: 14px; font-weight: 600; color: var(--cr-text-primary) |
.cr-dynamic__author-product |
font-size: 12px; color: var(--cr-text-secondary) |
.cr-dynamic__avatar |
width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) |
.cr-dynamic__body |
flex: 1; font-size: 16px; color: var(--cr-text-primary); display: -webkit-box |
.cr-dynamic__dot |
width: 8px; height: 8px; border-radius: 4px; background: var(--cr-text-secondary) |
.cr-dynamic__dots |
display: flex; justify-content: center; gap: 8px |
.cr-dynamic__media-grid |
display: grid; gap: 0.75rem |
.cr-dynamic__media-item |
position: relative; border-radius: 12px; background: #f0f0f0; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) |
.cr-dynamic__nav |
position: absolute; width: 44px; height: 44px; background: white |
.cr-dynamic__nav--next |
|
.cr-dynamic__nav--prev |
|
.cr-dynamic__play-btn |
position: absolute; width: 56px; height: 56px; background: rgba(255, 255, 255, 0.95) |
.cr-dynamic__play-btn--large |
width: 80px; height: 80px |
.cr-dynamic__quote |
font-size: 48px; color: var(--cr-star-color); opacity: 0.4; font-family: Georgia, serif |
.cr-dynamic__review-panel |
display: flex; background: var(--cr-card-bg); border-radius: var(--cr-radius); padding: 1.75rem |
.cr-dynamic__stars |
display: flex; gap: 2px; align-items: center |
.cr-dynamic__video-duration |
position: absolute; background: rgba(0, 0, 0, 0.75); color: white; padding: 4px 8px |
.cr-dynamic__video-main |
position: relative; border-radius: 16px; height: 100% |
.cr-dynamic__video-overlay |
position: absolute; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 50%) |
.cr-dynamic__video-player |
width: 100%; height: 100%; border-radius: 16px; background: #000 |
.cr-dynamic__video-thumb |
position: relative; width: 100%; height: 100%; background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%) |
.cr-lightbox__close |
position: absolute; width: 40px; height: 40px; background: transparent |
.cr-lightbox__content |
max-width: 90vw |
.cr-lightbox__nav |
position: absolute; background: transparent; border: none; color: white |
.cr-lightbox__nav--next |
|
.cr-lightbox__nav--prev |
|
.cr-powered-by |
text-align: center; padding: 1rem 0 0.5rem; font-size: 12px; color: var(--cr-text-secondary, #666) |
.cr-review-card |
background: var(--cr-card-bg); border: 1px solid var(--cr-card-border); border-radius: var(--cr-radius); padding: 1.25rem |
.cr-review-card__author |
display: flex; align-items: center; gap: 0.5rem |
.cr-review-card__author-info |
display: flex |
.cr-review-card__author-name |
font-size: 13px; font-weight: 500; color: var(--cr-text-primary) |
.cr-review-card__avatar |
width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) |
.cr-review-card__body |
font-size: 14px; color: var(--cr-text-secondary); display: -webkit-box |
.cr-review-card__footer |
display: flex; align-items: center; justify-content: space-between; gap: 0.75rem |
.cr-review-card__incentivized |
display: inline-flex; align-items: center; background: var(--cr-disclosure-bg, rgba(0, 0, 0, 0.06)); color: var(--cr-disclosure-text, #5c5c5c) |
.cr-review-card__media |
display: flex; gap: 0.5rem |
.cr-review-card__meta |
display: flex; align-items: center; gap: 0.5rem; font-size: 12px |
.cr-review-card__photo |
width: 60px; height: 60px; border-radius: 8px; opacity: 0.85 |
.cr-review-card__product |
font-size: 12px; color: var(--cr-text-secondary) |
.cr-review-card__stars |
display: flex; gap: 1px; align-items: center |
.cr-review-card__title |
font-size: 16px; font-weight: 600; color: var(--cr-text-primary); margin: 0 0 0.5rem 0 |
.cr-review-card__verified |
display: inline-flex; align-items: center; gap: 0.25rem; background: #dcfce7 |
.cr-review-card__video |
position: relative; width: 100px; height: 60px; border-radius: 8px |
.cr-review-card__video-play |
position: absolute; width: 32px; height: 32px; background: rgba(0, 0, 0, 0.6) |
.cr-review-card__video-thumb |
width: 100%; height: 100% |
.cr-showcase |
max-width: var(--cr-showcase-max-width, none) |
.cr-showcase--carousel |
flex: 0 0 calc(33.333% - 0.67rem) |
.cr-showcase--compact |
display: -webkit-box |
.cr-showcase--dynamic |
display: none; background: var(--cr-accent-bg); border-radius: var(--cr-radius); padding: 2rem 0 |
.cr-showcase--featured |
display: grid |
.cr-showcase--full-width |
max-width: var(--cr-showcase-max-width, none); width: 100vw |
.cr-showcase--grid |
display: grid |
.cr-showcase--masonry |
display: grid |
.cr-showcase--standard |
display: -webkit-box |
.cr-showcase--stories |
justify-content: center; text-align: center; display: none; position: relative |
.cr-showcase-lightbox |
position: fixed; background: rgba(0, 0, 0, 0.9); display: none; align-items: center |
.cr-showcase__content |
position: relative; background: var(--cr-accent-bg); border-radius: var(--cr-radius); padding: 2rem 0 |
.cr-showcase__empty |
text-align: center; padding: 3rem 1rem; color: var(--cr-text-secondary) |
.cr-showcase__header |
display: flex; align-items: center; justify-content: space-between; gap: 1rem |
.cr-showcase__nav |
position: absolute; width: 40px; height: 40px; background: var(--cr-card-bg) |
.cr-showcase__nav--next |
|
.cr-showcase__nav--prev |
|
.cr-showcase__overall |
display: none; align-items: center; gap: 0.5rem |
.cr-showcase__overall-stars |
display: flex; gap: 2px; align-items: center |
.cr-showcase__overall-text |
font-size: 14px; color: var(--cr-text-secondary) |
.cr-showcase__title |
flex: 1; font-size: var(--cr-showcase-heading-size, 24px); font-weight: var(--cr-showcase-heading-weight, 600); color: var(--cr-showcase-heading-color, var(--cr-text-primary)) |
.cr-showcase__track |
display: flex; gap: var(--cr-gap); padding: 0 64px 0 4px |
.cr-skeleton-author |
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); border-radius: 8px; width: 120px; height: 14px |
.cr-skeleton-body |
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); border-radius: 8px; width: 100%; height: 60px |
.cr-skeleton-card |
background: var(--cr-card-bg); border: 1px solid var(--cr-card-border); border-radius: var(--cr-radius); padding: 1.25rem |
.cr-skeleton-carousel |
display: flex; gap: 1rem; flex: 0 0 calc(33.333% - 0.67rem) |
.cr-skeleton-dynamic |
background: var(--cr-card-bg); border: 1px solid var(--cr-card-border); border-radius: var(--cr-radius); padding: 1.25rem |
.cr-skeleton-featured |
display: grid; gap: 1rem; height: 150px |
.cr-skeleton-grid |
display: grid; gap: 1rem |
.cr-skeleton-masonry |
display: grid; gap: 1rem; height: 120px |
.cr-skeleton-media |
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); border-radius: 8px |
.cr-skeleton-media-grid |
display: grid; gap: 0.75rem |
.cr-skeleton-quote |
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); border-radius: 8px; width: 48px; height: 36px |
.cr-skeleton-review-panel |
display: flex; gap: 1rem |
.cr-skeleton-side |
display: flex; gap: 1rem |
.cr-skeleton-stars |
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); border-radius: 8px; width: 100px; height: 18px |
.cr-skeleton-stories |
display: flex; gap: 16px |
.cr-skeleton-story |
flex: 0 0 285px; border-radius: 12px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); position: relative |
.cr-skeleton-story-author |
background: rgba(255, 255, 255, 0.3); border-radius: 4px; width: 120px; height: 28px |
.cr-skeleton-story-overlay |
position: absolute; padding: 16px |
.cr-skeleton-story-stars |
background: rgba(255, 255, 255, 0.3); border-radius: 4px; width: 80px; height: 14px |
.cr-skeleton-story-text |
background: rgba(255, 255, 255, 0.3); border-radius: 4px; width: 100%; height: 40px |
.cr-skeleton-story-video |
width: 100%; height: 100% |
.cr-skeleton-title |
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); border-radius: 8px; width: 80%; height: 18px |
.cr-story-card |
flex: 0 0 285px; max-width: 285px; border-radius: 12px; position: relative |
.cr-story-card__author |
display: flex; align-items: center; gap: 8px |
.cr-story-card__author-name |
font-size: 12px; font-weight: 500; opacity: 0.95 |
.cr-story-card__avatar |
width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) |
.cr-story-card__body |
display: none; font-size: 12px |
.cr-story-card__duration |
position: absolute; background: rgba(0, 0, 0, 0.7); color: white; padding: 4px 8px |
.cr-story-card__media |
position: absolute; width: 100%; height: 100%; background: transparent |
.cr-story-card__overlay |
display: none; padding: 80px 12px 16px |
.cr-story-card__play |
position: absolute; width: 72px; height: 72px; background-color: rgba(232, 104, 64, 0.7) |
.cr-story-card__stars |
display: flex; gap: 1px; align-items: center |
.cr-story-card__video-badge |
display: none |
| Variable | Currently | Changes | Set by | To override |
|---|---|---|---|---|
--cr-disclosure-text |
#5c5c5c | Text | Widget builder | plain CSS |
--cr-display-time |
5s | Time | Widget builder | plain CSS |
--cr-focus-color |
currentColor | Color | Widget builder | plain CSS |
--cr-focus-offset |
2px | Offset | Widget builder | plain CSS |
--cr-focus-width |
2px | Width | Widget builder | plain CSS |
--cr-popup-bg |
#fff | Bg | Widget builder | plain CSS |
--cr-popup-radius |
12px |
Radius
used by 5 rules |
Widget builder | plain CSS |
--cr-popup-star |
#FFC107 | Star | Widget builder | plain CSS |
--cr-popup-text |
#202223 |
Text
used by 5 rules |
Widget builder | plain CSS |
| Class | What it styles |
|---|---|
.cr-social-proof |
position: fixed; opacity: 0; font-family:inherit; max-width: 380px |
.cr-social-proof__avatar |
width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) |
.cr-social-proof__body |
font-size: 13px; color: var(--cr-popup-text, #202223); opacity: 0.85; display: -webkit-box |
.cr-social-proof__clickable |
|
.cr-social-proof__close |
width: 28px; height: 28px; background: transparent; border: none |
.cr-social-proof__content |
display: flex; align-items: flex-start; gap: 12px; background: var(--cr-popup-bg, #fff) |
.cr-social-proof__image |
width: 52px; height: 52px; border-radius: 8px; background: #f3f4f6 |
.cr-social-proof__incentivized |
color: var(--cr-disclosure-text, #5c5c5c); font-weight: 600; opacity: 1 |
.cr-social-proof__info |
flex: 1 |
.cr-social-proof__meta |
font-size: 11px; color: var(--cr-popup-text, #202223); opacity: 0.5; display: flex |
.cr-social-proof__product |
font-size: 12px; color: var(--cr-popup-text, #202223); opacity: 0.6 |
.cr-social-proof__progress |
height: 3px; background: rgba(0,0,0,0.06); border-radius: 0 0 var(--cr-popup-radius, 12px) var(--cr-popup-radius, 12px) |
.cr-social-proof__progress-fill |
height: 100%; background: var(--cr-popup-star, #FFC107); border-radius: inherit |
.cr-social-proof__star-icon |
|
.cr-social-proof__stars |
display: flex; gap: 1px |
.cr-social-proof__title |
font-size: 14px; font-weight: 600; color: var(--cr-popup-text, #202223) |
.cr-social-proof__verified |
color: #16a34a; opacity: 1 |
Available on: product
| Variable | Currently | Changes | Set by | To override |
|---|---|---|---|---|
--cr-count-gap |
4px | Count Spacing | Theme editor | plain CSS |
--cr-star-size |
20px | Icon Size | Theme editor | plain CSS |
--cr-star-color |
set in the editor | Star color | App settings | plain CSS |
--cr-focus-color |
currentColor | Color | Widget builder | plain CSS |
--cr-focus-offset |
2px | Offset | Widget builder | plain CSS |
--cr-focus-width |
2px | Width | Widget builder | plain CSS |
--cr-link-color |
#007185 | Color | Widget builder | plain CSS |
--cr-link-hover |
#C7511F | Hover | Widget builder | plain CSS |
--cr-text-muted |
#6b7177 | Muted | Widget builder | plain CSS |
| Class | What it styles |
|---|---|
.classic-ratings-star-display |
position: relative; display: inline-block; width: var(--cr-star-size, 20px) !important; height: var(--cr-star-size, 20px) !important |
.cr-count-empty |
color: var(--cr-text-muted, #6b7177); opacity: 0.9 |
.cr-count-inline |
color: var(--cr-link-color, #007185); font-size: 14px |
.cr-icon |
display: block !important; width: var(--cr-star-size, 20px) !important; height: var(--cr-star-size, 20px) !important; opacity: 1 !important |
.cr-rating-link |
display: flex; align-items: center; gap: var(--cr-count-gap, 4px); color: var(--cr-link-hover, #C7511F) |
.cr-stars-empty |
display: flex; gap: 2px |
.cr-stars-filled |
position: absolute; display: flex; gap: 2px |
.cr-stars-wrapper |
position: relative; display: inline-flex; height: var(--cr-star-size, 20px) |
| Variable | Currently | Changes | Set by | To override |
|---|---|---|---|---|
--cr-focus-color |
currentColor | Color | Widget builder | plain CSS |
--cr-focus-offset |
2px | Offset | Widget builder | plain CSS |
--cr-focus-width |
2px | Width | Widget builder | plain CSS |
--cr-text-secondary |
#666 | Secondary | Widget builder | plain CSS |
--cr-tm-align-items |
center | Align items | Widget builder | plain CSS |
--cr-tm-alignment |
center | Alignment | Widget builder | plain CSS |
--cr-tm-arrows |
#1a1a1a | Arrows | Widget builder | plain CSS |
--cr-tm-bg |
#ffffff | Bg | Widget builder | plain CSS |
--cr-tm-bg-solid |
#ffffff | Bg solid | Widget builder | plain CSS |
--cr-tm-body-font |
unset | Body font | Widget builder | plain CSS |
--cr-tm-card-padding |
32px | Card padding | Widget builder | plain CSS |
--cr-tm-dots |
#1a1a1a | Dots | Widget builder | plain CSS |
--cr-tm-element-gap |
16px | Element gap | Widget builder | plain CSS |
--cr-tm-heading-align |
center | Heading align | Widget builder | plain CSS |
--cr-tm-heading-color |
#1a1a1a | Heading color | Widget builder | plain CSS |
--cr-tm-heading-font |
unset | Heading font | Widget builder | plain CSS |
--cr-tm-heading-size |
24px | Heading size | Widget builder | plain CSS |
--cr-tm-heading-weight |
700 | Heading weight | Widget builder | plain CSS |
--cr-tm-justify |
center | Justify | Widget builder | plain CSS |
--cr-tm-max-width |
1200px | Max width | Widget builder | plain CSS |
--cr-tm-radius |
8px | Radius | Widget builder | plain CSS |
--cr-tm-star-size |
18px | Star size | Widget builder | plain CSS |
--cr-tm-text |
#1a1a1a |
Text
used by 7 rules |
Widget builder | plain CSS |
--cr-tm-text-size |
18px | Text size | Widget builder | plain CSS |
--cr-tm-transition |
500ms | Transition | Widget builder | plain CSS |
| Class | What it styles |
|---|---|
.cr-powered-by |
text-align: center; padding: 1rem 0 0.5rem; font-size: 12px; color: var(--cr-text-secondary, #666) |
.cr-testimonial |
position: relative; max-width: var(--cr-tm-max-width, 1200px); margin: 0 auto; text-align: var(--cr-tm-alignment, center) |
.cr-testimonial__content |
position: relative; width: 44px; height: 44px; border: none |
.cr-testimonial__empty |
padding: 40px 20px; text-align: center; color: #6b7280; font-size: 14px |
.cr-testimonial__skeleton |
padding: 40px 20px |
.cr-testimonial__skeleton-line |
height: 14px; border-radius: 4px; background: #e5e7eb |
.cr-testimonial__skeleton-line--lg |
width: 90% |
.cr-testimonial__skeleton-line--md |
width: 60% |
.cr-testimonial__skeleton-line--sm |
width: 30% |
.cr-testimonial__skeleton-slide |
max-width: 600px; margin: 0 auto; display: flex; align-items: center |
.cr-tm--slide |
display: flex; position: relative; flex: 0 0 100%; opacity: 1 |
.cr-tm__arrow |
position: absolute; width: 44px; height: 44px; border: none |
.cr-tm__arrow--left |
|
.cr-tm__arrow--right |
|
.cr-tm__author |
display: flex; align-items: center; gap: 10px; justify-content: var(--cr-tm-justify, center) |
.cr-tm__author-info |
display: flex; text-align: left |
.cr-tm__author-name |
font-weight: 600; font-size: 14px; color: var(--cr-tm-text, #1a1a1a) |
.cr-tm__author-title |
font-size: 12px; color: var(--cr-tm-text, #1a1a1a); opacity: 0.6 |
.cr-tm__avatar |
width: 40px; height: 40px; border-radius: 50%; background: var(--cr-tm-text, #1a1a1a) |
.cr-tm__body |
font-size: var(--cr-tm-text-size, 18px); color: var(--cr-tm-text, #1a1a1a); max-width: 100%; font-family: var(--cr-tm-body-font) |
.cr-tm__dot |
width: 24px; height: 24px; border: none; background: none |
.cr-tm__dot--active |
opacity: 1 |
.cr-tm__dots |
display: flex; gap: 0; justify-content: center |
.cr-tm__heading |
font-family: var(--cr-tm-heading-font); font-size: var(--cr-tm-heading-size, 24px); font-weight: var(--cr-tm-heading-weight, 700); color: var(--cr-tm-heading-color, #1a1a1a) |
.cr-tm__quote-icon |
color: var(--cr-tm-text, #1a1a1a); width: 28px; height: 28px |
.cr-tm__slide |
opacity: 0; display: flex; align-items: var(--cr-tm-align-items, center); padding: var(--cr-tm-card-padding, 32px) |
.cr-tm__slide--active |
opacity: 1 |
.cr-tm__star |
width: var(--cr-tm-star-size, 18px); height: var(--cr-tm-star-size, 18px) |
.cr-tm__stars |
display: flex; gap: 2px; justify-content: var(--cr-tm-justify, center) |
.cr-tm__track |
position: relative; display: grid |
| Variable | Currently | Changes | Set by | To override |
|---|---|---|---|---|
--cr-disclosure-bg |
rgba(0,0,0,0.06 | Bg | Widget builder | plain CSS |
--cr-disclosure-text |
#5c5c5c | Text | Widget builder | plain CSS |
--cr-focus-color |
currentColor | Color | Widget builder | plain CSS |
--cr-focus-offset |
2px | Offset | Widget builder | plain CSS |
--cr-focus-width |
2px | Width | Widget builder | plain CSS |
--cr-text-secondary |
#666 | Secondary | Widget builder | plain CSS |
--cr-wall-card-bg |
#fff | Card bg | Widget builder | plain CSS |
--cr-wall-card-border |
#e5e5e5 | Card border | Widget builder | plain CSS |
--cr-wall-gap |
16px | Gap | Widget builder | plain CSS |
--cr-wall-heading-align |
center | Heading align | Widget builder | plain CSS |
--cr-wall-heading-color |
#1a1a1a | Heading color | Widget builder | plain CSS |
--cr-wall-heading-size |
24px | Heading size | Widget builder | plain CSS |
--cr-wall-heading-weight |
700 | Heading weight | Widget builder | plain CSS |
--cr-wall-max-width |
1200px | Max width | Widget builder | plain CSS |
--cr-wall-radius |
8px | Radius | Widget builder | plain CSS |
--cr-wall-text-color |
#202223 | Text color | Widget builder | plain CSS |
| Class | What it styles |
|---|---|
.cr-powered-by |
text-align:center; padding:1rem 0 .5rem; font-size:12px; color:var(--cr-text-secondary,#666) |
.cr-wall |
width:100%; max-width:var(--cr-wall-max-width,1200px); margin:0 auto; font-family:inherit |
.cr-wall--full-width |
max-width:none |
.cr-wall__card |
background:var(--cr-wall-card-bg,#fff); border:1px solid var(--cr-wall-card-border,#e5e5e5); border-radius:var(--cr-wall-radius,8px) |
.cr-wall__card--clickable |
opacity:.92 |
.cr-wall__card-body-wrap |
padding:14px 16px |
.cr-wall__card-date |
color:#9ca3af |
.cr-wall__card-incentivized |
display:inline-block; padding:2px 7px; border-radius:999px; background:var(--cr-disclosure-bg,rgba(0,0,0,0.06)) |
.cr-wall__card-meta |
display:flex; align-items:center; gap:8px; font-size:13px |
.cr-wall__card-photo |
width:100%; display:block; height:100% |
.cr-wall__card-product |
font-size:12px; color:#6b7280 |
.cr-wall__card-reviewer |
font-weight:500; color:var(--cr-wall-text-color,#202223); display:flex; align-items:center |
.cr-wall__card-stars |
display:flex; gap:2px; width:16px; height:16px |
.cr-wall__card-text |
font-size:14px; color:var(--cr-wall-text-color,#202223) |
.cr-wall__card-text--clamped |
display:-webkit-box |
.cr-wall__card-verified |
color:#16a34a |
.cr-wall__empty |
text-align:center; padding:40px 20px; color:#6b7280; font-size:14px |
.cr-wall__grid |
|
.cr-wall__heading |
font-size:var(--cr-wall-heading-size,24px); font-weight:var(--cr-wall-heading-weight,700); color:var(--cr-wall-heading-color,#1a1a1a); text-align:var(--cr-wall-heading-align,center) |
.cr-wall__lightbox |
position:fixed; width:100%; height:100%; background:rgba(0,0,0,.85) |
.cr-wall__lightbox-close |
position:absolute; background:none; border:none; color:#fff |
.cr-wall__lightbox-info |
display:flex; align-items:center; gap:16px; padding:12px 20px |
.cr-wall__lightbox-info-link |
color:#fff; opacity:.8 |
.cr-wall__lightbox-info-title |
font-weight:600 |
.cr-wall__skeleton-card |
background:#f3f4f6; border-radius:8px; height:180px |
.cr-wall__skeleton-grid |
display:grid; gap:16px |
Class names are a public contract: once you style one, we avoid renaming it. If something you need is not listed here, it is not stable enough to target yet, so get in touch before relying on it.