How to Use The Custom CSS Field in Shopify 2.0 Sections
ฝัง
- เผยแพร่เมื่อ 5 ส.ค. 2024
- A non-developers guide to using the Custom CSS field, a new feature of Shopify, that is available on the latest themes (2023). It provides a much easier way to add CSS to customize your theme.
Ready to learn more? Get my ebook here: edcodes.gumroad.com/l/diy-sho...
👉 RELATED VIDEOS
1. Creating a custom.css file: • Shopify CSS Intro - Ho...
2. Updating your Shopify Theme: • How to Update Your Sho...
3. Shopify Coding 101: • Shopify Coding 101 for...
📚 MY SHOPIFY CODING EBOOK
ed.codes/shopify-coding-handbook
Learn HTML, CSS and Shopify Liquid from the beginning and specifically for Shopify.
📢 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/newsletter
👨🏼💻 WHO AM I?
Hey! My name is Eduard.
I teach the tech side of starting and running a Shopify store.
I'm 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
Join "Shopify DIY" on Discord
Chat with me and other store owners and developers:
/ discord
🛠 CODE SHOP
ed.codes/shop
Pre-built sections & features for Shopify 2.0 themes, often replacing the need for apps. Copy and paste the code into your theme.
👍 MY FAVOURITE APPS & THEMES
Design Packs (add new sections): bit.ly/DesignPacks-ed
Pagefly (Page Builder): pagefly.link/vASPAeBp
Themes by Out Of The Sandbox: bit.ly/ed-OOTS
Automate tasks with Make.com: bit.ly/make-edcodes
Some of these are affiliate links. If you ever upgrade to a paid plan, you will also be supporting this channel at no extra cost. Win-win!
⏭ CHAPTERS
00:00 Intro
00:30 Old way
01:12 New way
01:28 Benefit #1
02:37 Benefit #2
03:38 How to use it
06:10 Example 2 - Header color
08:10 You need some CSS knowledge though
09:22 Example 3 - Fonts
10:31 Re-use your theme styling (CSS Variables)
13:12 My ebook for non-developers
#Shopify #shopifydevelopment #htmlcss
![[ไฮไลต์] แบดมินตันชาย วิว กุลวุฒิ (ไทย) vs LEE Zii Jia (มาเลเซีย) รอบรองชนะเลิศ | โอลิมปิก 2024](http://i.ytimg.com/vi/mvBiEAqlssw/mqdefault.jpg)
Want to learn more practical coding skills for your store, but not planning on actually becoming a developer?
I wrote an ebook for you: edcodes.gumroad.com/l/diy-shopify-coding-handbook
Mate, i started Shopify for my girlfriend a couple of months ago and know the plattform very well. Still your videos made me dig deeper into thinks like css and html and based on your guidance, I improve my store over and over again. Happy to have found you. Keep on creating those great videos!
Haha perfect timing! I was asking about this on the discord yesterday
thank you, I have been looking for a tutorial that is working for almost 2 hours, yours is the only one that worked
i love u (no diddy)!!! i literally had no knowledge bout css, now i literally change my banner box within the 2 min header color segment in the video ! thank you
Super helpful!! Always putting out valuable content Ed! thank you
Awesome video, Ed! 🔥🔥🔥
Thank you for another very helpful video.
Thank you ! This was helpful
Super helpful! This is so powerful to do things that you don’t get out of the box.
Yeah, it really was a much-needed feature and makes small tweaks a lot easier now.
amazing, very helpful!
Super helpful thank you
Just Amazing
Super helpful.
THANK YOU
Great tutorial - thank you so much. Have bought the book! 👍
Awesome, thank you!
Very helpful video
Bro... thanks. I just turned subscriber and your follower. Thanks. I was looking to see if I can find a tutorial to make products images radius round; but this was good information also. Still researching on product radius change, if you could help.
Thanks
Hi thank you for the tutorial. Can you show me how to add a custom field on shopify checkout page for them Dawn? I just want to collect a basic information of customer. Thank you so much
Hello,
I would greatly appreciate your assistance in making the collection title centered on the screen, and placing the mobile logo on the left side in the dawn theme. Thank you!
Not sure if you know anything about it but I'm trying to use a pseudo element so I can position a couple different icons in my section background. For whatever reason I cannot get psuedo elements to work. Do you know if they aren't allowed or something?
i have some css basics,but that was 2years ago, i need to go back and learn some important styles
hello, how can i change the broder-raduis but only on computer or only on phone?
Thank you for the videos.
Super Helpfull .. You are the best shopify Mentor out there ..... I have you request can you please show how to do Shopping and Tax rate as a freelancer for Clients store .
I don't do shipping or tax setup for clients. Taxes require legal and accounting knowledge that I don't have, and shipping is very different for each country. Both of these are part of the business that the store owner needs to understand and handle themselves. I don't think it's the web developers job.
@@EdCodes wow thanks .... I was beating myself For Nothing .... I thought I have to learn Them .....Thank You very Much
Hi! This video is super useful, thank you! Just one doubt: is it possible to edit certain class to tag it as H1, H2 or H3 using this Custom CSS field? I mean, I need to transform all the product titles in 'collection' pages into H3 tags for SEO purposes, but I do not know if I could do it using this Custom CSS field or I have to edit the code instead. Thanks in advance!
Hi Ed,
I added my Adobe font to shopify and it works everywhere on the website except for the header. I am trying to use this feature to add it, but how do I find the Adobe font's code? The font name is Synthese.
How do you change the dropdown symbol from a arrow down and arrow up to a + and - ?
@EdCodes, you are Gods gift to DIY store owners. Love the book, check it out people 👍
Thank you!
Have been using variables for some time. would be good to see you do a video on how the variables system works.
Ok! Coming soon.
I updated my cornerstone theme, and now the sticky header covers the top of the filters and forms etc. Do you know how to solve this? Why is this sort of thing happening?
Is there anyway to align the text to center, I can't get it to work
how i put background-image in the hero section using custom cs
Thank you for good video, I'm interested if you have the video about css minify or compress on shopify? becouse of speed of our online store for google. If not can you advise me the simple way to do it becaouse I'm not developer.
Can you help me with shopify item upload section bcs at my shop we are doing b2b and b2c both so we have multiple price slab like example :-
Sku-1pcs :-100/-
SKU-2 to 9pcs:- 75/-
Sku- 10 & above:- 55/-
So any one want to resale or purchase any product as par need or as par reselling product
Can you do coding like that if customer take 1 pc it will cost 100 rupess or if customer take 2 to 9 it will cost 75 or if he will take 10 &. Above that it will cost 55.. And the calculation will automatically show as par pricing...
Best videos and explanations Thanks. Can you share the CSS code to make all my product descriptions' h2 tags without changing the font?
Can you do a video on how to add scrolling text to your Shopify page?
Online Store editor session can't be published
Make a video on custom code to add customer reviews section under add to cart or buy now, where code automatically took reviews from products, may be one review or slide reviews one by one with image and name of customer
Do you got a code what can be used to stop the inthesandbox spam urls?
Not sure what you mean?
GPT for you writing your css inside the custom css👍
Is it possible to use in these fields or their section equivalents, to enable live-updating display of variant-specific info, for example things like SKU numbers that need to change after options selection on product pages? Maybe possible using a custom liquid section/block?
It would be nice to have that stuff in one of these boxes instead of hardcoded into theme or page template, like you said to keep theme updates easy to do.
It's possible to add in custom liquid blocks/sections, but I wouldn't do that personally. I use these areas for very small, quick and non-essential tweaks. I'm aware that someone else non-technical might be working on the store and accidentally delete the section/block and the code could be lost. It's not a big deal because even if I don't have them backed up anywhere, it's not hard to rewrite.
The features you're talking about are a bit more complex and I wouldn't want to lose that code. I'd rather have it in the theme, maybe in a separate file like custom.css and custom.js, but that way they are tracked with Git (and backed up on Github) and kept safe.
@@EdCodes I know there are some solutions out there but they aren't contained in a block for those of us who are the only ones working on our themes and want to maintain easy-upgrade potential and avoid having to modify default theme files. A section setup as a framework for showing live-updating variant info would be awesome, if you needed a hint for a pro section for your gumroad. Provide the minimal-length js code needed to insert into a section block where we can then add our own liquid things like variant-level metafields or specs and have it update on the product page after a customer makes/changes a variant selection. It's one of the big things I have that complicates pulling dawn updates over.
Oh ok I see what you mean... yeah that would be useful, might be difficult because of differences between themes, but for Dawn I could try it. Thanks for the suggestion!