To display color variants on your video players and cards, you will need to have a color variant metafield set up for your products and on your Shopify store.
Create a color variant metafield in Shopify
First, you will need to have the "Color" variant created (either on a product level or on a variant level).
Product level: You can assign the color variant only to one or specific products by going directly to the product's page and creating the variant there.
Variant level: You can create a variant on a global level.
Once the color variant has been created and properly configured (and assigned to the product where you would like to display the color variants), head over to Videowise's dashboard.
On the left sidebar, locate "Settings".
On the settings page, you will find an option to select "Color swatches" on the left sidebar. Click on it, and this will open the settings to configure the color variants and display them on video players.
Configure variants to display
First, depending on how you set it up in the previous step, you will need to determine whether the colour variant is being used at the product level or the variant level.
At product level
On the dropdown option "How you use color metafields in Shopify", select "At product level".
You will be asked to set a name for your variant.
The variant name is case sensitive, so make sure to copy the same name of your variant as it appears on your product's settings page.
Next, from Shopify's admin, you will need to get both the Metafield namespace and the Metafield key.
Head over to Shopify Admin > Settings > Metafields and metaobjects > Products > "Assigned to categories" or "Assigned to products", depending on how it was set up, and locate the "Color" variant.
The metafield namespace and key will appear like that for the default Color variant created by Shopify: "shopify.color-pattern"
The metafield namespace is: "shopify"
The metafield key will be "color-pattern"
Again, this is case-sensitive, so please make sure you copy the text exactly as it appears on Shopify.
At variant level
First, in Videowise, on the dropdown option "How you use color metafields in Shopify", select "At variant level".
Again, copy over the variant name exactly as it looks in your Shopify settings (in our case, it is still "Color").
The variant metafield Namespace and Key can be found under Shopify Admin > Settings > Metafields and meta objects > Variant metafield definitions > Your definition name.
The metafield namespace and key will appear like that in our example: "custom.color"
The metafield namespace is: "custom"
The metafield key will be "color"
Paste the namespace and key over to the Videowise dashboard settings, and hit save changes.
Once you save all your changes, you will need to head over to the "Products" page and hit the "Sync product pages" button in order to have the latest changes properly synced.
Once everything is properly configured, you should be able to preview the color variant on the preview of the video player on the right of your page.
If you are using another method to store color swatches metafields on your Shopify admin, please reach out to [email protected] so we can assist you properly.