Why isn't my CSS theme saving changes on my site?

[luigivento]

Hi

I only have three css files:

gift-card.scss.liquid 

theme.scss.liquid

timber.scss.liquid

No base.css etc.

Also, when I for example change the background in theme settings (not inside css) it looks fine but then after saving the changes it goes back to the original (white). It even keeps the value yet the color doesn't match.

EDIT: after several attempts, clicking on the "recently selected" color did the trick. But it should not behave like that, I guess.

Pls help.

[TerenceKEANE · Accepted solution]

Hi!

Theme colors can be manually modified. What specific area would you like to work on, and what is the website name?

Now, I'll guide you through the process of adding the 'base.css' file. Navigate to the 'Edit Code' option in your theme settings, then search for “Asset” in the search bar.

Next, click on "+ Add a new asset" and create a new file named "base.css" from the options below.

Now, we'll link this newly created file to the main 'theme.liquid' file. You need to add the following code to the top of the 'theme.liquid' file, just above </head>. That's all there is to it.

{{ 'base.css' | asset_url | stylesheet_tag }}

Terence

[luigivento]

Hi Terence, 

Thank you so much for your reply!

Basically, I'd like to have the freedom of changing tiny details in the stylesheet also in general, but especially when I'm not able to do it on Shopify. Reading through the topics I thought I'd need a base.css file in the first place (not sure now). To be specific, for example (and I made a post earlier about it) I want to increase font size the price tag under the product photo, when I check this in Chrome inspector I can see its class:

.grid-link__sale_price

I can also see it's from 

theme.scss.css:809

However when I click on edit code, under Assets folder, the theme.scss.liquid (if that's the same document at all) has no such element in that line or anywhere else. In fact, it's a completely different stylesheet.

So I'm just trying to understand how it works.

www.zumo.hu - this is the site

Many thanks
Lajos

[TerenceKEANE]

I understand your point perfectly. Indeed, managing a Shopify store often involves dealing with recurring minor and big issues. You can either seek solutions in forums or hire professional support. Our services encompass a wide range of tasks, even beyond what you've mentioned. Premium themes often limit customization options, and relying solely on copy-and-paste methods without CSS knowledge can lead to unintended consequences elsewhere on your website. The area you're referring to might be defined in a separate file or embedded inline.

To adjust the font size of the text in that specific area, you can add the following codes to your "base.css" file:

.product-single__prices #ProductPrice, .product-single__prices #ComparePrice {
    font-size: 35px;
}

[luigivento]

Hi Terence

Thanks! I already did something similar and it works. So, adding base.css the way you mentioned did the trick!

Cheers!

[TerenceKEANE]

You are welcome 😉

Let me know if you need any further assistance. Feel free to tag me or send a private message when opening a new topic. If I find time outside of our software and "Shopify Premium Support" service, I can assist.

Best regards.

Terence.

[luigivento]

Thanks Terence

[TheVibeDesign]

Hey, 

will this solution override the current CSS in the .scss file? Also, would I need to copy all .scss to the new CSS file you mentioned creating? 

Thanks