Spyro Price Switch as the name suggests is a simple switch that can be used to choose a price/plan from any two sets of the prices/plans you’re offering on your website along with a discount card.
When the button is toggled by the user the focus is shifted to the desired pan and the color of that side changes to the set color.
In order to add the Spyro Price Switch Module to your page first, edit the page using Tatsu and add a section with a column/row and then add the Spyro Price Switch Module in it.
In the content tab, you need to add the Monthly Pan Title, Annual Plan Title, and the Discount Offered Title to display to the user on the front end. These are the only three options available in the Content Tab of the Price Switch.
Using the Style tab you can style the Price Switch with Colors and Typography Options. In colors, you can alter the Title Color, Active Title Color, Switch background Color, Switch Dot Color, Discount Background Color, and Discount Text Color. You can control the typography of the Price Switch using TypeHub or using any custom font.
You can also modify the working and behavior of the price switch with advanced options like Spacing, Border, Box Shadow, Animation, CSS Identifiers, and its Visibility.