Variant images

Connect images to your product variant boxes

Pala Alto includes a feature to help you easily display images for variant options on product pages. Customers can see a visual image of the variant options.

Introducted in Palo Alto 5.9

This feature can be ideal for showing images for variant types like size, type, style, and can even be used for colors:

Variant images used instead of swatches

Palo Alto will use the image that's associated to the variant type in your product setup:

Important: Currently, only one variant type is supported. The feature will only work with one variant type selected in the theme's default content (language file). For example, if you use the feature for "Size", then images will only be shown for any products that contain a "Size" variant. For other variants, the standard swatch or boxed variants will be displayed.

How to use

If you already have images associated with your products, there are two primary steps for activating this feature in Palo Alto:

1. Choose a variant type for the feature.

2. Toggle the feature on or off.

Step 1 - Choose the variant type

If your store sells artwork or furniture, you might choose a variant type like "Style" or "Size." Or if you sell phone cases, you might choose to show images for "Model" or "Color."

Once you've decided on a variant type, you can add the variant name to your theme's default content (language file). The default in Palo Alto is "Size" so you can skip this step if that's your choice.

Default Theme Content

In the Theme Customizer, click on the three dots (ellipsis) at the top. In the dropdown, choose: "Edit default theme content"

1. In the Default Theme Content Editor (also known as Language Editor), click on the Products tab:

1. Scroll to the bottom and find "Variant option image":

1. Here, you can change the value from "Size" to your choice. In our example, we'll use "Color":

Changed from Size to Color

Save the change after making your change.

If you use "Color" for the variant type, swatches will still be shown on the product card and collection grid.

Step 2 - Toggle the feature

In the Theme Customizer, use the Theme Settings -> Product form

• Check the box for "Show variant image" to turn the feature on.

Now, all products with your chosen variant type will show images of variants. Ensure that all your products have variant images associated with them.

Save your Theme Customizer changes.