Managing Images in Shopify

Order and Filter your product images on your Nyla site

This article tells you how to set up your product images in Shopify so that they display how you expect on your site.

It covers setting up image filtering, so that the right image for your product show based on your customers selection, and also covers how to choose the order of your product images.

This article covers the following information:

Intro to image filtering
Defining which product option you want to filter over
How to add alt text to your images
How to set the order of your images
How to get images to show for multiple option values
Troubleshooting image filtering issues

Intro:

Product images in Nyla can be filtered to only show up with a specific product option. This allows you to have different product images for different product options like colours or sizes on your product and collection pages.

This is useful when you have different product images for different variations of the same product.

Examples might include:

Product images for a blue color of your product only showing up when your customers select the blue swatch on your product detail page
Product images for a “small” size of your product only showing up when your customers select the small swatch on your product detail page

For image filtering to work, you need to set up the following things:

Add and populate the nyla_options.productOptionImageFilter metafield
Add the appropriate alt text to your product images
Finally, your product images need to be iterating over the product.variant.media array. See more on this here in the "Product images" section of this article.

See this video for how to set up image filtering:

Define which product option you want to filter over

To get started with image filtering, you need to define which product option you want to filter over. E.g Nyla needs to know that you want to filter your images when customers click on "Colour" rather than "Size".

In order to do that, you need to:

Add a metafield named nyla_options.productOptionImageFilter as a product metafield in Shopify. You should add it as a single line text type.
Add the name of the product option you want to filter over to the nyla_options.productOptionImageFilter metafield for your product(s).

The name of the product option should be exactly how it is named in Shopify. For example, to filter over a product option for “size”, you should add “size” to the metafield. If you want to filter colors over the option “color” then add “color” to the metafield.

Make sure to save the changes to your metafield in Shopify.

Add alt text to your images

Next, you need to define which images for your products should show with which option values. For example, which images should show when "Blue" is clicked, which should show with "Yellow" and so on.

To do this, you need to navigate to your product in Shopify and add alt text to your images. The text that you add should include the exact value of that product option you want that image to appear with.

For example:

In your store you have a product. Your product has product options in Shopify of “color” and “size”. You want a certain image for product to only show associated with the color “Yellow”.
This means you need to add alt text to your product image that includes the exact value of the product option, in this case “Yellow”.
Therefore, adding alt text like “Men’s Vintage Yellow T-Shirt” would mean that that image is shown whenever a customer clicks on the Yellow color product option.

Set order of product images:

Images appear in the order in which they are set in Shopify. E.g the first position shows first, 2nd shows 2nd and so on.

Showing the same image on multiple options:

Product images can contain more than product option in the same alt text if you want that to show across multiple products. For example if in addition to Yellow, there’s another variant called Blue, an image with alt-text: “Mens tshirt available in Yellow and Blue” will show on both colours.

However, the position in the array would be determined by in what position that image is placed in the Shopify UI. For example, if there are image is the 5th image with alt-text containing Canary Yellow, but the 1st containing Blue, it’ll show in the 5th position for the Yellow product but first position for the Blue.

Therefore, if you want to share one image across products, it’s best to have it in the first or last position, which means it would be first or last for all variants. If you want it to be in a specific slot for each product that’s not last, you would need to upload the image multiple times, and place it in the right order for each individual product option, with the corresponding alt text on each version of the image.

Troubleshooting image filtering issues

If image filtering is not working for you, you should try the following steps:

Have you populated the nyla_options.productOptionImageFilter metafield for the product in question? Ensure it is named identically to your option name in Shopify. See more here.
Have you added alt-text to your images? Ensure the alt text string you have added on your image is identical to the option
Have you saved your changes in Shopify and published your changes in Nyla?
Is your slider/grid/UI that is filtering the product images iterating over the product.variant.media array? If not, ensure it is iterating over this array for image filtering to work.

If those don't work, it could be due to some of the current limitations to image filtering:

Alt-text does not currently support special characters (e.g accents). In some cases customers have used the Replace filter to have a customer facing option value and another in Shopify. However note that if you do this, downstream (e.g checkout and beyond) data will include whatever is loaded in Shopify.
Alt-text can clash, for example if an option value contains another value
- Potential solutions:
  - Ensure your product names do not contain each other (e.g option values named Rose and Rose Petal would result in a clash, whereas Rose and Petal would not). In some cases customers have used the Replace filter to have a customer facing option value and another in Shopify. However note that if you do this, downstream (e.g checkout and beyond) data will include whatever is loaded in Shopify
  - As an alternative, you can use an array of media in a Shopify metafields with conditional visibility rather than Shopify product images.
Image filtering currently only works for one option. If you want to filter over more than one option simultaneously, we recommend using metafields and conditional visibility to set up your images on the product in question.