Business Hours

Ensuring your customers know when you're open for business is critical. With JupiterX you can effortlessly create and stylize your business hours to resonate with your brand's look and feel. Follow this guide to customize your business hours display with ease.

View Live Demo

Content Tab

Adding and Removing Days

To add a new day, click on the "+ Add Item" button within the widget settings.
If you need to remove a day, click the "X" button that appears next to the day you wish to delete.

Setting Business Hours for Each Day

Click the pencil icon next to the day you want to configure.
Fill in the "Day" field with the correct day of the week.
Enter the opening and closing times (e.g., 9:00 AM - 5:00 PM) in the "Time" field.

Styling

A good visual presentation of your business hours can significantly impact customer perception. Customize them with the following styling options:

Enable "Style This Day" by switching it to "Yes" to apply custom styling to a day.
Choose a color for the day's text with "Day Color".
Alter the time's text color by picking "Time Color".
Personalize the background color for the day's row with "Background Color".

Style Tab

Container

Set the widget's overall background by selecting a "Background Color".
Customize the border by choosing a "Border Type", which includes solid, dotted, and dashed options.
Shape the widget's appearance by adjusting the "Border Radius" for rounded corners.
Add depth with the "Box Shadow" option, creating a shadow around the entire widget.

Row Styling

Control the inner spacing of each row with the "Padding" option.
Create an alternating color pattern by enabling "Striped Effect" and choosing colors for "Striped Odd Rows Color" and "Striped Even Rows Color".
Insert a divider between rows by toggling "Divider" and customizing "Border Style", "Color", and "Weight".

Day and Time Typography

Align the text for the day and time using the "Alignment" option.
Click "Typography" to choose your preferred font style, size, weight, and other attributes.
Pick a unified text color for the day and time with the "Color" option.