Please refer to this article for updated document on how you can easily change widget colors using theme editor - https://help.servv.ai/hc/en-us/articles/17909552216983

To customize the calendar widget colours for older widgets, you will need to make few changes in your store theme. Following are the steps to customize the calendar widget colours.

1. Login to your Shopify account and go to Online store > Themes > Actions > Edit code. Next go to Assets and click in "Add a new asset" option.

2. Go to "Create a blank file" tab and enter the file name as servv-event-widget-color. You can add any distinguished name. Choose the ".css" extension and click on "Add asset" button. The new asset will be created as event-widget-color.css

3. Next. open this link in a browser window and copy all code in a text editor:

https://web.servv.io/client-shop-widget/css/servv-widget.css

Let's say, you want to change the color to: #577A4C

Using "Find and Replace", perform the these three replacements:

1. Find: #5e20db;

Replace with: #577A4C !important;

2. Find: #3379ff;

Replace with: #577A4C !important;

3. Find: #f59b67;

Replace with: #577A4C !important;

Copy the updated code and paste in event-widget-color.css file that you created in step-2.

4. Now, you need to update your site theme code to include this new CSS file. Open the file "theme.liquid" and add the following code before </head> element:

##{{ 'event-widget-color.css' | asset_url | stylesheet_tag }}

Done! You can visit the site and should see updated colors.

If you are a theme developer and are looking to customize each div element separately, you can do that by following the instructions below.

1. First, go to your online store and open the event widget. Right click on the section of the widget where you want colour customization, and select the option "Inspect".

2. The HTML code will open. You will see the "div class" for that particular section will get highlighted. In the bottom, in Styles section you will find the specific class for the particular section. Copy the class from the Styles section.

3. In your newly created asset, paste the name of specific css. Next paste the code given below to change the colour. Save the changes.

.svv-event-card-item .svv-purchase-controls-container .svv-add-to-cart-btn {
background-color: #FFAC33 !important;
border: #FFAC33 !important;
}

You can enter the colour code of the colour you want.

4. Now go to your online store and open the event widget. You will see that colour of that particular section will change.

By following the steps given above you can change the colour of the widget as per your requirement. You just need to copy the specific class and paste it in the newly created asset.

NOTE: If you need any assistance with the widget customization, please contact us.