Savor Theme Variant Images: Photos per Colour and a Cover

The problem with variant images in Savor

Savor is one of Shopify's newer free themes. It was built for food and drink brands, and its demo home page opens with a "Savor every. last. bite." banner, but it works for any kind of product. When a shopper picks an option in Savor, such as a colour, the product page keeps every photo on the product in view.

I tested this on a fresh copy of Savor on my test store, with no theme edits. My product was a plain T-shirt called Classic Tee, 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. With Red picked, Savor showed all nine photos, so a shopper choosing Red still scrolled past the blue and yellow ones.

Two more places showed the wrong photo for this product. The card on the collection page used the red front photo, because it was the first photo uploaded. The featured collection on the home page used that same red front photo.

Savor product page with Red picked: before, all nine photos including the blue and yellow ones; with Ploqo, only the red front and back plus the lookbook, size guide and fabric photos

Why Savor cannot tell which photo belongs to which colour

Shopify keeps one image slot on each variant. A variant is one version of a product a shopper can buy, such as the red tee. The photo in that slot is the variant image, and Shopify gives you exactly one per variant.

On my test product, none of the nine photos sat in a variant image slot. Products often end up like that after a bulk upload. With nothing linked, Savor had no record of which photos were red, so it kept all of them on the page for every colour. Filling the slot would not have fixed it either. Each colour can hold one photo, so the red back photo would still have no colour and would still show next to the blue ones.

That one slot also feeds three different parts of your store:

• The product page, which needs to know which photos go with the option a shopper picked.
• The collection page card, which shows the product's first photo.
• The featured collection on the home page, which uses the same card and so the same first photo.

The first photo does two jobs at once. If you move the lookbook photo to the front so it shows on the card, the product page also opens on the lookbook photo instead of the red front. You can only pick one place to get right.

What Ploqo changes in Savor

Ploqo is a Shopify app that adds two things to each product: a list of which photos go with which colour, and one cover photo for cards.

With Ploqo set up on my Savor test store:

• Red picked: five photos. The red front leads in the large spot, then the red back, the lookbook photo, the size guide and the fabric close-up. The blue and yellow photos are hidden.
• Blue picked: the blue front and the blue back, then the same three shared photos.
• Collection page and home page: the card shows the lookbook photo, which I locked as the cover.

Any photo you leave unticked for every colour stays on the page whatever a shopper picks. That is why the size guide and fabric close-up show for Red, Blue and Yellow alike.

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

Savor stores that sell flavours or pack sizes

A Savor store's options are often a flavour or a pack size rather than a colour. Ploqo groups photos by any option value, and the Ploqo card lists each value with its own Edit button. My test used colours, so the steps below say "colour", but they read the same for a flavour.

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

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

Step 2: Pick each colour's photos

The card lists each colour of the product. Click Edit next to a colour.

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

A window opens with every photo on the product. Tick the photos that belong to this colour and click Save. Leave shared photos, like a size guide, unticked. The window marks those "On every variant", and the line at the bottom tells you what a shopper who picks this colour will see before you save.

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 had 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 collection pages 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 as the cover and click Save cover. I chose the lookbook photo, because a person wearing the tee sells it better 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 the Savor product page

The product page filtering is an app block. An app block is a piece an installed app adds to your theme, and you place it in the theme editor. The theme editor is where you customise your theme: go to Online Store, then Themes, then click Customize on Savor.

Switch the page menu at the top of the editor to a product page. In the left sidebar, under Template, open Product information. Savor lists several blocks inside that section, including a Details group with its own Add block button. I used the other one: the Add block at the very bottom of the Product information list, which belongs to the section itself. Open the Apps tab, choose Ploqo gallery filter, then click Save at the top right.

The Savor theme editor on the product page: the Product information section, its bottom Add block button, the Apps tab and Ploqo gallery filter highlighted

The gallery filter has no settings and shows nothing on the page by itself. It reads the option a shopper picks and hides the photos that belong to the other options.

