🎯 Get Personal Career Advice for Shopify Developers: codingwithjan.com/personal-career-advice 👨‍💻 Find a qualified Shopify Developer for your next project: codingwithjan.com/hire-a-developer

if anyone is struggling to find the files tab in settings, it was moved and is now the content tab.

@BlitzBeatyt

4 ай бұрын

Thank you so much for this comment! You're a gem

Yes! Loved these style videos from you! 🙏🏽 Your previous ones really helped me build my website and I really plan to revamp it this year 🙌🏽 Josie was great! What a natural teacher! Her directions were so clear and detailed! 🙏🏽 Keep up the great work everyone!!

Finally development videos 😂❤️ Thank you, it's a good idea to let other people to make the videos as long as it will have the same simplicity as your videos 👏

@CodingWithJan

Жыл бұрын

You acutually pushed me haha 😁 So gotta say thanks for that! 😄

what an amazing tutorial. I only wanted to change my radio buttons to swatch circles. i didnt want the 10 or 20 other customizations for a product, and i didn't want to manuall add swatches to every product like most shopify apps were designed to do. I JUST wanted to have little circles. I have experience in HTML, some css and other stuff. This tutorial was fantastic and helped me do what I needed

This tutorial made my day

Great to see your publishing more technical content on the channel again! Thanks for this awesome tutorial Josie - really neat and user-friendly approach to swatches!

@CodingWithJan

Жыл бұрын

Hey Liam, thanks so much for the great feedback and taking a look!! 😃 I'll make sure Josie also gets to hear it!

5 months later and Dawn 10.0.0 code looks COMPLETELY different from the tutorial 😭

Thank you, true story, all the swatches I use on my shopify projects are all from your first tutorial

Yeessss! Love thisss! Keep it up Jan!

Thanks, Josie--this was super helpful!

Hey Jan, thank you for the development videos. Just an addition with these color swatches, instead of uploading a png, we can use the background-color style and give them value name as a color like this: Thank you!

Love this idea Jan! As a fellow freemoter, I was so excited to learn from Josie! Well done and I’m excited to give this a try! Keep up these videos!

@CodingWithJan

Жыл бұрын

You're the best! :-) I'll make sure Josie gets your great feedback. Thank you Kim! 😃🙌

Very clear and well narrated video ! ❤ Thanks.

Josie is amazing! They did such a good job and I would love to see them in more videos! So helpful!

@CodingWithJan

Жыл бұрын

Hey Arctic, thank you!!

Great video. I do a different approach. Instead of using images, you can create css variables that can be specified in the settings.

Thank you Dude! For this wonderful tutorial

Im using latest version of dawn theme, and the code isnt the same..

Thanks Jan for a very good beginner friendly video, which will help many Shopify users! Would you like to do a video of how to add these to the product card without the size radio buttons. Meaning that you would only need to add the variant options with color. And also make them hoverable to see the product variant image and also clickable to the variant url :)

Love this type of content 🙏 thanks and keep it up 👍

@CodingWithJan

Жыл бұрын

Awesome!! Thanks so much for the great feedback. :-)

Hi! Thank you, very much, this video is amazing and so helpful!

@CodingWithJan

Жыл бұрын

Awesome!! Glad the content was helpful. :-)

Nice tutorial for color swatch

Please Go on Jan! We need more technical videos like these

@CodingWithJan

Жыл бұрын

In the making already!! :-) let us know wat you'd like to see!

@paulmaliakel8231

Жыл бұрын

@@CodingWithJan Just a few suggestions: - Filters, Free shipping bar in cart, Coupon code in cart, Checkout page edits, Shopify Hydrogen, built a simple shopify app, slider notice/announcement bar etc. and more like you used to do in the beginning of the channel:) Anyways, Keep up the good work :)

Hi Jan, thanks for the video. Is there a way to include the colour name when you hover of the swatches?

Excelent thanks

