Crave Theme Variant Images: Photos per Colour, Locked Cover

The problem with variant images in Crave

Crave is one of Shopify's free themes. Its product page shows photos in a slider: one large framed photo, with a strip of small thumbnails under it and arrows to move along the strip. The strip shows four thumbnails at a time.

When a shopper picks a colour, that strip does not change. It still holds the photos of every other colour.

I tested this on a fresh, unedited copy of Crave on my test store. My product is a T-shirt called Classic Tee, in Red, Blue and Yellow. It has nine photos: a front and a back for each colour, a lookbook photo of a person wearing the tee, a size guide and a fabric close-up. Crave picks Red when the page loads. The large photo was the red front, and the strip held all nine photos. The first four thumbnails were the red front, the red back, the blue front and the blue back.

The collection page had the same kind of problem. The Classic Tee card showed the red front photo, because that is the first photo on the product. The featured section on the home page showed the same red front photo.

Crave product page with Red picked: before, the red front photo large and blue photos in the thumbnail strip; with Ploqo, the lookbook cover large and only red and shared photos in the strip

Why Crave's slider keeps every colour's photos

A Shopify product has one list of photos. Each variant can point at one photo from that list. A variant is one version of the product a shopper can buy, such as the red tee. The photo it points at is called the variant image.

There is no second slot. A colour with a front and a back photo can claim only one of them, and the other photo belongs to no colour. Photos that belong to no colour show for every colour.

On my test product, no photo was linked to any colour at all. That is common after a bulk upload. With no links, Crave had nothing to go on, so its slider kept all nine photos whichever colour was picked.

That single link, or the first photo when there is no link, feeds three places in your store:

• The product page slider. It holds every photo on the product, in upload order.
• The collection card. Crave uses the product's first photo.
• The home page featured section. It uses the same product card, so it shows the same first photo.

The usual workaround is to drag a better photo to the top of the product's photo list. That changes the card, but it also changes the first photo in the slider for every colour. A fix in one place moves the problem somewhere else.

What Ploqo changes in Crave

Ploqo is a Shopify app that saves two extra things on each product. The first is which photos belong to which colour, with as many photos per colour as you like. The second is one cover photo for cards.

On Crave, after setup, my test product looked like this:

• Red picked: the thumbnail strip held the red front, the red back, the lookbook photo, the size guide and the fabric close-up. That is five thumbnails instead of nine. The blue and yellow photos were gone from the strip.
• Blue picked: the strip held the blue front, the blue back, the lookbook photo, the size guide and the fabric close-up.
• Large photo on page load: the lookbook cover, for both colours. The section below on photo order explains why.
• Collection card and home page card: the lookbook photo, which is the photo I locked as the cover.

The size guide, fabric close-up and lookbook photo stay in the strip for every colour because I did not tick them for any colour. A photo with no colour ticked counts as shared.

Crave product page with Blue picked and Ploqo on: the lookbook cover large, and the blue front, blue back and shared photos in the thumbnail strip

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 page. Click the pin icon in its top right corner. Pinning makes the card show on every product, not only the one you are on.

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 colour.

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

A window opens with all the product's photos. Tick the photos that belong to this colour, then click Save. Leave shared photos unticked, such as a size guide. The window labels them "On every variant". The line at the bottom of the window says 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 test product has three colours with two photos each, and it took about a minute.

Step 3: Lock the cover photo

The cover is the photo shoppers see on product cards, on collection pages and in the home page featured section. On the Ploqo card, click Open full editor.

The Ploqo card with the Open full editor link highlighted

Find Card cover and click Choose.

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

Tick the photo you want on the card and click Save cover. I chose the lookbook photo. A person wearing the tee by a window tells a shopper more than a flat front shot does.

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

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

The slider filtering comes from an app block. An app block is a piece an installed app adds to your theme, which you place from the theme editor. The theme editor is where you change how your theme looks. To open it, go to Online Store, then Themes, and click Customize on Crave.

Use the page menu at the top of the theme editor to open the product page template. In the left sidebar, under Template, open Product information. Click Add block, which sits at the top of that section's block list. Switch to the Apps tab, choose Ploqo gallery filter, and click Save at the top right.

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

The block has no settings and adds nothing visible to the page. It reads the colour a shopper picks and hides the other colours' photos from the slider.

Step 5: Put the cover on Crave's collection cards

Open the collection template from the page menu. Under Template, click Add section. Open the Apps tab, choose Ploqo card cover, and click Save.

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

Crave puts the block inside a new section named Apps. Its job is to swap the card photo for each product that has a locked cover.

