Custom CSS - Quick Guide
Last updated on October 21, 2026
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.
Accessing the CSS Section:
To access the CSS customization section, follow these simple steps:
- Open Vitals and click Preferences in the app menu.
- Scroll to Custom code and find the Custom CSS field.
- Add your CSS and save. It applies to all Vitals apps on your store.
💡 Avoid adding pointer-events: none to Vitals widget selectors. For example, applying it to .vtl-ub-vd-widget__content prevents shoppers from selecting Volume Discount packages or using the widget's Add to Cart button. If this happens, remove the rule from the store-wide Custom CSS field, or from the offer's Customize appearance editor under Placements > Product page.
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;
}
- The editor highlights invalid CSS, and you need to fix it before you can save.
- 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 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;
}
}