With Spyro Price, you can list down the pricing information of the products/plan you want to offer on your website.
The Spyro Price is also a multilevel module consisting of plans/features of the same type where each plan/feature is an Individual Sub Module, which will have the controls necessary for setting the service, while the parent module will have settings that affect the entire service or all individual service such as Setting the Monthly Price, Annual Price, Plan Label, Button Text, Plan Icon, and the Link URL. And, Styling options like Price Table Background, Price Table Header, Price Table Body, Button Style, and Button Colors.
In order to add the Spyro Price Module to your page first, edit the page using Tatsu and add a section with a column/row and then add the Spyro Packages Module in it.
In each plan feature, you can alter the Feature name and add any of your own product/service feature names along with a suitable icon from the Tatsu Icons available in the builder.
And, from the Style tab, you can alter the individual Icon Color and the Feature Color using Hex, RGBA, Color Swatches, or with a Color Palette.
You can have as many plan feature lists as you like and can configure each item the same way as discussed above.
Using Spyro Price Content Tab you can alter Parent things like the Monthly Price, Annual Price, Plan label, Button Text, Plan Icon using the Tatsu Icons found in the builder and the Button link URL.
Using the Style tab you can style the Price Table Background and change its Background Color. Style Price Table Header you can change the Label Color, Price Color, Icon Color, Adjust Price Table Header Typography of Label Font and Price Font using TypeHub or by using Custom Font.
Style the Price Table Body with Feature Color, Feature Icon Color, Feature Border Color, Adjust Price Table Body Typography of Feature Font using TypeHub, or by using Custom Font.
Adjust the ‘Button Style’ by changing its Size and Shape with ‘Button Colors’ set what Button Background and Button Text colors should the user see when the button is inactive and when the user hovers over it.
You can also modify the working and behavior of the price with advanced options like Spacing, Border, Box Shadow, Animation, CSS Identifiers, and its Visibility.