Its too good, My question is how can i show the select color name as well, Color : Pink Thanks in advance

Hi Jan, love your content. I managed to code the swatches on product page (there dawn 9.0), however I need to add the same swatches on collection pages, bellow the title for each product. Can you advise me on that?

Can someone point me to the video on how, if you change picture, the varient pill also changes! Very nice video this one! I'll come back for this one later!

Just wanted to say it is a good video however, I have some points that are important take notice of, 1 the theme has been updated, 2 Sometimes I miss the reasoning behind some of the choices that would make it more clear

great video but i have design custom section for home page to show product grid i want there color swatches when some one select any color image also change, Do you have any video for that?

Doesn't work can't find the "varient-radios" on any theme which is weird

it doesn't work with DAWN 10 the new upgrade, there is no file in the setting to upload the color files how would we do it in DAWN 10

Is there an easy way to save a set of variant options to put across similar products on Shopify? For instance: an apparel business that sells 50 different designs that are each listed as a separate product but each design has variants for size, color and style: tank, tee and sweatshirt. Instead of having to manually put in hundreds of prices for every single product, is that a fast way to pull in the same pricing for each style across all product listings? So all tanks are the same price, all tees are same price, etc.

Is this for an older version of the themes? Cannot seem to find this line of code in the ride theme.

Thank you that's great ! But I have a problem, now the variant cannot be clicked (I made sure i wrote the code correctly). I'm using the sense Theme

Can you please help us with 9.0.0 version?

Thats great

@CodingWithJan

Жыл бұрын

Awesome!! Glad the content was helpful. :-)

woooowooowoowo you are the best

Hi Jan! Is there any way you can help me with my theme? In the Demos of the Theme before buying it it shows that the color swatches option is possible, but after buying it i am not able to add the color swatches. Thank you!

What if we can do it by HTML Color Names Supported by All Browsers. This way we don't need to put manual colors swatches images?

Hi, Question is, this is going to get aplied for all the products by doing this ? or just for the specific product that we are previewing? any advice helps guys, because im worried if i have to do the same for all products since i have a lot. Thanks in advance!

Hi do you know if this works for impulse paid them. I have recently purchased for 350! And when i contacted them there no were to be seen... lol. As there theme comes with colour swatches already i'm trying to edit the colours on the swatches i have followed there instructions on there example page and it doesn't work......Does anyone know any videos or information on this 🙏🙏🙏

I want to add Royal Blue as a variant option but when I upload the file name always comes like Royal_Blue. How can I fix it?

How to make collapsible of description and tabs below tha..

Hello, thank you the tutorial was very helpful and as a beginner I was able to make all the changes myself on my website. Can you also help to provide insight on how to have the color name show when you hover or click on the swatch?

@CodingWithJan

4 ай бұрын

This is called a "tooltip". The easiest implementation would be using the "title" attribute on an html element stackoverflow.com/questions/7503183/what-is-the-easiest-way-to-create-an-html-mouseover-tool-tip

I just updated to version 8 and this code was not the same for me, i could find this part of it

Can you do an update for Dawn Version 12?

Any example of Shopify for selling digital services online?

Great Video! Question is there a way to add the name of the color when you are in the hover state of the button?

@ibrahimkhalil8067

Жыл бұрын

yes, just hide the text with display: none; then while hover display it with display: block;

Great video. Unfortunately doesn´t work anymore with the 8.00 Dawn Version

@weatherbeeshouse1662

Жыл бұрын

the changes now need to be made in the product variant options not main product file

can you also make a tutorial how to add express checkout buttons to Dawn theme cart drawer? which dont disappear on cart refresh

@CodingWithJan

Жыл бұрын

Hi Dorothy, Thank you for the suggestion regarding the addition of express checkout buttons to the Dawn theme cart drawer. I'll be sure to forward this to Jan, and if it aligns with our content direction, we can definitely consider adding it to our list of video topics. Your input is important to us. Best, Joy (Team)

