How edit the "base" of my website?

Technical Q&A
, , ,
1

Hi everyone,
I’ve been building my website with Shopify for a while now. I use a lot of CSS here and there to modify certain elements.

However, I’ve reached a point where I’m customizing my website a lot and I’m ending up repeating several code snippets everywhere (for example, section headings with the same font, size, etc.).
Is it possible to know how to modify my website’s core code so that I can change an element once and for all (for example, all my “h1” headings) and not have to copy/paste the same CSS every time?
Thanks in advance, have a great day!

Exemple of CSS I use :

h2 {
  font-size: 50px;
  font-weight: 950;
}
.card__heading {
  font-size: 20px !important;
  font-weight: 500;
}
.quick-add__submit {
  font-size: 18px !important;
  font-weight: 700;
  color: #fff;
  background-color: #000;
}
.button:hover {
  background-color: #fff;
  color: #000;
}
@media only screen and (max-width: 800px) {
  .price-item {
    font-size: 18px;
  }
  .card__heading {
    font-size: 18px;
  }
  .quick-add__submit {
    font-size: 16px !important;
    font-weight: 700 !important;
  }
}
.price-item--last {
  font-size: 20px;
  font-weight: 700;
}
.price-item--regular {
  font-size: 14px;
  font-style: italic;
}
2

Hi @Avenueducadre, welcome to the Shopify Community,

Every Shopify theme has at least one main stylesheet.base.css

  1. theme.css
  2. theme.scss.liquid
  3. styles.css

Shopify Admin → Online Store → Themes → Edit code → /assets folder

you can edit those files in the assets folder to reflect your all changes one time.
How to Define Your Styles Globally

h1 {
font-family: “Your Font”, sans-serif;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1.25rem;
text-transform: uppercase;
}

3

yes,

You need to do the global coding then. Like see here:

image
image1919×947 110 KB

4

Put all those repeating rules in a single global file, usually assets/theme.css or a new custom.css loaded in theme.liquid’s <head>.
Target your h1/h2, buttons, price items there so every section inherits it.
Did this on a client build recently, way cleaner than scattering CSS everywhere.

5

Do you use “Custom CSS” in section settings?

If yes, “Custom CSS” changes your supplied CSS code to make it scoped to this section, but also it makes this rule “stronger”.

Technically, you can use “Theme settings” => Custom CSS, but your rules there will be “weaker” and not override theme defaults.