Step 5: Put the cover on Savor collection pages

Switch the page menu to a collection page. Under Template, click Add section below the Collection section. Open the Apps tab, choose Ploqo card cover and click Save.

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

Savor puts the block in a section of its own, listed under Collection in the sidebar. With the block saved, my Classic Tee card changed from the red front photo to the lookbook cover.

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

Step 6: Put the cover in the Savor home page featured collection

The card cover block needs to be told which collection your home page features. It has no way to work that out on its own.

First check which collection your Featured collection section shows. On my fresh copy of Savor it showed a collection called Products. I switched it to a collection called Home page, which held The Complete Snowboard and Classic Tee.

Then, still on the home page template, click Add section under Template, open the Apps tab and choose Ploqo card cover. Click the new block to select it. Under Featured collections to cover, click Select, pick the collection your Featured collection section shows (Home page, in my case) and click Save.

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

If you keep the Featured collection section on Products, which holds every product, the picker cannot select it. Turn on Also cover "All products" in the same block instead.

My Classic Tee card in the featured section went from the red front photo to the lookbook cover.

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

How the Savor product page lays out the photos

Savor fills the left side of the product page with photos. The first photo is large, and the rest follow in a grid two columns wide. The title, the colour picker and the add-to-cart button sit on the right. There is no slider and no row of thumbnails, so every photo left on the page is in view as the shopper scrolls.

Savor picks Red when the page loads, so a shopper starts on Red without clicking anything. With Ploqo on, the large first photo on page load was the red front. The lookbook cover came after the two red photos, followed by the size guide and the fabric close-up.

Ploqo hides photos but keeps their order. Whatever photo is first among those still showing takes the large spot. With Blue picked, that was the blue front photo. The cover you lock leads on cards, and on the product page the shopper sees the colour they picked first.

The small photo in Savor's sticky add-to-cart bar

Savor shows a tiny product thumbnail in a bar that sticks to the screen with the add-to-cart button. That thumbnail belongs to the theme, not to the photo grid. Ploqo's gallery filter works on the grid, so do not judge your setup by that small image. Check the large photos on the left instead.

Savor and Horizon

Savor shares its page structure with Horizon, another of Shopify's free themes. If you have set up Ploqo on Horizon, Savor's product page and theme editor will look familiar. The Ploqo setup on each product is the same in every theme, because it lives on the product rather than in the theme.

A free way to do part of this in Savor

Shopify's own 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. The post on how to add variant images in Shopify shows how to link an image to each colour. Shopify product variant image switching, explained covers why a shopper can land on the wrong photo first.

The free route stops at one photo per colour, and the card always shows the product's first photo. Ploqo adds the second photo onward for each colour and a cover that is separate from the first photo.

If it did not work

Picked a colour and still see the others' photos? Check that Ploqo gallery filter is in the Product information section of your product template, and that you clicked Save. Also check you are previewing the theme you edited, since an unpublished copy only shows its changes in its own preview.

A colour shows only the shared photos? Open the Ploqo card on that product and check that colour has photos ticked. A colour with no ticked photos gets the shared ones only.

The collection card still shows the first photo? Check the product has a locked cover on the Ploqo card, and that Ploqo card cover is saved on the collection template.

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

Checking the small photo in the sticky add-to-cart bar? That thumbnail is part of Savor, not the photo grid Ploqo filters. Look at the large photos on the left of the page.

Changes show in the editor but not on the store? Hard-refresh the page with Ctrl+Shift+R, or Cmd+Shift+R on a Mac. Your browser can hold on to an older copy of the page.

Definitions

• Option: a choice a shopper makes on the product page, such as colour, flavour or pack size.
• Variant: one buyable version of a product, such as the red tee.
• Variant image: the single image 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 did not tick for any colour. It shows whichever colour a shopper picks.
• App block: a piece an installed app adds to your theme, placed from the theme editor.
• Featured collection: a Savor home page section that shows products from one collection you choose.

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