How to Customize App Blocks with CSS
Reviewsion’s theme blocks ship with a semantic BEM structure and a configurable color palette so you can override styles exactly where you need them. This guide shows you how to write CSS overrides—either in your theme’s stylesheet or the section-level Custom CSS field—to style your blocks without extra build steps.
Why are there so few color settings in the blocks' settings?
Reviewsion aims to be as low-configuration as possible and is ready for most themes out-of-the-box. All blocks are designed to automatically generate their colors based on your color palette, located in Reviewsion's app settings.
Different elements of the same type are often based on a single color in your palette, such as "text". A heading might be bold while a subheading might be lighter and more subdued.
This should be perfect for shops that don't want to spend time configuring while still looking great from start; If you need more customization however, with a little more effort you can have fine-grained control.
Prerequisites
Familiarity with CSS (selectors, specificity, variables)
Access to your theme’s code editor or the section’s Custom CSS textarea in the Shopify theme editor
The Reviewsion block added to a page for inspection
Section-Level Custom CSS
All Reviewsion app blocks come with a consistent set of outer-most CSS classes, all lower-case
/* All blocks */
.rvsn
.rvsn-theme-block
.rvsn-theme-block__<name-of-block>
/* Only the Heading block */
.rvsn-heading
Many Shopify themes expose a Custom CSS box in each section’s settings. Styles added here only affect that block. Example:
/* Change slide padding for this Testimonials Carousel section */
.rvsn-TestimonialsCarousel__Slide {
padding: 2rem;
}
Finding the Right Selectors
Every Reviewsion block uses:
Base class:
rvsn-ComponentNameElement:
rvsn-ComponentName__ElementName
Inspect your block in DevTools to confirm exact names. For example:
.rvsn-FilteredReviewsWidget { /* root */ }
.rvsn-FilteredReviewsWidget__ReadMore { /* “Read more” link */}
Overriding Colors
Reviewsion exposes a set of light/dark CSS variables that are automatically generated from color palette selections in Reviewsion's app settings.
Located in the <head>, they will look similar to this
Located in the <head>, they will look similar to this
<style id="rvsn-color-theme-styles">
[rvsn-theme-mode="light"] {
--rvsn-text-0: 0 0% 100%;
--rvsn-text-50: 0 0% 95%;
--rvsn-text-100: 0 0% 90%;
--rvsn-text-200: 0 0% 80%;
--rvsn-text-300: 0 0% 70%;
--rvsn-text-400: 0 0% 60%;
--rvsn-text-500: 0 0% 50%;
--rvsn-text-600: 0 0% 40%;
--rvsn-text-700: 0 0% 30%;
--rvsn-text-800: 0 0% 20%;
--rvsn-text-900: 0 0% 10%;
--rvsn-text-950: 0 0% 5%;
--rvsn-text-1000: 0 0% 0%;
--rvsn-background-0: 0 0% 100%;
--rvsn-background-50: 0 0% 95%;
--rvsn-background-100: 0 0% 90%;
--rvsn-background-200: 0 0% 80%;
--rvsn-background-300: 0 0% 70%;
--rvsn-background-400: 0 0% 60%;
--rvsn-background-500: 0 0% 50%;
--rvsn-background-600: 0 0% 40%;
--rvsn-background-700: 0 0% 30%;
--rvsn-background-800: 0 0% 20%;
--rvsn-background-900: 0 0% 10%;
--rvsn-background-950: 0 0% 5%;
--rvsn-background-1000: 0 0% 0%;
--rvsn-primary-0: 50 87% 100%;
--rvsn-primary-50: 50 87% 95%;
--rvsn-primary-100: 50 87% 90%;
--rvsn-primary-200: 50 87% 80%;
--rvsn-primary-300: 50 87% 70%;
--rvsn-primary-400: 50 87% 60%;
--rvsn-primary-500: 50 87% 50%;
--rvsn-primary-600: 50 87% 40%;
--rvsn-primary-700: 50 87% 30%;
--rvsn-primary-800: 50 87% 20%;
--rvsn-primary-900: 50 87% 10%;
--rvsn-primary-950: 50 87% 5%;
--rvsn-primary-1000: 50 87% 0%;
--rvsn-secondary-0: 189 55% 100%;
--rvsn-secondary-50: 189 55% 95%;
--rvsn-secondary-100: 189 55% 90%;
--rvsn-secondary-200: 189 55% 80%;
--rvsn-secondary-300: 189 55% 70%;
--rvsn-secondary-400: 189 55% 60%;
--rvsn-secondary-500: 189 55% 50%;
--rvsn-secondary-600: 189 55% 40%;
--rvsn-secondary-700: 189 55% 30%;
--rvsn-secondary-800: 189 55% 20%;
--rvsn-secondary-900: 189 55% 10%;
--rvsn-secondary-950: 189 55% 5%;
--rvsn-secondary-1000: 189 55% 0%;
--rvsn-accent-0: 238 88% 100%;
--rvsn-accent-50: 238 88% 95%;
--rvsn-accent-100: 238 88% 90%;
--rvsn-accent-200: 238 88% 80%;
--rvsn-accent-300: 238 88% 70%;
--rvsn-accent-400: 238 88% 60%;
--rvsn-accent-500: 238 88% 50%;
--rvsn-accent-600: 238 88% 40%;
--rvsn-accent-700: 238 88% 30%;
--rvsn-accent-800: 238 88% 20%;
--rvsn-accent-900: 238 88% 10%;
--rvsn-accent-950: 238 88% 5%;
--rvsn-accent-1000: 238 88% 0%;
--rvsn-skeleton: hsla(var(--rvsn-text-100) / 0.7);
--rvsn-skeleton-2: hsla(var(--rvsn-text-100) / 0.5);
}
[rvsn-theme-mode="dark"] {
--rvsn-text-0: 0 0% 0%;
--rvsn-text-50: 0 0% 5%;
--rvsn-text-100: 0 0% 10%;
--rvsn-text-200: 0 0% 20%;
--rvsn-text-300: 0 0% 30%;
--rvsn-text-400: 0 0% 40%;
--rvsn-text-500: 0 0% 50%;
--rvsn-text-600: 0 0% 60%;
--rvsn-text-700: 0 0% 70%;
--rvsn-text-800: 0 0% 80%;
--rvsn-text-900: 0 0% 90%;
--rvsn-text-950: 0 0% 95%;
--rvsn-text-1000: 0 0% 100%;
--rvsn-background-0: 0 0% 0%;
--rvsn-background-50: 0 0% 5%;
--rvsn-background-100: 0 0% 10%;
--rvsn-background-200: 0 0% 20%;
--rvsn-background-300: 0 0% 30%;
--rvsn-background-400: 0 0% 40%;
--rvsn-background-500: 0 0% 50%;
--rvsn-background-600: 0 0% 60%;
--rvsn-background-700: 0 0% 70%;
--rvsn-background-800: 0 0% 80%;
--rvsn-background-900: 0 0% 90%;
--rvsn-background-950: 0 0% 95%;
--rvsn-background-1000: 0 0% 100%;
--rvsn-primary-0: 47 100% 0%;
--rvsn-primary-50: 47 100% 5%;
--rvsn-primary-100: 47 100% 10%;
--rvsn-primary-200: 47 100% 20%;
--rvsn-primary-300: 47 100% 30%;
--rvsn-primary-400: 47 100% 40%;
--rvsn-primary-500: 47 100% 50%;
--rvsn-primary-600: 47 100% 60%;
--rvsn-primary-700: 47 100% 70%;
--rvsn-primary-800: 47 100% 80%;
--rvsn-primary-900: 47 100% 90%;
--rvsn-primary-950: 47 100% 95%;
--rvsn-primary-1000: 47 100% 100%;
--rvsn-secondary-0: 189 55% 0%;
--rvsn-secondary-50: 189 55% 5%;
--rvsn-secondary-100: 189 55% 10%;
--rvsn-secondary-200: 189 55% 20%;
--rvsn-secondary-300: 189 55% 30%;
--rvsn-secondary-400: 189 55% 40%;
--rvsn-secondary-500: 189 55% 50%;
--rvsn-secondary-600: 189 55% 60%;
--rvsn-secondary-700: 189 55% 70%;
--rvsn-secondary-800: 189 55% 80%;
--rvsn-secondary-900: 189 55% 90%;
--rvsn-secondary-950: 189 55% 95%;
--rvsn-secondary-1000: 189 55% 100%;
--rvsn-accent-0: 104 55% 0%;
--rvsn-accent-50: 104 55% 5%;
--rvsn-accent-100: 104 55% 10%;
--rvsn-accent-200: 104 55% 20%;
--rvsn-accent-300: 104 55% 30%;
--rvsn-accent-400: 104 55% 40%;
--rvsn-accent-500: 104 55% 50%;
--rvsn-accent-600: 104 55% 60%;
--rvsn-accent-700: 104 55% 70%;
--rvsn-accent-800: 104 55% 80%;
--rvsn-accent-900: 104 55% 90%;
--rvsn-accent-950: 104 55% 95%;
--rvsn-accent-1000: 104 55% 100%;
--rvsn-skeleton: hsla(var(--rvsn-text-100) / 0.7);
--rvsn-skeleton-2: hsla(var(--rvsn-text-100) / 0.5);
}
</style>
---
Overriding colors for all blocks
If your goal is to use CSS to change colors for all Reviewsion blocks, you want to add custom CSS to a .css file.
Overriding colors for some blocks
If your goal is to use CSS to change colors for a single Reviewsion block, or all blocks within a single theme App section, you want to add css to a "Custom CSS" setting in your theme's App section.
Changing the color variables values
CSS variable color values must be in HSL format. Hex format will not work.
/* Change the value of text-800 in light mode to green */
[rvsn-theme-mode="light"] {
--rvsn-text-800: 120 100% 50%;
}
/* Change the value of text-800 in dark mode to green */
[rvsn-theme-mode="dark"] {
--rvsn-text-800: 120 100% 50%;
}
Changing the color of an element
/*
* Change the Product Carousel reviewer name color.
* Here, you're not changing a CSS variable, so you can use
* whatever color format you want.
*
* If you don't specify dark mode, this will change the default
* light-mode color.
*/
.rvsn-CarouselCard .rvsn-Name {
color: green;
}
/*
* You don't need to specify light-mode, but if you do, it will
* do the same thing.
*/
[rvsn-theme-mode="light"] .rvsn-CarouselCard .rvsn-Name {
color: blue;
}
/*
* If you want the dark theme version to be a different color,
* specify dark mode like this
*/
[rvsn-theme-mode="dark"] .rvsn-CarouselCard .rvsn-Name {
color: blue;
}