To install the App, you simply need to go to https://apps.shopify.com/product-colors, and click on the Add App button. Accept the app permissions as well as the monthly charge to complete the installation. You then need to click on the Activate App Embed button to turn on the app on your theme. The app should work fine and requires no coding. (If you have issues, please contact us and we'll solve the problem for you)
No programming or coding skills are necessary to install or to use the App.
Make sure to click on the save button in your theme customizer after you activate the app embed.
You can find a demonstration store showing how this app can be used: https://product-colors.myshopify.com/products/red-bagpack
Open the app and click on the green plus button under the Product Group heading. Use the search tool to add products to the group. Assign a swatch for each product in the group. You can create single color, two colors or even pattern/image swatches. The App was made to be very simple to use but still have a lot of advanced features. The way the app works is that you have to link your products of different colors by creating product groups. If you sell a backpack in different colors, you'll have to link the different "products" under the same product group.
Once you'll hit save, the swatches will appear on the selected products!
For further customization, you can go to the settings tab and select a swatch style as well as some other options that affect the tooltip, swatch size...
Here is a demo of how the app works:
Modifications made through the app take a dozen minutes before they propagate to the live store.
The Product Colors app works if your colors are setup as separate products (one different product page for each color). The app links those products through swatches when you create product groups.
If you want to uses variants for your colors, you should instead use this other app:
Swatches
To change the styling of the label, you need to add CSS code to your theme's stylesheet in the assets folder (the file is usually called styles.scss.liquid). The CSS code that you need to add should look something like:
.webyzeProductColorsLabel {
font-weight: normal !important;
}
The app automatically detects where is the product form and adds the product colors there. If you want to manually add the product colors at a specific location in your product page form, you need to add this line of code at that specific location:
<div id="webyze-product-colors-{{ product.id }}"></div>
If you product is no longer available (out of stock) or has been deleted, you must also manually remove the color from the product group it belongs to since the product's URL is invalid.
If you the URL of the product has changed, you simply need to open the product group it belongs to and click on the Save button. This will force our app to update the product url to the new one.
The Product Colors app adds a color field to your product pages. If you have a Color option as well in your product, then you will end up with two fields. We recommend removing the color option from your product so that you only have one color field in your product page.
Remove an variant option from a product
At this time, the Product Colors app doesn't support displaying swatches on collection pages since it requires implementing custom coding to your theme. We offer an installation service (for most themes) where we integrate the swatches on collection pages (under the product images) for a $120 one-time fee. If you are interested in this, you can contact us at: contactuser@domainwebyze.extcom
Make sure to specify that you are refering to the Product Colors app and provide details such as a URL of a product page that already uses the Product Colorss app.
Feel free to leave a review for our App on the Shopify App Store. You can give us feedback and contact us at: contactuser@domainwebyze.extcom