By default, we do our best to match your quiz to your Shopify store automatically. But sometimes that doesn't work, or you may want to tweak button colors.
Recommended styling
The easiest way to customize your buttons styling is to use the built-in styling options on your quiz settings. Learn more about quiz styling settings here.
A more advanced way to customize your quiz styling is to use CSS, which we'll cover next.
Advanced styling with CSS
To customize your quiz with CSS you can use Shopify's built-in Custom CSS tool in your Theme settings to customize your quiz.
For example, using CSS you can change the color of the quiz button to black and white by targeting it like this:
.ps-quiz-button.ps-quiz-button--primary {
background: white;
color: black;
border-color: black;
}If you need help writing the CSS to change buttons how you like, just contact us and we're happy to help!
Here's where you can find Shopify's Custom CSS tool in Theme settings:
CSS isn't working on the quiz when the quiz button modal opens
Troubleshooting tip: Ensure you're adding your CSS in the global theme settings shown above when using a quiz button. If you only add the CSS directly to the quiz button CSS it'll only apply to the button and not to the rest of the quiz when the modal opens.
See the example below where the CSS only applies to the section, which means any custom CSS here wouldn't appy to the quiz modal once the quiz opens. Below the CSS section it also states that any global CSS (to apply to other areas) must be added in theme settings.
As always, if you have any questions or need any help just ask!