Skip to main content
V
Vensa
Sign In
Documentation menu

Apps

Virtual Try-On

Custom CSS

Use Settings → Advanced → Custom CSS for styling that is not covered by the standard design controls. Saved CSS loads on storefront pages where the widget configuration is rendered.

Add a styling adjustment

  1. 1

    Open the CSS editor

    Go to the main Settings screen and expand Advanced → Custom CSS.

  2. 2

    Enter a focused rule

    Target the widget element you intend to change. Use the standard Designs controls first when they already provide the desired color, spacing or position.

  3. 3

    Save and inspect the storefront

    Save the settings, refresh an eligible product page and check the button and modal on desktop and mobile.

Example: style the modal corners

/* Set the corner radius used by the Vensa modal container. */
.vto-modal {
  --vto-modal-radius: 20px;
}

Check the widget markup on your theme before extending selectors. Avoid broad rules for every button or image on the page, since Custom CSS is still page CSS and can affect matching theme elements.

Undo an adjustment

Keep a copy of your previous rules. Remove or revise the rule in the editor, save and refresh the storefront. If a layout issue appeared after a CSS edit, reverting that edit is a useful first check.

Use Contact us in this section if you want help matching the widget to your brand. Include a product URL and describe the intended appearance.

Need help?

Open Support in the Shopify app, or contact us with your store address and what you are stuck on.

PreviousSettingsNextApp language