Help / Support
Getting Started / Tutorial
To help you get started using the app, we have made a video tutorial going through the different features available in the app:
Frequently Asked Questions
How to install the app on my theme?
The app is easy to install and doesn't require any coding. You simply need to follow these steps:
1. Install the app through the Shopify App Store
Visit this page and click on the "Install" button
2. In your theme customizer, go to the App Embeds panel and enable the Swatch Colors Ultimator app.
3. Go to the product template section of the theme and add an app block to your product form (we recommend adding it before the variant picker) and choose the Swatch Colors Ultimator App Block.
4. The app is now ready to be used. You can open the app and start creating swatches and product groups.
Can I see a Demo Store
Yes, here's a link to a demo store for you to test the app:
View Demo Store
How to connect my product pages using color swatches
1. Head to the Product Colors section of the app.
2. Click on Add Product Group
3. Select the products that you want to link together and click on Select products
4. You can then type the color name for each product
If a swatch for that particular color name already exist, it will automatically show the swatch for that color name.
Otherwise, you can also create a swatch for that color name.
5. You can save the product group
Note: A product can only belong to a single product group. If a product you're trying to add is already part of a different product group, you will get a message asking if you want to remove it from the other product group first.
Does the app support collection pages
Yes, in the app's settings, there's an option to enable the swatches on collection pages. You simply need to enable that setting and the swatches will automatically detect products in the collection page and featured products. The integration should be seamless and automatic.
You also have access to various settings to customize the look and behavior of the swatches that display on collection pages.
The app doesn't work on my new theme
Make sure to follow the installation instructions and make sure that both the app embed and the app block are set up properly.
If it still doesn't work, you can reach out to us for further assistance.
My colors are set up as variants, how to use the app?
If you want to setup swatches on variant options, then you do not need to create product groups. You simply need to create swatches directly in the "Swatches" section of the app.
The app will automatically assign the right swatch to your options based on the name of the option. If you have a "Red" color option, then you simply need to create a "Red" swatch in the app.
The app will automatically replace the built-in dropdown / buttons variant picker into beautiful swatches.
To help you get started, you can also use the Auto-detect swatches button at the top of the Swatches section of the app to quickly and easily import your colors right in the app with little effort.
My colors are set up as separate products, how to use the app?
1. Head to the Product Colors section of the app.
2. Click on Add Product Group
3. Select the products that you want to link together and click on Select products
4. You can then type the color name for each product
If a swatch for that particular color name already exist, it will automatically show the swatch for that color name.
Otherwise, you can also create a swatch for that color name.
5. You can save the product group
Note: A product can only belong to a single product group. If a product you're trying to add is already part of a different product group, you will get a message asking if you want to remove it from the other product group first.
On my collection pages, there are two swatch fields showing up
The second swatch field is likely coming from your theme. To only display the swatch field from our app, you can go to your theme settings and try to find an option to disable the built-in swatches on collection pages.
How to manually inject the swatches in my theme
You can manually inject the product grouping swatches in your theme by adding this liquid code to your theme:
<scu-option data-handle="{{ product.handle }}"></scu-option>To inject collection page swatches (in the product grid items), then you need to use this liquid code:
<scu-option data-handle="{{ product.handle }}" data-grid-item></scu-option>I want to unsubscribe from the app?
To unsubscribe from the app, you simply need to uninstall the app from your shopify plan. Your subscription will automatically be canceled.
Will the app leave unwanted code in my theme if I decide to uninstall it?
No, the app doesn't edit any of your theme files and doesn't change any code in your theme. It injects itself dynamically through app embeds which means that if you uninstall it, there will be no trace of it at all on your theme.
The swatches are not showing up on the collection page
The app automatically detects the grid items of your collection pages and integrate the swatches into them. Our integration should work perfectly fine on most themes without any manual intervention. If it is not working properly, you can manually inject the swatches into the grid item elements of your collection page using this simple code:
<scu-option data-handle="{{ product.handle }}" data-grid-item></scu-option>For further assistance, feel free to reach out to us.