Craft Theme Variant Images: Each Colour's Own Photos

Craft shows every colour's photos on the product page

Craft lays out a product page as one large photo with the rest in a two-column grid below it. There is no slider and, on desktop, no row of thumbnails. That means every photo you upload is on the page at once, so a shopper who picks Red scrolls past the blue and yellow photos too.

I tested this on a fresh copy of Craft on my test store, with no edits to the theme. My product was a T-shirt called Classic Tee, sold in Red, Blue and Yellow. It had nine photos: a front and a back for each colour, a lookbook photo of a person wearing the tee by a window, a size guide and a fabric close-up. Craft picks Red when the page loads, and with Red picked all nine photos showed.

Two more places used the wrong photo. The Classic Tee card on the collection page showed the red front, since that is the first photo on the product. The featured collection on the home page showed the same red front.

Craft product page with Red picked: before, all nine photos in a large photo and a two-column grid; with Ploqo, the red front and back plus the lookbook, size guide and fabric photos

Why every photo shows for every colour

Shopify keeps one photo link per variant. A variant is one version of a product a shopper can buy, such as the red T-shirt. Shopify calls that link the variant image, and a variant can have one and only one.

My test product had no variant images at all. That is common when photos are uploaded in a batch and never linked. Craft could not tell a red photo from a blue one, so it treated all nine as belonging to every colour. Linking a variant image to each colour would not fully fix it either. Red could hold the red front, but the red back would still belong to no colour and would still show when a shopper picks Yellow.

That one link, or the first photo when there is no link, decides three things on your store:

• The product page. Craft can react to the photo linked to the picked colour, but a photo with no link stays on the page for every colour.
• The collection page card. The card uses the product's first photo. For a clothing shop that is usually a flat front shot.
• The featured collection on the home page. It uses the same card, so it shows the same photo.

If you drag a nicer photo to the first spot to fix the card, the product page now opens on that photo instead. The order of your photos can only serve one of those places at a time.

What changes in Craft once Ploqo is set up

Ploqo is a Shopify app that adds two things to each product. It records which photos go with which colour, and it holds one cover photo for cards.

On my Classic Tee in Craft, after setup:

• Red picked: the red front in the large spot, then the red back, the lookbook photo, the size guide and the fabric close-up. That is five photos, down from nine.
• Blue picked: the blue front and the blue back, followed by the same three shared photos.
• Collection card and home page featured section: the lookbook photo, which I locked as the cover.

Any photo you leave unticked for every colour counts as shared, and it shows whichever colour is picked. That is how the size guide and the fabric close-up stay in front of every shopper.

Craft product page with Blue picked and Ploqo on: the blue front and back photos, then the lookbook, size guide and fabric photos

Step 1: Install Ploqo and add its card to your product pages

Install Ploqo from the Shopify App Store and open it once. Then open any product in your Shopify admin and scroll down to the Blocks section. Click + Block and choose Ploqo photos.

The Blocks section on a Shopify product page, with the + Block button highlighted

The Ploqo card appears on the product. Click the pin icon at its top right so the card shows on every product page, not only this one.

The Ploqo card on a product page, with the pin icon highlighted

Step 2: Pick each colour's photos

The card lists every colour of the product. Click Edit next to the first one.

The Ploqo card listing Red, Blue and Yellow, each with two photos and an Edit button

A window opens showing every photo on the product. Tick the photos that belong to this colour and click Save. Leave shared photos unticked. The window marks them "On every variant", and the line at the bottom shows what a shopper who picks this colour will see.

The Edit photos window for Red, with the red front and back ticked and the shared photos marked On every variant

Do the same for each colour. My product had three colours with two photos each, which took about a minute.

Step 3: Lock the cover photo

The cover is the photo Ploqo puts on collection cards and in featured collections. On the Ploqo card, click Open full editor.

The Ploqo card with the Open full editor link highlighted

Under Card cover, click Choose.

The Card cover section of the Ploqo editor, with the Choose button highlighted

Tick the photo you want and click Save cover. I chose the lookbook photo because a person wearing the tee shows the fit better than a shirt laid flat.

The Choose the card cover window, with the lookbook photo ticked and the Save cover button highlighted

Step 4: Add the Ploqo gallery filter to Craft's product page

The photo filtering on the product page runs from an app block. An app block is a piece an installed app adds to your theme, and you place it in the theme editor. To open the theme editor, go to Online Store, then Themes, then click Customize on Craft.

Switch the editor to a product page using the menu at the top. In the left sidebar, under Template, open Product information. Click Add block, the one at the top of the block list. Open the Apps tab, choose Ploqo gallery filter, then click Save.

The Craft theme editor on a product page: Product information, Add block, the Apps tab and Ploqo gallery filter highlighted