Hello, thank you for this great tutorial. I applied this step by step and the result was great, however I have one problem. The featured picture for the product doesn't disappear when I select a different color, how do I fix this?

@marshallsteve2

9 ай бұрын

You have to set a variant picture for each variant on the product page directly. This doesn't require any coding, it's just part of the Shopify admin panel functionality.

There is no files option in shopify help plz

@TKZLGaming

4 ай бұрын

Its under content G

This is a great tutorial! One question - some colors come in to Shopify as two words creating a filename of, for example: Heather%20Orange.png. File uploads don't honor the same name and convert % character to underscore, and can't be renamed. Any thoughts on approach for color names with two words?

@user-ts6hm7gi4m

Жыл бұрын

Solved. For others, remove the spaces from the Color name: {{ value | remove:" " | append: '.png' | file_url}}

@michaelmillikin7582

Жыл бұрын

@@user-ts6hm7gi4m thank you

@JeremyRodriguez2308

2 ай бұрын

@@user-ts6hm7gi4m love u bro

Please make a video on how to disable 'auto select 1st variant' on product page with multiple variants on Dawn theme

@CodingWithJan

Жыл бұрын

You mean that we don't autoselect the first one?

@fardinqureshi1687

Жыл бұрын

@@CodingWithJan yes there should be a drop down menu for all variants just like empire theme

seems to be not working in Dawn 8.0 there is no such code there:(

This is pretty cool, but I kind of don't like out all the circles have an outline even when not selected. Any way to get rid of that?

@waynefilkins8394

Жыл бұрын

i fixed it :)

It helps! but unfortunately, it is complex and difficult...

Anyway to do this with the spotlight theme?

@erin6122

3 ай бұрын

She did a very nice job was super easy to follow!

Any chance you've ever experienced only SOME of the color backgrounds showing and some not showing? What could be causing this?

@CodingWithJan

7 ай бұрын

Things I'd check first are 1) file names (only letters to be safe) 2) file formats (all the same ideally)

Does this have to be done for every product separately?

@waynefilkins8394

Жыл бұрын

I doubt it. Should be automatic but you'll have to do all your colors for all products and name all the files right

why code site is not working

I want to add variant name like Royal Blue. But when I TRY to upload this name image file on shopify it's coming like Royal_Blue. So I can I fix that?🤔

@breannasayre1053

4 ай бұрын

Hello I added this to the value portion and it worked for me. {{ value | replace:"_", " "}}. And here is where I applied it. {{ value | replace:"_", " "}}

hello! Now there is no option files in the settings to upload the colors we made in canva! how can we solve this problem? thank you

@CodingWithJan

Жыл бұрын

Hello Ela, The Files section, previously found in the settings, has now been relocated. You can access it by clicking on the Content tab, located on the left-hand side of the Shopify Admin. Hope this is helpful. Best, Joy (Team)

@John-qw7qs

11 ай бұрын

@@markob17 Hey, not sure if you still need help but the code for the newer version of the Dawn theme is located in "product-variant-options.liquid" at around line 62

Is there a way to make private pages?

@CodingWithJan

Жыл бұрын

Hi BSR, Yes, in Shopify, you can create private or password-protected pages in a couple of ways: Creating a custom private page using liquid or using apps. If you require further assistance, we're here to help, or we can find someone who can. Can you send us a message via our website? (link in the description) Best, Joy (Team)

Does it still work?

Vivek bhaiya se shikho tab btaao

out dated

A+. We would be interested in some insights with the SHOPIFY CONTACT US PAGE - as we are starting to get a lot of spam. Any development insights to slow down , stop spam to the Shopify Contact Us page?

@tapank415

Жыл бұрын

a captcha may help in that

@surgicalcapscom

Жыл бұрын

@@tapank415 thanks we have captcha thru Shopify automatically on the page

@CodingWithJan

Жыл бұрын

Thanks so much for the great feedback! :-) And we can definitley cover that topic also!