With Custom CSS inputs in your theme, you can make small style adjustments to personalize your store's appearance. Use classes and IDs as selectors to target specific elements and sections of your theme.
You can make store level style changes and focused style changes that affect only a certain section. Below we go through both of these options.
Custom CSS in Theme Settings
In Theme Settings, you can add custom CSS that applies globally across your entire store. This is useful for making consistent style changes throughout your theme.
Custom CSS in Sections
Each section includes an option to add custom CSS at the bottom of its settings.
CSS added here applies only to that specific section, allowing for more precise styling control.
Example: Font size of the product card's price
To change the font size of the product price in product cards, add the following CSS in Theme Settings > Custom CSS
In this example, classes are used to target the styling of product card prices. To learn more about CSS selectors, see MDN's guide about Basic CSS Selectors.