Skip to main content

How to Customise Your Wiser Widget Styling

Written by Toheeb

Wiser allows you to customize the appearance and functionality of your recommendation widgets to match your store’s branding and provide a seamless shopping experience.
​

You can customise different elements of your widget, including the layout, heading, product title, add-to-cart button, price, product image, product reviews, currency converter, out-of-stock settings, wishlist settings, and custom CSS.
​

Use widget customization when you want to:

  • Match your Wiser widgets with your store’s branding

  • Adjust the layout and appearance of your recommendations

  • Customize how product information is displayed

  • Control how out-of-stock products and wishlist options appear

  • Add custom CSS for more advanced styling
    ​


    ​

Steps to Customize Your Wiser Widget

Step 1: Go to the Wiser Dashboard

Go to your Wiser Dashboard and click on Customize Widget from the left panel.


​
Step 2: Customize Your Widget

From your Wiser dashboard, go to Customization/Design to customize the appearance and behavior of your recommendation widgets.

Widget's Layout

Customize how your widget appears on desktop, including the template, number of products displayed, and number of products shown per row.

Heading

Customize the appearance of the widget heading. You can change its:

  • Alignment

  • Font size

  • Color

Product Title

Control how product titles appear in your widget. You can:

  • Show or hide the product title

  • Change its alignment, font size, and color

  • Truncate long product titles and set a character limit

Add to Cart Button

Customize the Add to Cart button and its behavior. You can:

  • Enable or disable the button

  • Change the button background and font color

  • Choose whether customers are redirected to the cart after adding a product

  • Show a confirmation message after a product is added to the cart

Price

Customize how product prices are displayed. You can:

  • Show or hide the price

  • Change its alignment and font size

  • Configure the display of the current and original prices

Advanced Settings

Use advanced price settings to configure:

  • Compare Price

  • Currency Codes

  • Add Tax Price, which allows you to add a fixed amount or percentage to the product price displayed in Wiser widgets.

Product Image

Control how product images are displayed in your widget. You can:

  • Choose an image size, from Small (240 px) to Original

  • Show a different image when customers hover over a product

  • Choose whether to display the product's featured image

Product Reviews

Display product reviews in your Wiser recommendations by connecting supported review apps.

Wiser supports integrations with several review platforms, including Loox, Opinew, Fera Reviews, Okendo, Stamped, Bazaarvoice, Ali Reviews, Judge.me, Yotpo, and Wiser Review.

If your review app is not listed, contact the Wiser team to check whether an integration is available.

Currency Converter

Display converted product prices in your Wiser recommendation widgets by connecting a supported currency converter app.

Wiser supports currency converter integrations such as Conversion Bear, MLVeda, and Doubly Currency Converter.

If you use another currency converter, contact the Wiser team to check integration availability.

Out-of-Stock Settings

Control how unavailable products and variants are displayed in your recommendations.

You can:

  • Show or hide out-of-stock products

  • Grey out out-of-stock variants

Wishlist Settings

Add a wishlist option to your recommendation widgets by connecting a supported wishlist app.

Wiser supports wishlist integrations including iWish Wishlist, Wishlist King, Smart Wishlist, Growave, Swym Wishlist Plus, SWishlist, and Hulk Wishlist & Favorites.

If you use another wishlist app, contact the Wiser team to check whether it can be integrated.

Custom CSS

For advanced customization, use the Custom CSS option to make additional styling changes and match your Wiser widget more closely with your store's theme.


​
​

Step 3: Preview and Save

Preview your changes to make sure everything looks as expected, then click Save.
​

🎉 Congratulations! Your Wiser widget has now been customized to match your store.
​

If you experience any issues, feel free to contact us through support@expertvillagemedia.com or our live chat. We're here to help!

Did this answer your question?