Custom CSS Styles: Adding Your Own CSS

If you know CSS, you can add your own styles to change something the design settings do not reach: a bit more space under a heading, a different color on one button, hiding a line you do not want. IndieMade support uses the same box when we help customize your design. Custom CSS Styles is included on every plan.

Try the settings first. Most looks can be changed without code in Theme Fonts and Colors, Header Design, Store Design and the Display Settings gear on your store pages. CSS is for what is left over.

Where to find it

Go to Dashboard → Design and click Style CSS on the Custom CSS Styles card. The same page is also on Settings → Integrations, on the card of the same name.

The Design page in the IndieMade dashboard with the Custom CSS Styles card and its Style CSS link circled, below the Theme, Header, Theme Fonts and Colors and Store cards
Dashboard → Design. Style CSS on the Custom CSS Styles card opens the CSS box.

Adding your CSS

  1. Type or paste your CSS into the dark box. It colors the code as you type, so a missing brace is easier to spot.
  2. Add new rules at the bottom, below anything already there. If support has added styles for you, leave those in place.
  3. Click Save CSS Changes.
  4. Open your shop and check the change. It shows for everyone right away, including visitors who are not signed in.
The Custom CSS Styles page with a dark code box holding CSS rules and the Save CSS Changes button circled
The CSS box with a few rules in it. Save CSS Changes puts them on your site.

When you save, IndieMade tidies your CSS: it lines it up with two-space indents and may fix a small slip or leave out a rule it cannot read. After saving, look over the box to check your rule is still there as you meant it.

Your CSS also reaches the text editor in the Dashboard, so pages, posts and product descriptions look the same while you write them as they do on your site.

An example

To make the headings on your pages a little bigger and add space below them:

h2 {
  font-size: 1.6em;
  margin-bottom: 0.75em;
}

Tips

  • Use your browser's developer tools (right-click a part of the page, then Inspect) to find the selector for what you want to change.
  • Make one change at a time and check your shop after each save, on a phone as well as a computer.
  • Copy the whole box into a text file before a big change. If something goes wrong, paste the old version back and save.
  • Setting a color on a wrapper is often not enough: most themes set the color of headings, paragraphs and links directly, so target those elements too.
  • Code for other services, such as a chat widget or a tracking pixel, goes in Add to Head, not here.
  • Stuck? Email us what you are trying to change and we can often write the CSS for you.

Questions? Email support@indiemade.com.