Wiser allows you to add custom CSS directly from the Customize Widget section. This gives you more control over the appearance of your widgets beyond the available customization options.
How to Add Custom CSS
Open Wiser from your Shopify admin.
Go to Customize Widget.
Scroll down to Add Custom CSS.
Add your custom CSS code in the provided field.
Click Save to apply the changes.
How to Find the Correct CSS Class
If you want to customize a specific element of a Wiser widget, such as the heading, product title, price, image, or Add to Cart button, you first need to identify its CSS class or ID.
You can find this using your browser's Inspect tool:
Open your store and locate the Wiser widget you want to customize.
Right-click the element you want to change and select Inspect.
In the developer tools, look for the element's class or ID.
Use that class or ID as the selector in your custom CSS.
For example, if the element has a class like:
.ws_widgets_heading { font-size: 16px; }You can then add the CSS to Wiser → Customize Widget → Add Custom CSS.
Tips for Writing Custom CSS
Use the specific class or ID of the element you want to customize.
Avoid using generic selectors such as
div,span, orbutton.Use a specific selector whenever possible to prevent your CSS from affecting other elements on your store.
Why Use a Specific Class or ID?.
Using the element's specific class or ID makes your custom CSS more reliable and helps ensure that you're styling the intended element.
If you're unsure which class or selector to use.
If you experience any issues, feel free to contact us through support@expertvillagemedia.com or our live chat. We're here to help!