Quoli's widgets take their colors and fonts from Settings ▸ Brand, not from each block. Set them there once and every widget on your store follows, on every page and every phone.
Where | Settings ▸ Brand ▸ Colors and Typography |
Reaches | Every widget on your store, after you save |
What reaches your widgets
➀ Brand color and Button text. Buttons, links and accents in every widget, and the text on those buttons.
➁ Stars. Every star rating.
➂ Review text and Card border. These two don't change the widgets on your store.
➃ Verified badge. The verified buyer mark.
➄ Heading font and Body font. The widgets' text. A body font on System default uses your theme's own font.
Match your theme
Colors. Use your theme's button color as the Brand color, and its button text color as Button text.
Fonts. Leave the body font on System default to use your theme's font. Pick a font only to match one your theme uses: Inter, Roboto, Open Sans, Poppins, Playfair Display, Lora or Montserrat.
Stars. Gold reads as a rating everywhere. A brand color works too, as long as it stands out on your page.
Save, then reload a product page. See Brand settings for every field.
A widget still looks different
Widgets added before Quoli's widgets were rebuilt can keep the text, background, border and size settings they had. The theme editor no longer shows them, so you can't change them there. Remove the block and add it again: the new block starts from your Brand settings.
For developers
There's no custom CSS field in Quoli. Instead, the Core Script sets --quoli-brand-color, --quoli-brand-text, --quoli-brand-star, --quoli-brand-verified, --quoli-brand-font and --quoli-brand-heading-font on :root, without !important. Set one on body in your theme's CSS and it takes over for every widget.
💡 Tip: Change one thing at a time and reload a product page, so you see what each setting does.