You will not see the block on the page, and it has nothing to set. It watches which colour a shopper picks and hides the photos that belong to the other colours.

Step 5: Put the cover on Craft's collection page cards

Switch the editor to a collection page. Under Template, click Add section, open the Apps tab and choose Ploqo card cover. Click Save.

The Craft theme editor on a collection page: Add section, the Apps tab and Ploqo card cover highlighted

In Craft's sidebar the new block shows up under the Product grid. On my test store the Classic Tee card changed from the red front photo to the lookbook photo after I saved.

The Craft collection card for the Classic Tee: before, the red front photo; with Ploqo, the locked lookbook cover

Step 6: Put the cover on Craft's home page featured collection

The home page needs one extra setting. The card cover block has to be told which collection your featured section shows.

First, check what Craft's Featured collection section is showing. On my store it showed a collection called Products, and I switched it to a collection called Home page, which holds The Complete Snowboard and the Classic Tee.

Then, still on the home page, click Add section under Template, open the Apps tab and choose Ploqo card cover. Craft adds it in a new section called Apps. Select the block, click Select under Featured collections to cover, pick Home page, and click Save.

The Ploqo card cover settings in the Craft theme editor, with Featured collections to cover set to Home page

If you keep the section on Products, you cannot pick it in the collection picker. Turn on Also cover "All products" instead, which is there for a featured section that lists every product.

The Craft home page featured collection: before, the Classic Tee shows the red front photo; with Ploqo, the lookbook cover

How Craft orders the photos once Ploqo filters them

Ploqo only hides photos. It never changes their order. In Craft that matters because the first photo left on the page takes the large spot at the top, and the rest drop into the two-column grid.

When my Classic Tee page loaded, Craft had Red picked, so the red front filled the large spot. The red back came second and the lookbook photo third, followed by the size guide and the fabric close-up. With Blue picked, the blue front took the large spot instead. A shopper sees the colour they are about to buy first, and the lookbook still leads on the cards.

Craft's product page media settings

Craft's Product information section has its own media settings in the theme editor. These are the ones I found, with the values Craft's product template ships with:

• Layout. The options are Stacked, 2 columns, Thumbnails and Thumbnail carousel. Craft uses Stacked, which gives the one large photo and the grid below it.
• Mobile layout. The options are 2 columns, Show thumbnails and Hide thumbnails. Craft uses Hide thumbnails.
• Hide other variant media after one is selected. Craft ships with this off. Even when it is on, it can only hide the one photo linked to each other colour. My product had no linked photos, so it would have had nothing to hide.

All my screenshots use Craft's template as it ships: Stacked, with that last setting off. Ploqo worked without changing any of them.

The free option for Craft, and what it leaves out

Shopify's built-in variant images cost nothing. If one photo per colour is enough and you are fine with the extra photos staying on the page, start there. How to add variant images in Shopify shows how to link a photo to each colour. Shopify product variant image switching, explained covers why the page sometimes opens on the wrong photo.

What the free route cannot do is give a colour two or more photos, or set a card photo that is different from the first photo on the product. Ploqo adds both.

If clicking a photo in Craft does not change the selected colour, that is a separate issue. I wrote it up in Shopify Craft Theme: Sync Thumbnails to the Variant Picker.

If it did not work

Still seeing every colour's photos? Check that Ploqo gallery filter is listed under Product information in the product template, and that you clicked Save. Also check you are previewing the same theme you added it to. A block on an unpublished copy only shows in that copy's preview.

One colour only shows the shared photos? Open the Ploqo card on that product. The colour probably has no photos ticked yet.

The collection card still shows the first photo? Look for the "Locked cover" badge on the product's Ploqo card. If it is there, check that Ploqo card cover is saved on the collection page in the theme editor.

The home page card has not changed? Select the Ploqo card cover block on the home page and check that Featured collections to cover lists the collection your Featured collection section shows. If that section shows Products, turn on Also cover "All products".

The editor shows the change but your store does not? Hard-refresh the page with Ctrl+Shift+R, or Cmd+Shift+R on a Mac. Your browser may be showing an older copy.

Definitions

• Variant: one buyable version of a product, such as the red T-shirt in size M.
• Variant image: the single photo Shopify links to a variant.
• Cover photo: the one photo Ploqo shows for a product on collection cards and in featured collections.
• Shared photo: a photo you left unticked for every colour. It shows whichever colour is picked.
• App block: a piece an installed app adds to your theme, placed from the theme editor.
• Stacked layout: Craft's product page layout with one large photo and the rest in a two-column grid.
• Featured collection: a home page section in Craft that shows products from one collection you choose.

Ploqo saves the colour photos and the cover on the product in Shopify, so they stay put if you change themes. You add the app blocks again in the new theme. For other themes, see Ploqo's theme guides.