This time, we will introduce "Swatch King," an app that allows you to easily change the design of the variation "swatches" and "buttons" displayed on product pages and collection pages.
This is a very useful app that not only allows you to change the design but also allows you to connect product pages with different URLs using swatches and buttons.
<Table of Contents>
・Recommended for these people!
- Change the design of the variation selection button on the product page.
- Display variation swatches on collection pages.
-Create product groups and link product pages with different URLs.
etc.
・There may be a slight lag before the display begins, but this is within acceptable limits.
- I want the variation selection buttons on the product page to be displayed as images (swatches).
- I want to display swatches of product variations on the collection page.
- Product pages are divided by color and size, but we want to increase navigation.
*This is written under the assumption that you have already opened a store on Shopify.
・Go to the "Swatch King" introduction page on the Shopify App Store. Click "Add App" to download the app.
https://apps.shopify.com/variant-swatch-king
Plans vary depending on your Shopify subscription plan. Features are the same regardless of plan.
・Basic: $14.9/month ・Shopify: $29.9/month ・Advanced: $49.9/month ・Plus: $49.9/month *As of January 2025
- Changed the design of the variation selection button on the product page
First, arrange the design on the “Product page styles” page.
There are various types, including buttons, drop-downs, and images (swatches), and you can make detailed modifications to each one using "Customize."
Then, on the “Shopify variants” page, you can set which design you want for each option.
Color options can be set as swatches, sizes as buttons, etc.
- Display swatches of product variations on collection pages
Arrange your design on the "Collection page styles" page.
There are various types, such as buttons and images (swatches), and you can make detailed modifications to each one using "Customize."
Then, on the “Shopify variants” page, you can set which design you want for each option.
You can set each option to show swatches for color options, or nothing for sizes.
-Create product groups and link product pages with different URLs.
Click "Add group" on the "Product groups" page.
Enter an administration name in "Group name" and an item name to be displayed on the page in "Option name" (color, size, etc.).
Add products to Products, enter option names for each one (red or blue, M or L, etc.), save, and you're done.
Please refer to the official demo page for an example.
https://variantking.ai/products/beige-self-design-twist-knot-top
Can you see how the URL of the page changes when you click on a color option?
In this way, you can link product pages that are originally located at different URLs together as if they were variation selections.
What did you think?
This time we introduced the Shopify app "Swatch King."
If you would like to know more, please feel free to contact Formix.
■Operating company introduction
Formix is a Shopify Certified Partner .
Of course, you can switch to Shopify from other platforms.
"This is my first time building an online store, but I'd like to get started."
"I'm a bit worried about building a site on Shopify right from the start."
For customers who wish to do so, we can also propose initial construction on other platforms.
Please feel free to contact us regarding post-publication operations.
▶For inquiries regarding Shopify construction, please click here
▶For inquiries regarding EC site operations and logistics management, please click here
Author: Ouchi
Director who loves camping. Can't get out of the camping gear swamp
