Custom CSS Shopify 2021 ( Shopify Basic Expert Tutorial )
ฝัง
- เผยแพร่เมื่อ 17 เม.ย. 2019
- Get ready for 2023 - with this Shopify online course ( learn Shopify )
- www.jodys.ca/products/learn-s...
sunbowl.ca/subscribe
Shopify Expert Jody Edgar walks through how to customize css in Shopify. If you are doing a custom design setup or build for your Shopify store you are going to need to know how to customize your CSS in Shopify.
In this tutorial, I show you where the styles are located and how to make sure you don't mess up your active store.
Thanks, everyone for the support! Don't forget to Like and Subscribe ( sunbowl.ca/subscribe ) it really helps :)
Q
شضش
I’ve been looking exactly for this!!!!Thank you!
Great starter video! Look forward to seeing more of these.
Nice tutorial i'm working for first time for a customer to modify css, u help me a lot ty!
Great video, thank you! Super interesting to better understand how to customize basic CSS in Shopify.
It's awesome tutorial. you explained very clearly. Just love this. Thank you very much man for your help. :)
Thank you so much! This was professional and exactly what I needed.
Very useful, this is exactly what I'm looking for, thanks so much Jody Edgar - The Shopify Expert :)
Thanks for the nice teaching， I have applied the skill to my Shopify site instantly😊
Very helpful indeed. Thanks a lot!
Nicely explained! Keep up the good work.
Thanks, man! very clear explanation.
this is amazing!
I love you. Thank you so much!
I like the suggestions of importing the changes from another file. I am new at this and in all the videos etc I have never seen someone suggest that.
What a great vid! Thank you!
nice work buddy! Keep posting
that was awesome dude! Thank you Thank You!
Subscribed to see more videos on Shopify development.
Great Video, thank you!
Thanks for the videos bro
This was very helpful ⚡️
You are doing great work on youtube.
Very helpful, exactly what I was looking for. Thank you so much.
Holy crap I just found the Shopify Conor McGregor :D
thank you very much for sharing
Hey, Thanks for your content
Thanks for your help 👍👍👍
Thank you so much
It worked. Thanks.
Great video! Quick question regarding overriding an existing class in the theme file (theme.scss.liquid). The 'custom.css' method doesn't seem to work. From what I've read it has something to do with the way Shopify compiles its files. What is the best way to do this? Would I create a 'custom.scss.liquid' versus a .css file? Most videos I've seen the folks are modifying the theme scss file which I want to avoid. I believe you even recommended this in the beginning of this video. Thanks!
Love it
Hi
a question please:
in case I want to add ads from a popunder page, and this page gives me the code to be inserted, where would I do it?
thanks
You save my job thank you
Very useful!
Belle réalisation !
HI! I have a problem with my footer. It doesn't have a bootstrap when I check it on my phone. The Shopify is bootstrap already or needs to do bootstrap?
More videos like this please.
This might be a stupid question but whenever I type in @import the @import is greyed out and it doesn't give me any option to include the custom.css file. What am I doing wrong?
superb...
great video for beginners in such a high quality. I love it ❤️
Thank you for this tutorial! Is it possible to create a tutorial on how to add custom fonts from Google? Shopify changed the way it handles fonts, and I am all sorts of confused and maybe sad.
Hey Jody, I am using Motion theme. How do I set different website hero for mobile & desktop? Any suggestions.
Hello, thank you very much for the tutorial, I am trying to modify the css of a shopify template narrative, specifically to make the header static with position: fixed and with a width: 100% but that they are not changed in the responsive version of mobile. help me? Greetings from Spain
Hi. How can i add a second add to cart button ? I have turbo theme
you deserve more subscriber
Nice!
Hey Jody quick question do you know how to properly set up the email in shopify? Ex "subscribe now" so that when someone join your email list the names are collected in the backend dashboard. Thanks for your time.
How do you change image slide banners to the same size? Mine showing different sizes. I been trying to figure it out but no luck. Thanks
Hello I would like to know to change the font size of the menu, how should I do? I am using the Debut theme
I did a form in Active campaign to flow into a newsletter automation I made. It gave me the custom CSS at the end of the form. I tried to copy it in to Shopify the same way you showed here with no luck. Not sure what i am doing wrong..
I cant seem to change my drop down menu theme color. I have a black background and the general text color is white. so in the drop down the white text can't be seen. I can't for the love of God find how to record the color I've been in assets for the last two weeks. If you can help that would be great
Hello How do I add this boarder around only my featured collection? And not the entire page
Hi, thank you for this video.
I am not sure but when i test it on my demo store it works but when I try it on my client's duplicate store it doesn't work. When I preview it there isn't a border. 'm not sure what I'm doing wrong.
How do I make sure it the custom added fonts translates to Mobile view as well?
This video is the easiest I have come across. Can you please do a video on how to to make the images fit the slider. Mine are too big. Thank you in advance
Great video for a begginer, thanks! Can you show how you can change code css in a code editor like Visual Studio Code?
This is helpful thank you. Quick question. I'm trying to create a link to a main picture in shopify. How do I go about doing that. [In order words im creating my own main image on the homepage, with my own call to action but I need that picture to be linked. How do I do that in shopify?
Hi. Is JavaScript knowledge important in order to work with Shopify themes? I recently discovered Shopify and considers offering it as a service. No idea yet on how to go about it but I figured work will include customizing themes. Thank you!
I'd love to see coding tutorials for phone side of things. I hate the square drop down menus for navigation on phone vers of websites. It be cool to see some ways to html/css some different styles of navigation display for the phone side of things. Thanks!
thank you sooo much
\
but how do target specific tags hello?
Is there a way from looking at the source code to know exactly which file would hold the section code I'm looking for?
Im having a problem with the digital receipts. in shopify it gives me a mock up of the receipt that i can edit but its only for the store when i print out the receipt. and when i email a receipt to a customer it doesnt show the correct info that it shows me on the mock up receipt inside shopify so how do I get them to match? in the help.shopify.com it gives me this tip and a code. "If you want to edit your email and SMS receipts, then go to the Notifications page of your Shopify admin, and edit the POS and mobile receipt template." but im not programmer so i kno its written in html and can read it alittle but not all the way so i def need some help
Have you ever seen this error before? If so, how can I fix it? . . . missing translation: "t:sections.image-banner.settings.color_scheme.label" is not present in any of the ["en-US", "en"] schema locale files
thanks for the tutorial :D I hope u continued this
Genial!
I did follow your tutorial but it seems that browser doesn't rfresh CSS, I'm using themekit and working locally
but when i changed to green color it's not working
body{
border: 4px solid green;
}
Jody can you help me with my store as I am dealing with multiple currency but at checkout the currency resets.Please help asap
Thanks.
This would normally be so helpful if it was up to date with Shopify's current way of doing things. They deprecated SCSS a couple of months ago. I hope you do an updated video.
i run on same problem
Vun=llo
Hi Desiree, do you know of any tutorials going over the Shopify layout as of May 2023? I'm looking over documentation, but it be super helpful to see a video that does a step-by-step overview. Thanks
Hii bro can you please give me suggestion how to change color for swatches example i want to change red color to orange how we can do it with the help of code?
Can i edit the background on a footer?
if so how ?
I still dont know what to do... but you did a great job!
Coool
Is there a way to create a custom button? like maybe turn a png image into a button?
Really good video man! Awesome and useful! 😄 If could make a video to know how to change more things on themes will be perfect! Like the background, bottoms colors, lines colors and things like that! 😊 Thank for sharing, I wish you nice day man!
BTW I love the way you explain yourself, you should make more videos I'm sure you have more stuff to show us!
BTW ehat theme did you use for the DEMO? could ypu please answer me this? thank you! :D
How i can change only the menu color
when i delete the border, save then preview, the border does not go. anyone no why???
Hi Jody, great video! I would like to ask how do you override the framework CSS settings? One of the headers that I want to change in the Debut won't update. I want the text-transform to be none, not uppercase.
.
Wanted to make small changes and this is exactly what I needed. Would love to learn how to create custom pages on Shopify if you have any recommendations. Eg would be an about page, with multiple sections / divs.
I’ve been contemplating making tutorials on this for years, do you think there’re enough people that are as curious as you are regarding this?
@@vladislavsmolyanskyy4119how do u guys find out the name of the selectors?
why does my shopify not show add custom css at the bottom?
Please tell me how to add Preloader in Shopify with coding?
Very clear explanation! Thanks! I have a question that I'm hoping you can answer. If you embed a pop-up form to the index page of the Shopify site, can you edit the styles of that form the same way you are doing here? I have been trying to do that but it's not working. To make sure I'm selecting the right elements to put in my new stylesheet, I'm using Chrome developer tools and getting the selectors from there. My new stylesheet is also imported it. Now I'm wondering if since the form is using JSON data from MailChimp it cannot be changed in this way? If anyone has an idea, please let me know.
Hi Jennifer, That's a tricky question to answer because it all depends on how you are including the popup. There is a specific order in which styles are applied to elements on a page. Without seeing what you are building I need make some assumptions. So please forgive me if I get any of this wrong, but I would suspect the reason its not working is because you are including your mailchimp code with javascript so the css has already loaded on your page when your form shows up. If that's the case you will need to actually make your CSS changes in Mailchimp, not Shopify. I believe Mailchimp has another way to include your form that will allow you to apply your site styles to it, through pre-defined classes or through HTML.
@@howtoshopify Thanks Bro,, You are amazing guy and wonderful mentor... Thanks for the support you gave us by making wonderful videos and even answering the problems asked in comments section... Your opinion and suggestions are highly valued.. Love you from heart !!!
good
Hello I want menu item be on the same line anyone have a idea pls
Hi @Jody Edgar - The Shopify Expert I have a question. Let's say I want to custom a button. I already did inspect.
The button's css in the file theme.scss.liquid is:
.btn,
.rte .btn,
.shopify-payment-button .shopify-payment-button__button--unbranded,
.product-reviews .spr-summary-actions a,
.product-reviews .spr-button {
}
How do I implement the custom changes in the custom.css? Does it overides it?
As long as your new css rule is below the existing rule it should overwrite it.
I follow the exact instructions but it does not work :(
If I use the border test on the theme.scss.liquid file it works but not when I link the custom.css page any advice?
yeah, didn't work for me either. When I look at the page source, it's clear it's not importing custom.css.
didn't really work for me either and i found out its because the @import that he did so i replace it with this code, go to your theme liquid under layout tab, and add this code {{ {{'custom.scss.scss' | asset_url | stylesheet_tag }}
{{ 'theme.scss.scss' | asset_url | stylesheet_tag }}
works now . i don't know how its working like that for him, wish he can explain more
@@KathyLongSEO eh nevermind even that stopped working for some reason, i dunoo im confused now it was working now idk what happened
It appears to have stopped importing the custom.css file to the theme.scss.liquid file. The only work around I can see is to NOT import the custom.css file and add all your custom CSS at the very end of the theme.scss.liquid file. He cautions us not to do this at 3:22, but until there's an update for these instructions, it's the only way I'm getting it to work.
@@arabianprincess6730 Thank you!! That worked!!!!
What is there is not a scss file?
hey Jody,great video by the way,can you show us also how to add individual css on each page,say on the cart page,you want only to disable the logo link and the menu links on that page only,how can you do it?
While I don't recommend adding individual CSS to each page, you can always add a tag to the top of your page template. So for example if you want to add special CSS to the cart page. You would add .logo {display:none;} to the cart.liquid page and it would hide any element with the class="logo" on it.
How can I change the Notification Promo colour? I dont know how, please help me! (venture theme)
When you say Notification Promo Color, do you mean an element on your theme that shows notifications? I would recommend looking in customize theme settings under colors. There should be an option for you to change color you are looking for. Alternatively, if there isn't an option you can always change the color through CSS.
@@howtoshopify Thanks you very much !!
Hi, is there a way to code a custom 404 page with implementing images?
Yes. There is a template called 404 under the edit code section of your theme. You can change the page like any other template.
This did not work for me. I recently updated from an old theme. styles.css.liquid was added to the assets but style.scss.liquid is still there also. Am I supposed to keep both files? I tried adding @import "custom.css" with body { 4px solid red; } in that file and it did not appear in my frontend.
I do not have a theme.scss.liquid file. That must be the problem. This is a newly updated version of Parallax theme. Should all themes have that file or would they name it differently for some reason?
Parallax theme requires edit to be made to theme.liquid file. Then I added this code: {{ 'custom.css' | asset_url | stylesheet_tag }}
and it worked!
@@talfrei Hi, i'm having the same issue with the icon theme. i don't have the theme.scss.liquid file. Did you end up following all the other steps as presented here in this video, except in the theme.liquid file? Thanks for any advice. :)
Hi, this works but whenever i change the code. it doesn't reflect on preview anymore.
Yes. Preview is a snapshot of when you hit the preview. You need to click the preview button again or refresh the page. If you keep the preview window open and make a change in the code and hit save. It should refresh the preview pane automatically.
How to custom html into theme ?
Great Video! I have a question. I applied some changes and the styles doesn't change, seems to be like a cache issue or something. Anyone knows how this can be solved?
Make sure you are previewing the correct theme / page template. I recommend holding CTRL and Clicking the Preview button. Then when you make changes to the page template the theme preview will auto refresh. Shopify's CDN doesn't cache CSS for very long, maybe 2 - 3 seconds.
Thanks from Ukraine)
Hi. Nice video! I have a question. I have embed a youtube link for the media description of a product. When I am searching the product, the first time it shows only an image of the embed video. Is there a possibility the show the product with the video player directly, instead of that image?..and only if the buyer clicks on the title of the product to see the detailes of the product?
I'm not 100% sure I totally understand what you are trying to do, but you should be able to show the video player and any point if you custom code it. However, I should point out that the rules for video are different on Mobile vs Desktop. Mobile requires the user to click play, it won't autoplay on page load so if the image you are seeing is the play thumbnail there is nothing else you can do. Do you have an example of what you are trying to achieve?
Ok, so here are the steps:
1.Search "action music" on the website search bar.
2.A list of action music products(music tracks) appear, each of them with their thumbnail
If I would like to play and hear the music, I have to click on each of the product and enter on product details.And for an other track I have to go back one step.But I would like to click directley on the product and play the music, without to enter the product details.
Ok. I see what you mean. I would recommend you store the URL for the video in a product meta field, so it’s easy to access through liquid. Then you can pull the meta field URL on the search page when the results are displayed and have it preview as a video player instead of a link to the product.
Ok.Thank you.Am I able to do this avoiding the code editing?
@@LucianMarzaMusic No, unfortunately, it will require editing the code.
How can I edit my website logo size in the Highlight theme
You might find the setting for the logo size in the theme settings however, most times the size of elements are directly tied to other elements on the theme so changing one will affect each other one.