On my test store the Classic Tee was the first card on the all-products collection page. Before, the card showed the red front photo. After I saved, it showed the lookbook cover.

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

Step 6: Put the cover on Crave's home page featured section

The home page needs one setting more than the collection page. The card cover block cannot tell which collection a featured section shows, so you choose it.

Crave's home page has a Featured collection section. On my store its heading reads "Featured products". It was set to show a collection called Products, and I switched it to a collection called Home page. That collection holds The Complete Snowboard and the Classic Tee.

Open the home page template. Under Template, click Add section, open the Apps tab and choose Ploqo card cover. Crave adds it in a new Apps section under the Featured collection section.

Click the new block to open its settings. Under Featured collections to cover, click Select and pick the collection your featured section shows. For me that was Home page. Click Save.

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

If your featured section still shows Products, the picker cannot select it, because that collection is every product in your store. Turn on Also cover "All products" instead.

On my store, the Classic Tee card in the featured section went from the red front photo to the lookbook cover.

The Crave home page Featured products section: before, the Classic Tee shows the red front photo; with Ploqo, the lookbook cover

Why the Crave slider opens on the cover photo

In Crave, Ploqo opens the slider on the cover photo. So with Ploqo on, the large photo on page load was the lookbook, not the red front. That held even though Crave picks Red when the page loads. With Blue picked, the large photo was the lookbook too.

The thumbnail strip keeps the product's own photo order, because Ploqo hides photos and does not reorder them. With Red picked, the strip ran red front, red back, lookbook, size guide, fabric close-up. The lookbook photo sits third in the strip because it is the seventh photo on the product, after the six colour photos. Ploqo removed the four blue and yellow photos in front of it.

A stacked grid works differently. In a theme like Dawn, the first photo left on the page takes the top spot, so the colour's own front photo comes first. If you run both kinds of theme, the Dawn guide shows the stacked version.

So in Crave the cover does two jobs: it is the photo on the collection card, and it is the large photo a shopper sees when they land on the product. Pick a cover you are happy to lead with in both places.

Crave product page settings that affect photos

Crave's product template has its own photo settings, under Product information in the theme editor. Two of them sit close to what Ploqo does.

• Layout. Crave's product template is set to Thumbnail carousel, the slider in my screenshots. The other options are Stacked, 2 columns and Thumbnails.
• Hide other variant media after one is selected. Crave has this setting, and its product template ships with it off. It can hide only the one photo linked to each other colour. On my test product no photo was linked to any colour, so it had nothing to hide. Even with every colour linked, the other colours' second photos would stay in the strip.

A free way to do part of this in Crave

Shopify's built-in variant images cost nothing, and they may be enough if one photo per colour is fine for you. The post on how to add variant images in Shopify shows how to link one image to each colour. The post on Shopify product variant image switching explains why the wrong photo can show first.

The free route has two limits. Each colour can hold only one photo, so a colour's back photo still shows for every other colour. And the card photo is always the product's first photo, so you cannot pick a separate cover. Ploqo adds those two things.

If it did not work

Still seeing other colours' photos in the slider? Check that Ploqo gallery filter sits under Product information in the product template, as in Step 4, and that you clicked Save. Also check you are previewing the theme you added the block to. A block in an unpublished copy of Crave shows only in that copy's preview.

A colour shows only the shared photos? Open the Ploqo card on that product and click Edit on that colour. If no photos are ticked, that colour has no photos of its own, so only the shared ones show.

Want the slider to open on the colour photo instead of the cover? In Crave the slider opens on the locked cover. Lock a photo you want shoppers to see first, or read the section above on how the slider orders photos.

The collection card still shows the old photo? Check that the product has a locked cover. The Ploqo card shows a "Locked cover" badge when it does. Then check that Ploqo card cover is saved in the collection template.

The home page card did not change? Open the Ploqo card cover block on the home page template. Check that Featured collections to cover lists the collection your Featured collection section shows. If the section shows all products, turn on Also cover "All products".

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

Definitions

• Variant: one version of a product a shopper can buy, such as the red tee in size M.
• Variant image: the one photo Shopify links to a variant.
• Thumbnail strip: the row of small photos under Crave's large product photo.
• Cover photo: the photo Ploqo shows for a product on collection cards and in featured sections.
• Shared photo: a photo you did not tick for any colour. It shows for every colour.
• App block: a piece an installed app adds to your theme, placed from the theme editor.
• Featured collection: a Crave home page section that shows products from one collection you choose.

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