Configure product options showing underneath products

Our filter app allows displaying product options under each product on the collection pages. You could show up your product options values in three types:

• Variant image
• Color swatches
• Text

Important Notice: This feature is only available with App’s Product List layouts!

Let’s take a closer look at how this will be displayed on your storefront page. The below screenshot specifies how each product option be assigned for each type inside the App settings > Product Item tab:

– The values of the Color product option will be displayed as variant images.

– The values of the Material product option will be displayed as color swatches.

– The values of the Size product option will be displayed as texts.

Result in storefront page

Display product option as Variant image

Note: Images must be set up for each variant in the Shopify admin.

Steps

1. From the app’s left-sidebar, click on the Filter section.
2. Click Product Grid tab
3. Make sure that you’ve chosen an App Template layout
   
   
4. Scroll down to the bottom until reaching the Swatches area
5. Click Add Swatch option button
6. Choose a product option (such as Color option) and assign the Variant image style to this option.
7. Click Save.
   
8. Go back to the Shopify Products folder
9. Set up variant images for all variants of your Shopify products.
10. Click Save to finish.

Display product option as Color swatch

Steps

1. From the app’s dashboard, click Settings under the Filter section.
2. Go to the Product Item tab
3. Scroll down to the Swatches area
4. Click Add Swatch option button
5. Choose a product option (such as the Material option) and assign the Color Swatch style to this option.

Note: The color swatch value for each variant must be set up on the app side. You should see this guide for more information about setting up color swatch values.

Display product option as Text

Steps

1. From the app’s dashboard, click Settings under the Filter section.
2. Go to the Product Item tab
3. Scroll down to the Swatches area
4. Click Add Swatch option button
5. Choose a product option (such as Size option) and assign the Text style to this option.
6. Click Save to finish.