Shopify variant swatches & thumbnails

We're running our store on Shopify, with the template "venture" which is a standard one.

Please see picture attached to understand what we need.

Everything has to be responsive, mobile friendly.

1. I want to replace the size & colour selection of our products by picture swatches.

> We can match pictures of the thumbnail with the name of the variant option

> When an option (I.e size S, red colour) is not available, the picture should be greyed out and crossed

> A black frame has to appear around the icon of the variant while hovering on top

> If the client chooses a size, then unavailable colors in this size should be automatically greyed out

> If the client chooses a color, then unavailable sizes in this color should be automatically greyed out

2. I want to display pictures related to the variant only. We can use a tag system if needed.

> The thumbnails will be displayed on the left of the main picture

> Only thumbnails of the selected associated picture will show

Shopify mentions three options :

Alt tags.

You might not be keen on this, but it's the easiest to manage since there's a direct way to add / edit these alt tags within the admin interface and via the CSV upload. Don't be too quick to cast this one aside. If you're worried about the keyword(s) used to match the variant - don't be. You can use some simple string logic in the theme to remove that.

File names.

If you can be super consistent with image file names this can serve a similar purpose to the alt tags, but without the need to edit anything. This would just rely on you developing a naming convention, and adding code into the theme to work with that.


Probably something better left to an app but you could add metafields to a variant that specify what images are linked to it. This would let you avoid the alt tag method, and let you name the files whatever you like. Even more awesome this could let you specifiy images that might not even be attached to the product.

Kemahiran: CSS, HTML, Shopify, Templat Shopify, Reka Bentuk Laman Web

Lihat lagi: shopify variant images app, shopify multiple variant images, shopify product variant color, shopify swatches app, shopify swatches on collection page, shopify product color swatches, shopify color swatches app, shopify change image based on variant, shopify web scraping uploading product, prestashop thumbnails product listing, shopify add custom field product, shopify add custom fields product, product description keyword density, prestashop thumbnails product list, change image shopify variant, shopify variant image, product images upload csv magento, estore thumbnails product wordpress, thumbnails product flypage, free online store template thumbnails style ebay

Tentang Majikan:
( 29 ulasan ) Shanghai, Hong Kong

ID Projek: #15608760

Dianugerahkan kepada:


Hello, I have checked the attached image & will customize the complete page as per the requirements. I am really interested to work with you and I strongly believe that we will create the perfect app. Relevant Skills Lagi

€50 EUR dalam sehari
(4 Ulasan)