Custom CSS - Quick Guide

While our app offers a plethora of built-in customization settings, we understand that sometimes you need that extra level of control. That's why we've included a dedicated CSS section that allows you to perform additional fine-tuning to align the app's look and feel perfectly with your store's brand identity.

Utilizing CSS for Ultimate Customization

Our app comes with various customization settings that can be easily adjusted through the settings section of each module. From changing colors to selecting different themes and layout arrangements, these settings provide a user-friendly way to make impactful changes to the app's appearance.

However, we recognize that each brand has its own distinct personality and design guidelines that might not be fully met by the predefined customization options. This is where the power of CSS comes into play. If you are familiar with Cascading Style Sheets (CSS), it enables you to control the finer details of how elements are presented on your app's interface.

💡 We are continuously improving our app to add more settings for customization without needing CSS, through our Vitals Theme Editor. Stay tuned to our Product Roadmap when we announce these updates! 😊

Accessing the CSS Section:

To access the CSS customization section, follow these simple steps:

From your Vitals UserAdmin, go to My Vitals > Global Settings:

While inside Global Settings, scroll down to Global Customizations section, and you will see the Custom CSS section:

Pointers in using and applying Custom CSS:

Since all our apps already have their default CSS customizations, any additional CSS changes applied this way should have the !important rule to override the default design.

ex. 
.vtl-ub-bundle-box h2{
   color:#FFF!important;
}

Even though the CSS coding window is a bit small, you can extend it downward by dragging the expand icon on the lower-right side corner.
With regards to colors, our CSS section can support hexadecimal, color name, and rgb() values as colors.
If you are having challenges in applying these CSS customizations, contact us and we'd be glad to help!

Some useful CSS code snippets

Below are some highly useful CSS snippets that you can use to achieve some great effects on some of our apps!

Product Reviews app - Have different alignments of the review snippets between desktop and mobile versions:

Alignment of the Product Reviews app's Review Snippets on Desktop vs on Mobile

/*alignment of review snippets for Desktop*/
@media(min-width:769px)
{
   .vtl-pr__product-title-star-snippets{
      justify-content:left!important;
   }
}

/*alignment of review snippets for Mobile*/
@media(max-width:768px)
{
   .vtl-pr__product-title-star-snippets{
      justify-content:center!important;
   }
}

Product Bundle - Change the properties of the Product Bundle's Add-to-Cart button.

.vtl-ub-bundle-box__atc-button{
   background-color:#000!important;
   color:#FFF!important;
   width:55%!important;
   font-family:'Roboto',sans-serif!important;
}