Skip to main content
All CollectionsGiving Widgets
Can I change the colours?

Can I change the colours?

Liam Houlahan avatar
Written by Liam Houlahan
Updated over a year ago

You have full control over the style of the widgets. In this guide I will mostly focus on the Product Page Banner, but these settings are applicable for all our widgets.

Please Note. If you have added a widget using the Shopify Theme Editor, changes made to your widgets appearance in the Virtue admin will have no effect. You will need to change them directly in your Theme Editor. Find out more here.

Appearance settings.

On the page of the widget you wish to customise you will see the appearance settings to the left of the widget preview.

Widget theme

These are our pre-made themes, allowing you to quickly change the look of the widget.

  1. Select the widget theme dropdown.

  2. Choose between the six widget themes.

  3. Click the Save button at the bottom of the screen, or the Next button during onboarding, to confirm your changes.

It is important to know that when you customise the product page widget during onboarding, those settings will be applied to all other widgets as well. For instance, if you change the background colour to green, all other widgets will also adopt this colour.

Creating your own theme

You can easily create your own theme to perfectly match the design of your store.

In this example I will show you how to change the colour of your widget.

  1. Choose custom from the theme dropdown menu (or base your design off of any of our themes).

  2. Locate the colour setting.

  3. Click the colour picker at the end of the field and select your desired colour

  4. Update the other colours using the same method. Check the preview to the right to see your changes.

  5. Once you are happy with your design, click the save or next button to update your widget.

If you want to match your shop's theme, a useful tip is to use a colour picker tool, choose a colour from your site and paste the hexadecimal code (#F5F5F5) into the input field of the setting you want to update.

Advanced settings

By default the advanced options are hidden.

  1. To display the advanced options, click on the down arrow located to the right of the advanced options text.

  2. In the advanced settings, you can toggle the widget's border on or off, adjust the border radius, modify the drop shadow, and change the row padding settings.

  3. After changing any of these settings, click Save or Next to confirm your changes.

Did this answer your question?