Fabric Theme Variant Images: Each Colour's Photos and Cover

Fabric shows every colour's photos at once

Fabric is one of Shopify's newer free themes, built for fashion and apparel stores. Clothing is where colour photos matter most. A shopper who picks a red shirt wants to see the red shirt, front and back, before they add it to the cart.

I installed a fresh, unedited copy of Fabric on my test store and opened a product called Classic Tee. It comes in Red, Blue and Yellow and has 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, Fabric showed all nine photos, two to a row. The blue and yellow shirts sat right under the red ones.

The card for the Classic Tee had the same issue in a different form. On the collection page, and in the New Arrivals section on the home page, the card showed the red front photo. That is the product's first photo, not the one I would choose to sell it.

Fabric product page with Red picked: before, all nine photos in a two-column grid; with Ploqo, the red front and back, then the lookbook, size guide and fabric close-up

Why Fabric cannot tell which photos are red

Shopify links one image to each variant. A variant is one buyable version of a product, such as the red Classic Tee in size M. That link is called the variant image, and there is no second slot for a back photo or a close-up.

My test product had no photo linked to any colour. Products often look like that after a bulk upload. With no links at all, Fabric has nothing to go on, so it keeps every photo in the gallery whatever colour is picked. If you link one photo per colour, the other photo of that colour is still unlinked, and it still shows next to every other colour.

That single link feeds three places on your storefront:

• The product page gallery, where the theme decides which photos belong to the picked colour.
• The collection page card, which uses the first photo on the product.
• Product sections on the home page, like Fabric's New Arrivals, which use the same card.

So the first photo does two jobs. Move a lifestyle shot to the front to improve the card, and the product page now opens on that shot instead of the colour the shopper came for.

What Ploqo changes in Fabric

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.

Here is what Fabric showed on my test store once Ploqo was set up:

• Red picked: the red front and red back side by side, then the lookbook and the size guide, then the fabric close-up. Five photos in place of nine.
• Blue picked: the blue front and back first, then the same three shared photos.
• Collection card and New Arrivals card: the lookbook photo, which I locked as the cover.

A photo you leave unticked for every colour is a shared photo. It stays on the page for every colour. That is how the size guide and the fabric close-up appear whether a shopper picks Red, Blue or Yellow.

Fabric product page with Blue picked and Ploqo on: the blue front and back in the first row, then the lookbook, size guide and fabric close-up

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 to the Blocks section near the bottom. 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, so the card shows on every product page from now on, 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 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 them "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

Repeat for each colour. On my test product that was 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 home page product sections. 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. For a fashion store, a photo of the tee being worn says more than a flat front shot.

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

Step 4: Add the gallery filter to Fabric's 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. To open the theme editor, go to Online Store, then Themes, and click Customize on Fabric. Then open a product page from the menu at the top of the editor.

In the left sidebar, under Template, open Product information. Fabric has two Add block buttons in this area. One sits inside the Details group. The other belongs to the whole section and sits directly above Disclosures. Click the one above Disclosures, switch to the Apps tab and choose Ploqo gallery filter. Click Save at the top right.

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

The block has no settings and adds nothing you can see. It reads the colour a shopper picks and hides the photos that belong to the other colours.

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

Next, open a collection page from the menu at the top of the editor. Under Template, click Add section, which sits below the Collection section. Switch to the Apps tab, choose Ploqo card cover and click Save.

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

On my test store the Classic Tee was the first card in the collection. Before the block, it showed the red front photo. After saving, it showed the lookbook photo.

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

Step 6: Put the cover on Fabric's home page product section

On a fresh copy of Fabric, the home page has a product section headed New Arrivals. The card cover block needs to know which collection that section shows, because it cannot work that out by itself.

First, check the section's collection. On my test store it showed a collection called Products by default. I switched it to a collection called Home page, which holds the Classic Tee and The Complete Snowboard.

Then, under Template, click Add section, open the Apps tab and choose Ploqo card cover. Select the new block. Under Featured collections to cover, click Select, pick Home page and click Save.

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

If you keep New Arrivals on Products, which is every product, the picker cannot select it. Turn on Also cover "All products" in the same block instead.

With the block saved, the Classic Tee card in New Arrivals changed from the red front photo to the lookbook photo.

The Fabric home page New Arrivals section: before, the Classic Tee shows the red front photo; with Ploqo, the lookbook cover

How Fabric's product page lays out the photos

Fabric puts the photos in a grid of two columns on the left part of the page. There is no slider and no row of thumbnails. On the right is the buy box, the column with the colour picker, and it stays in view as the shopper scrolls down the photos. The colours are square buttons, and below them are collapsible rows titled PRODUCT DETAILS, CARE & MAINTENANCE and SIZE & FIT.

Fabric selects Red when the page loads, so the shopper starts on the first colour without clicking. With Ploqo on, the first row on page load was the red front and the red back. The lookbook cover came third.

Ploqo hides photos; it does not change their order. The photos that stay keep the order they have on the product. That is why the order with Red picked was red front, red back, lookbook, size guide, fabric close-up.

The grid suits colour photos well. A front and a back fill one row together, so the shopper sees both sides of the chosen colour next to each other. On the product page the cover keeps its place in that order, which on my test product was right after the picked colour's photos.

A free way to handle part of this

If you only need the product page to jump to one photo per colour, and you are fine with the other photos staying in the gallery, Shopify's own variant images cost nothing. The post on how to add variant images in Shopify shows how to link one image to each colour. Shopify product variant image switching, explained covers why the wrong photo can show first.

The free route has two limits. A colour can hold only one photo, so the back photo of each colour still shows for every colour. The card always uses the product's first photo, so you cannot pick a cover without changing what the product page opens on. Ploqo adds those two things.

Switching to Fabric from another theme

If you move to Fabric from another theme, such as Dawn, Ploqo has already saved the colour photos and the cover on the product itself in Shopify, as metafields. A metafield is an extra field on a product that holds your own information. So when you change themes, the photos you ticked and the cover you locked stay on each product.

The app blocks belong to the theme, not the product. After you switch to Fabric, add Ploqo gallery filter to the product page and Ploqo card cover to the collection page and home page again, using Steps 4 to 6. You do not need to redo Steps 1 to 3.

If it did not work

Other colours' photos still show on the product page? Check that Ploqo gallery filter is in Product information and that you clicked Save. Make sure you are previewing the same copy of Fabric you added it to. A block in an unpublished copy only shows in that copy's preview.

Cannot find the Add block above Disclosures? Open Product information under Template. The section-level Add block is directly above Disclosures, outside the Details group.

A colour shows only the shared photos? Open the Ploqo card on that product. If the colour has no photos ticked, it shows only the photos shared by all colours.

The collection card did not change? Check the Ploqo card on the product shows a "Locked cover" badge. Then check that Ploqo card cover is saved on the collection template.

The New Arrivals card still shows the first photo? Open the Ploqo card cover block on the home page. Featured collections to cover must list the collection New Arrivals 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 a copy it saved earlier.

Definitions

• Variant: one buyable version of a product, such as the red Classic Tee in size M.
• Variant image: the single image Shopify links to a variant.
• Cover photo: the one photo Ploqo shows on collection cards and home page product sections for that product.
• 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.
• Buy box: the column next to Fabric's photos with the colour picker. It stays in view as you scroll.

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