Shopify CSS Intro - How to Overwrite Theme Colors and Fonts When You Really Need To
ฝัง
- เผยแพร่เมื่อ 5 ส.ค. 2024
- How to make precise design changes that go beyond what the theme settings allow. Get my book to learn more skills like this: edcodes.gumroad.com/l/diy-sho...
This is one of the first videos I’m doing on CSS, because it explains when and where you should use CSS in your Shopify theme.
In later videos I will be going more in-depth on CSS itself as a useful skill for Shopify store owners, as well as HTML, and finally Shopify Liquid.
===== Who am I? =====
Hey! My name is Eduard.
I teach the tech side of starting and running a Shopify store.
Im a professional web developer, but my goal is to make Shopify easy with simple and straight-to-the-point videos.
Visit my website: ed.codes
===== Stay Updated =====
Want to see my latest tips, tutorials, and code add-ons? TH-cam won’t always show you. Subscribe to get emails directly from me: ed.codes/pages/newsletter
===== FAQ's =====
My favorite Shopify Apps - ed.codes/blogs/resources/actu...
My favorite Themes - ed.codes/blogs/resources/best...
===== Check out my Shopify Add-ons =====
Pre-built sections & features for Shopify 2.0 themes, often replacing the need for apps. Copy and paste the code into your theme.
edcodes.gumroad.com/
===== Join "Shopify DIY" Community on Discord =====
Chat with me and other store owners and developers:
ed.codes/community
===== Chapters =====
00:00 Intro & Problem
02:08 Create custom CSS file
04:16 CSS basics recap
08:17 Global change across all pages
10:22 Changes in specific section types
12:39 Changes in specific instance of a section using ID
14:23 Change font sizes
15:21 Checking current font size
16:04 Change font sizes
16:46 Cons of this method
18:13 Pro tip - use comments!
19:12 Why a separate CSS file
20:07 CSS not working - understand specificity
22:26 Worst case use !important
23:29 Join Shopify DIY Discord
#Shopify #CSS #coding
![เจ้าผู้เดียว - ดิด คิตตี้ [OFFICIAL MV]](http://i.ytimg.com/vi/q0NLCYKBOTo/mqdefault.jpg)
👋Hey! If you liked this video you will love my book: ed.codes/shopify-coding-handbook. It's full of practical advice for writing CSS in Shopify.
is there a way to change the way shopify sorts items on the shop page? the default is a-z which I find super annoying and doesn't make much sense for most, I guess. is this covered in the book by any chance? is it even possible? I would love to have it sorted by newest first by default
This is literally the best and simple css tutorial videos I have ever come across. You are a lifesaver for real!! I wish I could have found this video earlier so I didn't have to spend hours to research the wrong info lol
I love his tutorials cause they're so technical and practical. And it's hard to get this information anywhere else on youtube
Your videos are the BEST honestly i have no knowledge of code and you make it so understandable thank you
Thank you, Ed, I learn so much just from this one video, you make me feel somewhat empowered instead of complete hopelessness before I watched this video. 🙇🏼♂
Your tutorial is excellent, providing a clear and concise explanation of fundamental CSS rules in a way that is accessible and easily comprehensible.
This has so much without anything that felt like filler. I appreciate you so much. Thank you!
Thanks! Check out my latest video it's also an intro to coding but much more structured - th-cam.com/video/5z2D7dLmhfk/w-d-xo.html
You deserve more subscribers, man! Thanks
Excellent video Ed!. I've searched everywhere for this and no one explains this as you do.
Amazing tutorial, exactly what I needed help with! Thanking you Ed!
So much value in these 24 minutes. You are an excellent teacher. Thank you
Very helpful video! Literally been looking around for this for ages everyone else keeps taking me to that stupid typography section which doesn’t help at all
It works, very easy, many thanks!
That was amazing and so easy to understand it! Your teaching skills are cool!
Thank you for this! I never realized that we could change the styling of elements using this way. Definitely subbed! Looking forward to learn from your upcoming videos :)
Dude I just found your channel and you are a champ!! I love your stuff - just subbed! Thanks for all the help and valuable info!
you don't know how much time you saved for me
I always pase call one by one because I don't know about custom CSS option
that's really help me lot.
and please keep making these type of videos really help a lot
thank you so much Ed
What a fantastic tutorial thank you so much!
This was so helpful, thank you!!!
As always -- this is 🔥🔥🔥🔥🔥!
That was a fantastic tutorial!! Thank you!
This video was so helpful. I was able to change the button for my Image Text with EASE! I'm definitely subscribing for more tips.
Helped me fix my problem in Shopify, thanks
Really appreciated this video!
Great tutorial, thank you!
Thanks Ed - really useful
This really helped me. Thanks a lot :)
THANK YOU ED!!!!!
Great video, helped me out with a few things!
Really helpful video! Thanks for this!
Ed thank for you videos. You are a good teacher =) how to change, add or remove boder lines or border colors on buttons or for example the searchbar so it becomes more visible. Thanks
Bro I love you man
Thanks Ed, this was really helpful. I've been creating new classes for things trying to target them but this was a great demonstration of how to work backward through nesting to increase specificity without adding anything.
Suggestion for a future video: help us understand/decipher what the Dawn theme and its derivatives are actually doing with all of the pseudo classes surrounding core elements. For example: button classes have a lot of ::before and ::after styling. It makes it difficult at times to track down the correct thing to modify for a change, and sometimes results can be unexpected. I don't entirely understand what these classes are doing and why they're necessary for things like buttons.
Good question. They're not really necessary IMO... I feel like Dawn went a bit too far with creating lots of options for button styling and now its too complicated.
::before and ::after pseudo elements are just a way to generate an extra element using CSS, which is cleaner than actually adding a or something redundant in HTML just for styling purposes.
In Dawn, they are using ::after to create a fake border, so that they can give you a border opacity setting (with normal css borders you cant change opacity). The ::before is used to add a shadow, and you can also change its opacity, offset and blur.
You can find all these settings in theme settings > Buttons.
Great vid, thank you! Do you have any similar videos or guidance on text positioning? For example how to be more specific than just middle, bottom, etc
Ed, I have learned so much from your channel! Do you have a tutorial on creating custom product badges/labels or some sort of image overlay on the collection thumbnail images without having to buy a monthly app? I'd like to show customers there's multiple sizes available for some products on some of my items, but the apps out there are not great design and cost too much per month.
What if I can't find the global.css nor base.css. I am using Xtra theme
Hey Ed, Your tutorials are great! Would you mind help us know how to add clickable image slider and banner with just the image and no buttons in it? Also how do we add responsive image to it? having a separate mobile responsive image for the slider.
Great vid! Was looking for this. Is it possible to also add a color gradient to the button? I tried to add for example: linear-gradient(136deg, rgba(10, 234, 237, 1) 11%, rgba(250, 13, 253, 1) 84%) to the 'custom.css' but it doesnt seem to work. Is there another option? Would like to apply a color gradient to my buy buttons
Thank you for this but my Shopify doesn't have base css? Not sure what to do?
Is it possible to do it with a different way. For instance, can you add a new color suggestion in the colors in the theme parameters ? You go to the json config, you add a new box ? But I tried and it failed... don't know why ...
I do not know if this question was answered or not..what is the best Shopify theme that's not over loaded with 10 different choices ?? Simple to use , and can be coded without breaking your site.
Just wondering about the opening soon page and the overlay color, can this also be changed?
Hey man, how can i make banner button wider? i have been trying with different width but only the color becomes wider not the actual border and the text stays on the left. will be much appriciated if you could help. Thanks
Best to use the custom liquid section on pages to change the CSS as it will get overwritten with theme updates
Too easy to lose track of or forget about completely. Especially when you are using different templates, then you would be copy pasting the section a lot, and have multiple copies of it, making it hard to make a change. I prefer to make a separate file and then add that file to the new theme after updating.
When I use both the add to cart and buy now button how could I make the add to cart button solid and the buy now button outline for dawn
Hey. I followed the steps in this tutorial to change the button colour but it looks like it is being overwritten by something else as the css code is crossed out in inspect element. How do i get around this?
Also which one do I do to make my custom font show in every page both desktop and mobile because right now mine only shows on desktop
Thank you so much for this - I've been desperately searching for a way to change the font colour on different product templates. 💖 I'd love to be able to hide the Card Headings on the Collection List on Homepage (I think I have found where to change the font colour, but I actually don't want it there at all
You can use display: none; to hide something completely. E.g. .your-card-heading-class { display: none; }
Hello, can you please explain how to do this for the search field?
Such a good video but my font still not changing its colour for me😅 drives me nuts
Does doing this make my custom font show on both desktop and mobile?
Can I isolate the changes to mobile only?
Just found you and I really like your video. I have a problem and can not go any further. It will not allow me to add a new assets. Can you explain why?
What can u do if the theme maker used CSS variables and the normal way of adding custom CSS isn't working?
how can i change the text in a button ?
Thanks for the video Ed! My issue now is that I want to ensure my mobile font is bigger than the current one without affecting the desktop view! would this code work? .product__description mobile {font-size:15px !important;}
Thank you for this tutorial! Instead of writing 'green' or a color description, are you able to add a Pantone or Hex # to dial down to an exact color?
Yeah, you would definitely be using a hex color in a real project. I'm only demonstrating with these standard color names. But as for Pantone codes, no those won't work. You need to find the equivalent hex or RGB.
Hi Ed - How does someone contact you? I want a custom block built for my Shopify Dawn theme.
Hi, Ed.
You would greatly help me if you explain in a few words, how to insert background image in css? Thank you
I mean not to the whole page, but individually, H1 for example, how do I put image for H1 background using css?
Hey Ed, great video! Have a question tho. How would you change a specific li inside ul without it affecting all other li inside the sam ul element?
You can give it it's own class in html maybe? Or if not, then with CSS you can target it with :first-child or :last-child or :nth-child
developer.mozilla.org/en-US/docs/Web/CSS/:first-child
developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
@@EdCodes Hey Ed, thanks for the feedback. What I did is, copied the code for the whole ul and asked ChatGPT to help me, and it did, I got exactly what I wanted.
This video is great!! It helped me change some colours around, but I wanted to change my heading font families so h1 h2 h3 etc would be a different font. I tried to do this by changing family for h4 or h2 for example, but nothing happened! Any advice?
Are you changing them to a font that's already being used elsewhere in your theme? Your font picker settings in Shopify actually load in the font files. So you can't just use any font. But if you already selected that font for some text then you might be able to use it in css also. Hard to say without seeing your store and theme. Also make sure you are targeting with enough specificity in your css to overwrite it.
Dawn has a problem with font size on mobile, the headings are way too big. Also, font size matching. We tend to have headings all over the page that are different sizes. It is not ideal.
Include @media screen size (Min. 700)
bro I still don't understand how to change text colors for separate sections. I've searched the whole web and there's nothing about this
Awesome, thank You so much! Is it true, that there is no way to customize checkout page? CSS doesn't work, when I try to make changes on this page, but anywhere else yes. Thank You again. Have a great time.
Yes, it's true. You need Shopify Plus to customize the checkout page.
@@EdCodes Thank You for Your reply and for Your work! Great time to You.
i.. cant thank you enough..............
Is it possible to apply RGB colors in text or background?
yeah of course - color: rgb(255,255,255);
www.w3schools.com/css/css_colors_rgb.asp
do you know how to put a figma website on shopify
Check out a pagebuilder called Replo, it's a lot like Figma - ed.codes/blog/replo-a-shopify-page-builder-for-figma-designers
Shopify is nothing more than wordpress, another useless piece of software. Your doing a Good job explaining and making it easier to change things in Shopify. And FASTER..!!!
what an amazing tutorial! Many thanks!