How to Use The Custom CSS Field in Shopify 2.0 Sections

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? KZread 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

Пікірлер: 46

  • @EdCodes
    @EdCodes11 ай бұрын

    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

  • @bbeblock
    @bbeblock15 күн бұрын

    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

  • @araalfaro735
    @araalfaro7355 ай бұрын

    Super helpful!! Always putting out valuable content Ed! thank you

  • @aliyoruk99
    @aliyoruk9911 ай бұрын

    Haha perfect timing! I was asking about this on the discord yesterday

  • @xSM666x
    @xSM666x7 ай бұрын

    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!

  • @jonward1314
    @jonward131411 ай бұрын

    Awesome video, Ed! 🔥🔥🔥

  • @olgagal8800
    @olgagal880011 ай бұрын

    Thank you for another very helpful video.

  • @alicebrnra
    @alicebrnra4 ай бұрын

    Thank you ! This was helpful

  • @Fedgery007
    @Fedgery00711 ай бұрын

    Super helpful! This is so powerful to do things that you don’t get out of the box.

  • @EdCodes

    @EdCodes

    11 ай бұрын

    Yeah, it really was a much-needed feature and makes small tweaks a lot easier now.

  • @philrichards9554
    @philrichards95546 ай бұрын

    Super helpful thank you

  • @patoulis
    @patoulis4 ай бұрын

    amazing, very helpful!

  • @user-45446
    @user-4544611 ай бұрын

    Super helpful.

  • @mustafa1872
    @mustafa187211 ай бұрын

    THANK YOU

  • @h0_lub
    @h0_lub7 ай бұрын

    Very helpful video

  • @user-rq4fy4ut3n
    @user-rq4fy4ut3n3 ай бұрын

    Thanks

  • @lafikdadi1
    @lafikdadi13 ай бұрын

    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.

  • @justcars2454
    @justcars245410 ай бұрын

    i have some css basics,but that was 2years ago, i need to go back and learn some important styles

  • @zeeshanayub7873
    @zeeshanayub787310 ай бұрын

    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!

  • @Revivalofwisdom369
    @Revivalofwisdom3698 ай бұрын

    hello, how can i change the broder-raduis but only on computer or only on phone? Thank you for the videos.

  • @CabreraMotorSports
    @CabreraMotorSports4 ай бұрын

    Best videos and explanations Thanks. Can you share the CSS code to make all my product descriptions' h2 tags without changing the font?

  • @user-qx3uq3vx1q
    @user-qx3uq3vx1q5 ай бұрын

    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.

  • @shakibhossain7460
    @shakibhossain746011 ай бұрын

    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 .

  • @EdCodes

    @EdCodes

    11 ай бұрын

    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.

  • @shakibhossain7460

    @shakibhossain7460

    11 ай бұрын

    @@EdCodes wow thanks .... I was beating myself For Nothing .... I thought I have to learn Them .....Thank You very Much

  • @TJ-TJ
    @TJ-TJ11 ай бұрын

    Have been using variables for some time. would be good to see you do a video on how the variables system works.

  • @EdCodes

    @EdCodes

    11 ай бұрын

    Ok! Coming soon.

  • @jerodjax
    @jerodjax8 ай бұрын

    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?

  • @shinafaith...
    @shinafaith...11 ай бұрын

    Can you do a video on how to add scrolling text to your Shopify page?

  • @hanzade99
    @hanzade998 ай бұрын

    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.

  • @robt4219
    @robt42196 ай бұрын

    How do you change the dropdown symbol from a arrow down and arrow up to a + and - ?

  • @inquisitivemind99
    @inquisitivemind9911 ай бұрын

    @EdCodes, you are Gods gift to DIY store owners. Love the book, check it out people 👍

  • @EdCodes

    @EdCodes

    11 ай бұрын

    Thank you!

  • @mayankkumar9949
    @mayankkumar99496 ай бұрын

    how i put background-image in the hero section using custom cs

  • @gaastiir
    @gaastiir10 ай бұрын

    Is there anyway to align the text to center, I can't get it to work

  • @greatideas4820
    @greatideas48203 ай бұрын

    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

  • @moxitjain8004
    @moxitjain80042 ай бұрын

    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...

  • @RainSoundsIncognito
    @RainSoundsIncognito5 ай бұрын

    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?

  • @EuroHighlights24
    @EuroHighlights2410 ай бұрын

    Online Store editor session can't be published

  • @EvanDonut
    @EvanDonut11 ай бұрын

    GPT for you writing your css inside the custom css👍

  • @AllinflexGeraldine
    @AllinflexGeraldine11 ай бұрын

    Do you got a code what can be used to stop the inthesandbox spam urls?

  • @EdCodes

    @EdCodes

    11 ай бұрын

    Not sure what you mean?

  • @chad.765
    @chad.76511 ай бұрын

    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.

  • @EdCodes

    @EdCodes

    11 ай бұрын

    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.

  • @chad.765

    @chad.765

    11 ай бұрын

    @@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.

  • @EdCodes

    @EdCodes

    11 ай бұрын

    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!