[Shopify Tips] Introducing how to display complex colors and images in color swatches!
Products sold on an e-commerce site can have a wide variety of variations, such as products with complex colors or patterns.
Also, when shopping online where you cannot see the actual product, not being able to visually check these variations can often lead to mismatches after purchase.
Therefore, by reducing user concerns, you can improve the purchasing experience and conversion rates.
This time, we will introduce you to a method for displaying detailed color charts that can reduce such mismatches!
table of contents
What is a color chart?
A color chart is a color sample displayed on e-commerce sites, product catalogs, etc. when a product has multiple color variations (color range) to visually show each color.
It is usually displayed in the following format:
A sequence of colored squares or circles: Each color variation is displayed as a small square or circle (swatch), and clicking on it will change the product image to that color or display more information.
Color Name Display: The name of the color (e.g. Red, Blue, Black, White) will be written beneath each swatch.
Image interaction: Clicking on a color swatch will typically change the main product image to that color.
About displaying color charts using meta objects
The method of displaying a color chart that we will introduce this time uses Shopify's meta object.
The setup steps are as follows:
Definition of meta object "color"
> Create an entry for each color
> Linking meta object reference meta fields to product variations
>Display in theme
Now, let's take a look at each of the above steps one by one!
Defining the "color" of a meta object
On the Shopify admin page,
Go to the "Content" > "Meta Objects" page.
A "Color" definition has been created by default, so we will add entries to this definition.
Create an entry for each color
Click the "Add entry" button on the top right
After the transition, enter the required information.
・Label: Display name of the entry
・Image: This time we will add and use a square image here.
・Base color: Select the base color for the color you want to set.
・Base pattern: Select the pattern to set
Once you have completed the above input, click the "Save" button at the bottom right.
Follow the same procedure to register as many color and pattern images as you need.
Linking meta fields to meta object references
In the Shopify admin screen, go to "Product Management" > the relevant product registration page.
In the "Category metafields" section of the product registration page, the "Color" meta object should be displayed. Click the icon that says "Connect to option" to connect.
> Add all the color variations you want to set
The connection will then be reflected in the "Variants" section, and all of the colors you selected will be registered.
Display in Theme
This time,PinnacleWe will set it up using the theme "!
From the Shopify admin screen, go to "Online Store" > Customizer operation screen.
Once you open the customizer,
Open "Theme Settings" > "Color Swatches" and enter the option name you entered in the Variant section of the product page in the "Variant option for swatches" section.
※Enter "Color" this time
Next, go to the product page and enable "Enable color swatches" in the "Variant picker" section.
Once you have completed this process, the colors you registered will be displayed on your collection and product pages.
summary
This time, we introduced how to display complex color swatches in themes!
With just a few small improvements, you can improve your store's UI/UX, increase conversions, and create a more effective website.
Please try to improve it however you can!
At GO RIDE, we also accept consultations for minor store renovations.
If you have any questions, please feel free to contact us.
We also recommend the following articles!
Popular articles
