Custom CSS

Choose the right control first

Use Display for the button's position, colours, size, card-heart placement, drawer width and page layout. Use Custom CSS when the available controls do not cover the visual detail you need. If the button is missing entirely, complete the placement checks before writing a style rule.

Add your first rule

1. 1

   Save a copy of existing CSS

   Open Settings → Custom CSS. Copy any existing rules before changing them so that you can restore the previous appearance.

2. 2

   Inspect the target

   Open the storefront, right-click the widget and use your browser's inspector. Confirm which class belongs to the element you want to change. The surrounding theme can add its own styles.

3. 3

   Add a narrow rule

   For example, make the product-page wishlist label slightly bolder:

   .vensa-wl-btn {
     font-weight: 600;
   }

   Enter CSS only, without a <style> wrapper. Avoid broad rules such as button { ... }, which can affect other controls on the page.

4. 4

   Save and refresh

   Click Save in the save bar, then refresh the storefront. Reopen Settings to confirm that your text remains in the editor. The storefront is the place to check whether the rule actually applies.

5. 5

   Test both states and screen sizes

   Compare the unsaved and saved button, then test desktop and mobile. If your rule affects a drawer or page, open it with saved products and again with an empty list.

Common widget targets

If the change does not appear

• Confirm you are viewing the theme you intended to test and that its app embed is enabled.
• Refresh the page and inspect whether your selector matches the visible element.
• Check for a more specific theme rule or a saved Display setting that also controls the property.
• Remove the new rule temporarily to establish whether it caused the problem.

Undo a change

Remove the rule you added, restore your saved copy and click Save. To remove all custom styling, clear the editor and save. Refresh the affected storefront pages afterward. Review these rules again whenever you publish a different theme or update its markup.