Тёмный

Shopify Color Filters Tutorial 2024 - Color Swatches (finally!) 

Ed Codes - Shopify Tutorials
Подписаться 24 тыс.
Просмотров 26 тыс.
50% 1

Опубликовано:

 

12 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 81   
@nextlevel-ecom
@nextlevel-ecom 2 дня назад
Love the speed! No time wasted 🚀 Keep up the good work!
@roiseaux
@roiseaux 6 месяцев назад
@EdCodes I already have Dawn 13, but I still can't set up swatches on the product page? Could you please do a tutorial on how to enable this? Thank you!
@Korriva
@Korriva 4 месяца назад
The most descriptive and perfect video I have ever seen in my life. thank you superman
@EdCodes
@EdCodes 4 месяца назад
😂
@Korriva
@Korriva 4 месяца назад
@@EdCodes I need help with a small issue. I think you are knowledgeable on this subject. Can you help? I want to add images to some of the variations in my product, the image will appear instead of text. I can send an example image.
@ThomasHautmann-p3q
@ThomasHautmann-p3q 5 месяцев назад
A good way to make the filter more efficiant is to set up the metafield as a variant metafield instead of a product metafield. After this the filter will automatically show the variant image in the product card after selecting.
@macdonaldquammie4021
@macdonaldquammie4021 7 месяцев назад
Excellent information, Ed! I am happy to have discovered a theme developer like you to work on future projects. I feel so blessed.
@EdCodes
@EdCodes 6 месяцев назад
Thank you!
@Fedgery007
@Fedgery007 7 месяцев назад
Great video as usual! I don’t need this for my site yet. You are the best Shopify RU-vidr! You’re so good at explaining things so normal people can understand. Keep doing what you’re doing!
@EdCodes
@EdCodes 7 месяцев назад
Thank you! I will!
@meanwhile.boutique
@meanwhile.boutique 4 месяца назад
Thank youuu! We have been searching for the filter for years!!! Thank you very much for your tutorial 🌿 All the sustainability brands from Meanwhile Boutique also thank you.
@rav7ss423
@rav7ss423 6 месяцев назад
Great video! Are you able to show us on how to show size swatches on a collection pages! That will be awesome - thanks
@joedully1944
@joedully1944 7 месяцев назад
Thank you! This is very helpful in describing how metaobjects can be used for swatches in filters.
@sergeif
@sergeif 6 месяцев назад
Very nice video. Super helpful! Keep them coming
@GommeBleu
@GommeBleu Месяц назад
God bless u, finally found the solution to my problem
@FaysalEcommerce
@FaysalEcommerce 3 месяца назад
Helpful Ed codes, thanks for sharing this secret
@freddie_hall
@freddie_hall 4 месяца назад
Really like your videos. Keep it up!
@olgabaykova8338
@olgabaykova8338 3 месяца назад
Thank you, dear Ed! Did you explain a solution for how to add a two-color (or multicolor) entry by chance?
@Rivaaz-br2sl
@Rivaaz-br2sl 4 месяца назад
Very very useful. Thanks
@canvasartplus
@canvasartplus 5 месяцев назад
Nice Video - I would like to use this method for users to select frame colors for artwork that we sell.
@pabloalvezmanoli7964
@pabloalvezmanoli7964 6 месяцев назад
Thanks for the Tutorial! New subscriber here. I followed all the steps, but the color swatches are not displayed. It says "this metaobject reference list contains no fields that are compatible with this block". Do you know how can I solve this?
@anirbandutta617
@anirbandutta617 4 месяца назад
Thanks a lot great tutorial can you please also create a price range slider ..... inside dawn theme
@Johnny4200
@Johnny4200 6 месяцев назад
I have tried to get the color swatches on the product page with this tutorial for meta objects, and tried to recreate the steps in the shopify tutorial for color swatches on product page. I dont really need the filters option, but thought the steps for the swatches on product page are the same like the in your tutorial. But I can‘t follow the steps on the shopify text based tutorial. I think there are missing some steps or are not avaliable? I already installed Dawn 13, but I feel so stupid all the time when doing stuff like this..
@danycabdallah3599
@danycabdallah3599 6 месяцев назад
Very helpfull, Thank you Ed
@wavefitactivewear1201
@wavefitactivewear1201 6 месяцев назад
Pretty straight forward video!! Awesome! How can you show the swatches on the product page? It shows as filters but product page still shows the buttons with names of colors
@EdCodes
@EdCodes 6 месяцев назад
If you mean on Dawn / free themes it's not out yet. You need to wait for the new "product attributes" features to be released. And you will need to be using Dawn v13 or later. I talk about this in my Shopify editions video around 10:45 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-lOoViP9Nbnk.htmlsi=vatgHWOkoLk0hW90&t=645
@wavefitactivewear1201
@wavefitactivewear1201 6 месяцев назад
@@EdCodes Thanks mate! Yes I am using Dawn V13.0 and trying at all costs to get swatches on products page. Also trying to get rid of choose option buttons and actually show the swatched on collection pages without using an app to do that
@coconutsoak
@coconutsoak 4 месяца назад
@EdCodes - Thanks! This works! - Is there a way to bulk update all the meta objects for all products instead of going into each one and selecting them individually. Also for other folks - this is for the Product Cards page and not the Product page specifically so it wont work on the Product Page.
@user-tx3lp7eg4b
@user-tx3lp7eg4b 5 месяцев назад
Excellent tutorial
@OnlyOneKich
@OnlyOneKich 5 месяцев назад
Fala, works perfect! Thanks.
@RiversideVideo47
@RiversideVideo47 6 месяцев назад
Your videos are great. However, after following all the steps you described I cannot work out how to make the metaobject/colour swatch show on any page. I'm guessing it's something to do with adding a block or section to the product page then linking to the metaobject, but I can't figure it out. Could you clarify? Thanks
@anapaiva3167
@anapaiva3167 7 дней назад
I'm in the same situation
@killerfaithfish
@killerfaithfish 6 месяцев назад
This is insane for the amount of time that has to be put in to put in a color swatch... smh shopify needs to release the swatches faster.
@EdCodes
@EdCodes 6 месяцев назад
It's not really that much time, the main tutorial starts at 07:52 and after you define the metaobjects and metafields (one time), adding new colors while uploading new products is fairly quick.
@natalieidle3754
@natalieidle3754 6 месяцев назад
I agree
@truecolourbeauty
@truecolourbeauty 2 месяца назад
Video helped a lot and I have it set up, How do I add individual color swatches to the product variants. I have yet to find that video. I have a beauty store and want to add they individual swatches to each lipstick or eyeshadow. So Frustrating!
@Burky5516
@Burky5516 5 месяцев назад
Great video but I have a question. Before I delete color file that I have grouped them. How Can I only display what we created with your video?
@mohitbeniwal3425
@mohitbeniwal3425 3 месяца назад
Can't we change these swatches size and sape ?
@bjpcorp
@bjpcorp 8 дней назад
When creating a product and selecting the category 'Fabric in Textiles' Shopify automatically creates 3x 'Category Metafields' (Color, Fabric & Care Instructions). I can't seem to use these metafields in a filter, I don't see the metaobject or metafields, is there a way to use these category metafields in a filter? ☺
@xSM666x
@xSM666x 7 месяцев назад
Hey Ed, again a great and helpful video! Will this tutorial be impacted, once Shopify will release the Rich attributes / taxonomy update where Shopify?
@EdCodes
@EdCodes 7 месяцев назад
Great question. Yes, I expect it will be impacted. It will likely become easier than I show in the tutorial. So this tutorial would become the "manual" way of doing it. In their demo Shopify show how adding product images will automatically create color swatch metaobjects. So this allows you to skip the steps of defining the metaobject and creating entries (possibly). I suspect the automatic way won't work for all stores 100% of the time and you still need to do it manually sometimes (e.g. for already existing products). I'm just guessing though. We'll see.
@lingo2025
@lingo2025 26 дней назад
They released the category metafield with color but sadly it doesn’t seem to be available to the search and discovery app
@CodeSnap01
@CodeSnap01 3 месяца назад
Nice video
@AshaMandapati
@AshaMandapati 4 месяца назад
Hey Ed! Can we just keep swatches without color names and quantity?
@iselinva
@iselinva 3 месяца назад
When I am going to add the color filter swatch (12:21 in video), it is not an option I can choose. Is there anything wrong I have done doing the process?
@marcoschobermusic
@marcoschobermusic 4 месяца назад
Hi Ed, how to add the colors for a product with different variants?
@WolfeJAM
@WolfeJAM 4 месяца назад
hello, sadly for me the final piece is missing around 13 mins. Where you show "here is the Shopify" update, I'm on V.14 there is no 'Swatch' info at all where you show it. Sad. :( Has it changed again?
@sewingmachineoutlet2537
@sewingmachineoutlet2537 4 месяца назад
Does this work on Warehouse theme?
@nueved9469
@nueved9469 6 месяцев назад
Thank you so much! Is it possible to filter by color (blue for example) and show the image related to the chosen color?
@renetasechkova1559
@renetasechkova1559 6 месяцев назад
Hi, yes, it's possible, you just need to create the metafield under "Variants" instead of "Products". So go to Settings -> Custom Data -> Variants-> Add definition and do what he showed in the video. Then you go to your product, click edit variant and you should see the metafield. In that way when you filter by color it will show the variant picture. Just make sure you add a variant picture :)
@muotitassu
@muotitassu 6 месяцев назад
Thanks for the video. Is there an easy way to prefill like 100 different color options into this metaobject? :)
@EdCodes
@EdCodes 6 месяцев назад
Either use the bulk editor inside Shopify product admin, or use Matrixify to export -> edit in Excel -> re-import
@scooteractual
@scooteractual 5 месяцев назад
Went through the tutorial and added the (3) color options I have (frame colors for photography prints) - They now show up in the product under "metafileds" however I don't know how to "Link" them to specific variants so when you choose the color swatch it changes the photo and ultimately the right product for the customer to add to their cart. Its also of course not showing on the product page on the live site. I'm on the latest version of Dawn. What am I missing?
@kathya0
@kathya0 6 месяцев назад
Hi Ed, I have some questions. Your channel is amazing BTW, THANK YOU!!! I'm using Studio Theme, most of the videos here are for Down theme and it seems I don't have the option to add the filter on the sidebar. is there any way to have it using my current theme? If so, how, where? what about using an app? or custom liquid? HEEEEELP!!!
@kathya0
@kathya0 6 месяцев назад
I found it!!! "Desktop filter layout" *facepalm* 🤦‍♀
@rishabhmaurya9807
@rishabhmaurya9807 4 месяца назад
Does this work in Prestige theme? I have tried but it's not working
@albasebastian4983
@albasebastian4983 6 месяцев назад
Is there a way to show color filter (or any other filter) on a collection page but hide it on another?
@user-xb3hc7ip7r
@user-xb3hc7ip7r 3 месяца назад
I have a Dawn 2.0 version of shopify theme, do i can implement this color swatch functionality on my theme
@MalasbyMahsan
@MalasbyMahsan 4 месяца назад
Is this working just with premium option?
@marcoschobermusic
@marcoschobermusic 4 месяца назад
Is it also possible to display the swatches on a collection page? I don't want to create a seperate product for each variant (thats too much for my store). As example I want to display a overview of products in a collection page and under each product the available colors are listed (swatch buttons). If the customer hovers over a color the picture should change to the corresponding variant.
@healthtips246
@healthtips246 6 месяцев назад
If we have two products, we need to display two different fabrics in the swatch for single colour.
@AstoMedKlinikutrustning
@AstoMedKlinikutrustning 5 месяцев назад
Hello! Great tutorial but I can't get the swatch colors to show. It's still only text.
@EdCodes
@EdCodes 5 месяцев назад
Is your theme up to date?
@oliverraahauge
@oliverraahauge 3 месяца назад
Hey! I had this working for some time. Now suddenly all swatches show as "transparent", although the color hex codes and naming is still correctly there. Anybody know how to solve this issue? Symmetry theme
@benjaminf3465
@benjaminf3465 5 месяцев назад
Does it work with debutify
@RicardoOliveira-wr6ik
@RicardoOliveira-wr6ik 2 месяца назад
top
@miloszlitwinski2544
@miloszlitwinski2544 7 месяцев назад
Hi... I followed the instructions step by step, and for some reason my color is not showing as a swatch, but still as a text and box to click. Any reason why this could be happening?
@EdCodes
@EdCodes 6 месяцев назад
Does your theme version support visual swatches? It needs to be relatively new - if it's one of the free themes from Shopify, it must be version 12 at least.
@miloszlitwinski2544
@miloszlitwinski2544 6 месяцев назад
@@EdCodes Thanks for the reply! I am using the theme fashionopolism, and there was an update not long ago on the website. For some reason all I see is the text of the color.
@Klee87278
@Klee87278 7 месяцев назад
What about product page and collection page, is that still not available?
@EdCodes
@EdCodes 7 месяцев назад
Product page swatches are available in premium themes and in Dawn v13 - check out my previous video talking about Shopify Editions to learn about that. Collection page will depend on theme.
@lunatic_jash
@lunatic_jash 5 месяцев назад
@@EdCodes Great video! In the product page, it says "Enable swatches on product options". How to go about this for apparel?
@daveus111
@daveus111 7 месяцев назад
Do you still do customer work? Can i hire you?
@EdCodes
@EdCodes 7 месяцев назад
Only very small projects these days. Please see - ed.codes/services
@anapaiva3167
@anapaiva3167 7 дней назад
Interesting and unnecessary class. After completing all the steps, now how do I add color filters to the product page???????????????
@EdCodes
@EdCodes 7 дней назад
This is all about filters (collection pages), not the product page color variants. Totally different things.
Далее
The Best FREE Shopify Themes?
6:46
Просмотров 24 тыс.