All Collections
Calender Widget Customization
Calendar Widget
[Deprecated] How to customize the appointment calendar widget colours manually?
[Deprecated] How to customize the appointment calendar widget colours manually?
Support avatar
Written by Support
Updated over a week ago

To customize the calendar widget colours 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.

Screen_Shot_2021-01-27_at_1.51.25_PM.png

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

Screen_Shot_2021-06-29_at_1.11.43_PM.png

3. Next go to Layout and open the file "theme.liquid". In the file add the new asset to css section. Enter the following code: ##{{ 'new_asset_name.css' | asset_url | stylesheet_tag }}.
Do not miss the .css extension after the asset name, and do not include .liquid after asset name.

Screen_Shot_2021-01-27_at_2.59.48_PM.png

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

Screen_Shot_2021-01-27_at_2.06.12_PM.png

5. 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.

Screen_Shot_2021-01-27_at_3.03.00_PM.png

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

{
background-color: #FFAC33 !important;
}

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

Screen_Shot_2021-01-27_at_3.03.41_PM.png

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

Screen_Shot_2021-01-27_at_3.08.23_PM.png


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.

Following are the images of customized calendar widget for reference.

Screen_Shot_2021-01-28_at_9.10.36_PM.png
Screen_Shot_2021-01-28_at_9.10.59_PM.png

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

Did this answer your question?