Vitals Preferences: Complete Guide

The Preferences page contains global settings that apply across your entire Vitals installation. These settings control your admin experience, storefront appearance, checkout behavior, and advanced customization options.

To access it, open your Vitals dashboard and click Preferences.

Admin Language

Choose the language for your Vitals admin panel. Select your preferred language from the dropdown — the interface updates immediately.

Settings

Allow the Customer Support team to edit my settings — Enable this option to let the Vitals support team make configuration changes on your behalf. This is useful when troubleshooting or setting up features with support. Disabled by default.

Storefront Color Theme

Controls the default color contrast for all Vitals widgets on your storefront. This ensures text remains readable against your store's background.

• Light — Background colors default to white; text defaults to dark. Best for stores with light-colored themes.
• Dark — Background colors default to dark; text defaults to white. Best for stores with dark-colored themes.

Individual widget colors can still be customized within each app's settings.

Add to Cart Redirect

Controls where customers are taken after clicking the Add to Cart buttons of selected Vitals apps:

• Auto detect your theme settings (supported themes) — Automatically follows your Shopify theme's default behavior. (Default)
• Cart page — Redirects customers to the shopping cart.
• Checkout page — Redirects directly to checkout for faster conversions.
• Stay on the same page — Keeps the customer on the current page. (recommended if you are using a third-party cart drawer)

Plan Details

View the features and limits included in your current Vitals plan. Click the link in this section to review available plans and upgrade options.

Custom CSS

Add custom CSS that applies globally to all Vitals widgets on your storefront. Use this to fine-tune the appearance of any Vitals element.

Tips:

• Keep customizations in Vitals, not your theme files. This ensures your changes survive Vitals updates and aren't lost during theme changes.
• Real-time syntax validation. The editor checks your CSS as you type and displays errors before you save.
• Target Vitals-specific CSS classes to avoid conflicts with your theme's styles.

Custom JavaScript

Add custom JavaScript that runs on your storefront. Three injection points are available:

• Custom JS First — Runs before Vitals initializes. Use this to set configuration variables or modify behavior before any Vitals code executes.
• Custom JS Last — Runs after Vitals has fully loaded. Use this to interact with Vitals elements already rendered on the page.
• Custom JS Hooks — Hook-based JavaScript for advanced event-driven customization. Contact our support team for available hooks and usage details.

Always test immediately after saving. Remove any changes that cause unexpected behavior.

The editor validates your JavaScript syntax in real time and will flag errors before you save.

Sync Currency Rounding Rules

If your store uses Shopify Payments Multi-Currency and you've recently updated your rounding rules in Shopify, click Update Rounding Rules to sync those changes into Vitals.

Quick Reference