Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
This is an 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
This is an 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
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
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;
}
Hi Terence
Thanks! I already did something similar and it works. So, adding base.css the way you mentioned did the trick!
Cheers!
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.
Thanks Terence
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
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024