How do I add custom CSS to my whole store or to one section?

CSS changes how your store looks: colors, spacing, sizes, and more. You can add your own CSS in two places in the builder: for the whole store, or for one section only.

Custom CSS for the whole store

Click the gear icon and open the Custom CSS tab. The box is called CSS code: Applies to the entire store. Your CSS loads on every page of the market you are editing, and the preview shows the result.

Use it for rules that must apply everywhere, for example hiding an element on all pages or changing the style of every button. For example, h1 { text-transform: uppercase; } writes the main title of every page in capital letters.

Custom CSS for one section

Select a section in the Sections tab. At the bottom of its settings, open the Custom CSS tab. Its CSS code box says Applies to this section only. Most sections have it, including the header, footer, hero, product info, and checkout.

This is the safer choice. Storeep adds the section in front of each of your selectors, so your rules cannot change anything outside it.

• h2 { letter-spacing: 2px; } changes only the titles inside this section.
• Use & to style the section itself: & { border-top: 1px solid #000; }.
• @media rules work. The rules inside them are limited to the section too.
• @keyframes animations are kept as you wrote them.

The section CSS belongs to that section on that page. Use Apply to all pages on the section to copy the section, with its CSS, to your other pages that include it. See Apply to all pages.

Which one to use

• One section looks wrong: use the section's Custom CSS.
• The same change is needed everywhere: use the Custom CSS settings tab.
• Before writing CSS, check if a setting already does it: colors are in Color schemes, fonts in Fonts settings, and corners and shadows come from your theme.

When your CSS does not work

• Check for a missing } or ;. One mistake can stop the rules after it.
• Your rule may be weaker than the theme rule. Make the selector more specific.
• In section CSS, do not start your selector with body or html. They are outside the section, so the rule will not match.
• If the page looks broken, remove your last change, publish, and add rules back one at a time.

Good to know

• Custom CSS belongs to the market you are editing. Repeat it in every market that needs it.
• Changing your theme can change class names and layout, so check your custom CSS after a theme change.
• Changes go live when you click Publish.
• For HTML and code inside a page, see Custom code.