Configure product variants underneath product cards

🔘 Option A: Display Product Variants Using Variant Images

This option shows actual product variant images (e.g. product photos for each color).

Steps:

  1. Open the Smart Product Filter & Search app.

  2. In the left sidebar, click on Filter.

  3. Go to Product Grid tab.

  4. Scroll down to the Swatches section.

  5. Click Add swatch option button.

  6. In the Display Type dropdown, choose Variant Image option.

  7. Click Save to finish.


🎨 Option B: Display Product Variants Using Color Hex values

This option shows color circles or squares using the color value (e.g. red, blue, #000000).

Steps:

  1. Open the Smart Product Filter & Search app.

  2. In the left sidebar, click on Filter.

  3. Go to Product Grid tab.

  4. Scroll down to the Swatches section.

  5. Click Add swatch option button.

  6. In the Display Type dropdown, choose Color swatch option.

  7. Click Save to finish.


🔘 Option C: Display Product Variants Using Text

Steps:

  1. Open the Smart Product Filter & Search app.

  2. In the left sidebar, click on Filter.

  3. Go to Product Grid tab.

  4. Scroll down to the Swatches section.

  5. Click Add swatch option button.

  6. In the Display Type dropdown, choose Text option.

  7. Click Save to finish.

💬 Need Help?

If you have any questions or need assistance, feel free to contact our support team: 📩 [email protected]

Last updated