Shopify Color Filters Tutorial 2024 - Color Swatches (finally!)
Vložit
- čas přidán 24. 07. 2024
- Shopify's recent update supports "visual filters". Now we can set up color swatches in filters across all themes - including Dawn and all the free themes.
Color Palettes:
- materialuicolors.co/
- flatuicolors.com/
- htmlcolorcodes.com/color-char...
📢 STAY UPDATED
Subscribe to my newsletter: ed.codes/newsletter
CZcams won’t always show you my latest videos, subscribe to be notified and see other content that I don't post on CZcams.
🙏 SUPPORT THE CHANNEL
Buy me a coffee - www.buymeacoffee.com/edcodes
Patreon - / edcodes
🛠 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
All listed on my website - ed.codes/tools
📚 MY SHOPIFY CODING EBOOK
ed.codes/shopify-coding-handbook
Learn HTML, CSS and Shopify Liquid from the beginning and specifically for Shopify.
👨🏼💻 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:
ed.codes/community
⏭ CHAPTERS
00:00 Intro
01:22 Requirements
02:12 My demo products
02:38 Variant filters (old)
04:32 Metafield filters (old)
06:45 Metaobject color filters (new)
07:51 Define the Metaobject
08:40 Create your colors list
09:58 Create color metafield
11:19 Connect products to colors
12:02 Create the filter
13:24 Image swatches
#Shopify #Colorfilters #shopifyfilters
![How To Add Color Swatches On Product Page Shopify [Dawn 13.0.1]](http://i.ytimg.com/vi/OkJZbJyNNx8/mqdefault.jpg)
![Shopify Tutorial - How To Add Color Swatches [beginner friendly]](/img/n.gif)
Very nice video. Super helpful! Keep them coming
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.
Thank you! This is very helpful in describing how metaobjects can be used for swatches in filters.
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.
Really like your videos. Keep it up!
Very helpfull, Thank you Ed
Excellent information, Ed! I am happy to have discovered a theme developer like you to work on future projects. I feel so blessed.
Thank you!
Fala, works perfect! Thanks.
Great video as usual! I don’t need this for my site yet.
You are the best Shopify CZcamsr! You’re so good at explaining things so normal people can understand. Keep doing what you’re doing!
Thank you! I will!
@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!
Excellent tutorial
God bless u, finally found the solution to my problem
The most descriptive and perfect video I have ever seen in my life. thank you superman
😂
@@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.
Very very useful. Thanks
Helpful Ed codes, thanks for sharing this secret
@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.
Great video! Are you able to show us on how to show size swatches on a collection pages! That will be awesome - thanks
Nice video
Thank you, dear Ed! Did you explain a solution for how to add a two-color (or multicolor) entry by chance?
Nice Video - I would like to use this method for users to select frame colors for artwork that we sell.
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
Thanks a lot great tutorial can you please also create a price range slider ..... inside dawn theme
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?
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?
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..
Hey Ed, again a great and helpful video! Will this tutorial be impacted, once Shopify will release the Rich attributes / taxonomy update where Shopify?
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.
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?
Thank you so much! Is it possible to filter by color (blue for example) and show the image related to the chosen color?
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 :)
Hi Ed, how to add the colors for a product with different variants?
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!
I have a Dawn 2.0 version of shopify theme, do i can implement this color swatch functionality on my theme
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!!!
I found it!!! "Desktop filter layout" *facepalm*
🤦♀
Thanks for the video. Is there an easy way to prefill like 100 different color options into this metaobject? :)
Either use the bulk editor inside Shopify product admin, or use Matrixify to export -> edit in Excel -> re-import
Is there a way to show color filter (or any other filter) on a collection page but hide it on another?
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.
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?
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
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
czcams.com/video/lOoViP9Nbnk/video.htmlsi=vatgHWOkoLk0hW90&t=645
@@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
Hello! Great tutorial but I can't get the swatch colors to show. It's still only text.
Is your theme up to date?
Does this work in Prestige theme? I have tried but it's not working
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
Can't we change these swatches size and sape ?
Is this working just with premium option?
Hey Ed! Can we just keep swatches without color names and quantity?
Does this work on Warehouse theme?
Does it work with debutify
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?
If we have two products, we need to display two different fabrics in the swatch for single colour.
top
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?
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.
@@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.
What about product page and collection page, is that still not available?
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.
@@EdCodes Great video! In the product page, it says "Enable swatches on product options". How to go about this for apparel?
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.
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.
I agree
Do you still do customer work? Can i hire you?
Only very small projects these days. Please see - ed.codes/services