Vario
  • Intro to Vario
  • Setup Guide
    • Install app
    • Basic steps
    • Add product variants
    • Set up variant option styles
    • Customize swatches
    • Customize variant swatch effects
    • Automated variant image swatch
    • Add custom CSS to theme
    • Home page
    • Integrations
      • PageFly
      • Transcy
      • ETranslate
      • Translation Lab
  • FAQ
    • Questions
    • Known issues
  • Support
    • Plans
    • Contact
    • Changelog
    • Troubleshooting
      • How to approve our collaborator request
Powered by GitBook
On this page
  1. Setup Guide

Customize variant swatch effects

Enhance variation swatches' hover effects on product page and collection page

PreviousCustomize swatchesNextAutomated variant image swatch

Last updated 3 years ago

Vario app comes with 4 effect options so that you can choose the best one to cater well to your product showcases.

  • In Early Verse, you are free to choose between 2 options:

    • None: Nothing happens on hover

    • Name: Show variant title as tooltip on hover

  • In Universe/Metaverse, you will have 2 advanced options:

    • Zoom: Slightly enlarge automated and custom image swatches on hover

    • Image: Show variant image and swatch title as image tooltip on hover

Below you can have a sneak peek of how the hover effects look like.

  • Slightly zoom on hover

  • Thumbnail image tooltip on hover

Happy Hovering! ;)