Custom CSS Shopify 2021 ( Shopify Basic Expert Tutorial ) 

Q

شضش

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

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

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?

.

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

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.

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.

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

As long as your new css rule is below the existing rule it should overwrite it.

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.

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

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

Yes. There is a template called 404 under the edit code section of your theme. You can change the page like any other template.