About
Globo is the company specializing in website design and development in Vietnam.
45C, 210 Hoang Quoc Viet Street, HN
globosoftware
contact@globosoftware.net
Follow Us

Configure product options showing underneath products

You are here:
Estimated reading time: 1 min

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

Let 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:

– 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 dashboard, click Settings under the Filter section.
  2. Scroll to the Color Swatch box (see the screenshot above).
  3. In the Product Option: Variant Image field, select a product option (such as the Color option).
  4. Click Save.
  5. Go back to the Shopify dashboard.
  6. Click All Products.
  7. Set up variant images for all variants of your Shopify products.
  8. Click Save to finish.

Display product option as Color swatch

Steps

  1. From the app’s dashboard, click Settings under the Filter section.
  2. Scroll to the Color Swatch box (see the screenshot above).
  3. In the Product Option: Color Swatch field, select a product option (such as the Material option).
  4. Click Save to finish.

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. Scroll to the Color Swatch box (see the screenshot above).
  3. In the Product Option: Text field, select a product option (such as the Size option).
  4. Click Save to finish.
Was this article helpful?
Dislike 0
Views: 199