Business Hours

Estimated reading: 10 minutes 470 views

This widget is useful for companies to manage and communicate their daily operating hours efficiently. It offers two layouts: Predefined and Custom.

When selecting predefined timing, you can utilize the live business indicator feature, which allows you to display personalized opening and closing messages and real-time updates on the business’s status, whether it is currently opened or closed.

Additionally, it showcases live timing, keeping your clients well-informed and up-to-date with your company’s schedule.

The Business Hours widget features the following controls:

Content

Content

  • Layout: Select from either predefined or custom. Predefined option have pre-set days, while the Custom option allows you to manage days according to your needs.
Business Hours: Content Layout Settings
Business Hours: Content Layout Settings
  • Days: Add the days using Add Item button(applicable for Custom Layout).

Content

  • Day: Enter the text of the Day.
  • Closed: Enable the option, if needed.
    • Closed Text: Enter the text.
  • No. of Slots: Enter the number of slots available.
  • Opening Time: Set the opening time.
  • Closing Time: Set the closing time.
  • Label: Enter the label, if any.
Business Hours: Content Settings(individual day)
Business Hours: Content Settings(individual day)

Icon

  • Icon Type: Choose from a list of Icons, Images, or Lottie animations.
    • Icon
      • Icon: Select from the Font Awesome icon library or upload an SVG image.
    • Image
      • Image: Either upload an image or select a dynamic tag for display.
      • Image size: Choose the size for your icon image display.
    • Lottie Animation
      • Source: Choose the source of the Icon by either adding an External URL or selecting a media file.
      • Loop: Enable the loop option to display the animation continuously.
      • Reverse: Activate the reverse option to display the animation in reverse order.
  • View: Select from default, stacked, or framed display options.
  • Shape: Select either Circle or Square shape for the stack or frame.
Business Hours: Icon Settings(individual day)
Business Hours: Icon Settings(individual day)

Style(for individual day)

Day

  • Color: Select the color.

Time

  • Color: Select the color for time slot.

Label

  • Color: Select the color for label.
Business Hours: Individual Day Style Settings
Business Hours: Individual Day Style Settings

Icon

  • Primary Color: Choose the primary color for the icon.
  • Secondary Color: Choose the secondary color for the icon.
  • Size: Set the size of the Icon using %, EM, REM, VW, or PX.
  • Padding: Set the padding for the Icon.
  • Rotate: Set the rotation of your Icon in degrees.
  • Border Width: Set the border’s width.
  • Border Radius: Set the border’s radius.
Business Hours: Icon Style Settings
Business Hours: Icon Style Settings

Row

  • Background Type: Choose either a Classic or a Gradient.
    • Classic
      • Color: Choose the color for the background.
      • Image: Either upload an image or select a dynamic tag for display.
      • Image Size: Choose the size of the image, from thumbnail to full.
      • Position: Set the position of the background image.
      • Attachment: Choose either scroll or fixed.
      • Repeat: Specify the repeat pattern for the background image.
      • Display size: Choose between contain, cover, and auto options, or add custom values for the background display size.
    • Gradient
      • Color: Select the color for the background.
      • Location: Determine the position of the color on the background by specifying their location in percentage.
      • Second Color: Select the second color for the background.
      • Location: Determine the position of the second color on the background by specifying their location in percentage.
      • Type: Select either Radial or Linear.
        • Radial
          • Position: Set the position.
        • Linear
          • Angle: Set the angle using DEG, GRAD, RAD, and TURN.
Business Hours: Row Style Settings
Business Hours: Row Style Settings
  • Icon Type: As we mentioned above, Choose from a list of Icons, Images, or Lottie animations. Click here.
Business Hours: Icon Type Settings
Business Hours: Icon Type Settings
  • Show Current Day Only: Enable the option to show only current day.
  • Highlight Current Day: Enable the option to highlight current day.
  • 24 Hour Format: Enable the option to display time in the 24-hour format.
  • Separator: Specify the Separator for displaying between slot times.
  • Day Format: Choose either Long or Short.
  • Show Business Indicator: Enable the option if needed.
Business Hours: Content Settings
Business Hours: Content Settings

Indicators

Note: This option is applicable when Show Business Indicator option is enabled in Content Section.

  • Title: Enter the title for Business Indicator.
  • Icon Type: As we mentioned above, Choose from a list of Icons, Images, or Lottie animations. Click here.
Business Hours: Indicator Settings
Business Hours: Indicator Settings
  • Date: Enable the option if needed.
    • Date Format: Select the date format from the list or enter a custom date.
Business Hours: Indicator Date Settings
Business Hours: Indicator Date Settings
  • Time: Enable the option if wanted.
    • Format: Select from either 12 hours or 24 hours.
Business Hours: Indicator Time Settings
Business Hours: Indicator Time Settings
  • Opening Warning Text: Enable the option to display open warning text.
    • Minutes: Specify, How many minutes before message will display.
    • Opening Warning Text: Enter the warning text.
Business Hours: Indicator Opening Warning Text Settings
Business Hours: Indicator Opening Warning Text Settings
  • Closing Warning Text: Enable the option to display closing warning text.
    • Minutes: Specify, How many minutes before message will display.
    • Closing Warning Text: Enter the warning text.
Business Hours: Indicator Closing Warning Text Settings
Business Hours: Indicator Closing Warning Text Settings
  • Label: Enable the option if desired.
    • Opening Text: Enter the text for opened label.
    • Closing Text: Enter the text for the closed label.
Business Hours: Indicator Label Settings
Business Hours: Indicator Label Settings

Style

Content

Day

  • Color: Select the color of day.
  • Typography: Set the typography.
Business Hours: Day Style Settings
Business Hours: Day Style Settings

Time

  • Color: Select the color of Time.
  • Typography: Set the typography.
Business Hours: Time Style Settings
Business Hours: Time Style Settings

Slot Label

  • Typography: Set the typography of label.
  • Text Color: Set the text color of label.
  • Background Type: As we mentioned above, Select either classic or gradient. Click here.
  • Gap: Set the label gap from time.
  • Padding: Set the padding.
  • Border Radius: Set border radius.
Business Hours: Slot Label Style Settings
Business Hours: Slot Label Style Settings

Icon

Open

  • Primary Color: Choose the primary color for the icon.
  • Secondary Color: Choose the secondary color for the icon.
Business Hours: Icon Style Settings(Open)
Business Hours: Icon Style Settings(Open)

Closed

Styling controls for the closed row icon are available under this section. These settings will be applied when Someone closed any row.

  • Size: Set the size of the Icon using %, EM, REM, VW, or PX.
  • Padding: Set the padding for the Icon.
  • Rotate: Set the rotation of your Icon in degrees.
  • Border Width: Set the border’s width.
  • Border Radius: Set the border’s radius.
Business Hours: Icon Style Settings
Business Hours: Icon Style Settings

Box

  • Background Type: Select either from classic or gradient. Click here.
  • Padding: Set the padding.
  • Border Type: Set the border properties.
    • Width: Set the width of border.
    • Color: Select the color of border.
  • Border Radius: Set border radius properties.
  • Box Shadow: Set the box shadow.
Business Hours: Box Style Settings
Business Hours: Box Style Settings

Row Style

Row

  • Typography: Set the typography of row.
  • Text Color: Select the text color.
  • Background Type: Select either Classic or Gradient. Click here.
Business Hours: Row Style Settings
Business Hours: Row Style Settings

Alternate

  • Alternate Color: Select the color for alternate row.
  • Background Type: Select either Classic or Gradient. Click here.
Business Hours: Alternate Row Style Settings
Business Hours: Alternate Row Style Settings
  • Text Shadow: Set the text shadow.
  • Box Shadow:Set the box shadow on row.
  • Gap: Specify the gap between the rows.
  • Border Type: Set the border.
  • Padding: Set the padding.
  • Border Radius: Set the border radius.
Business Hours: Row Style Settings
Business Hours: Row Style Settings

Closed Style

  • Background Type: As we mentioned above, Select either classic or gradient. Click here.
  • Day: Select the color of closed day.
  • Text: Select the color of closed text.
Business Hours: Closed Day Style Settings
Business Hours: Closed Day Style Settings

Highlighted Day

Note: This option is applicable when Highlight Current Day Option is enabled in Content section.

  • Color: Select the color of highlight day.
  • Typography: Set the typography.
  • Background Type: As we mentioned above, Select either from classic or gradient. Click here.
  • Primary Color: Choose the primary color.
  • Secondary Color: Choose the secondary color.
Business Hours: Highlighted Day Style Settings
Business Hours: Highlighted Day Style Settings

Indicators

Note: This option is applicable when the Show Business Indicator option is enabled in Content Section.

  • Background Type: As we mentioned above, Select either classic or gradient. Click here.
  • Border Type: Select the border type.
  • Border Radius: Set the border radius.
  • Box Shadow: Set the box shadow properties.
  • Padding: Set the padding.
  • Spacing: Specify the spacing.
Business Hours: Indicators Style Settings
Business Hours: Indicators Style Settings

Title

  • Typography: Set the typography.
  • Text Shadow: Set the text shadow properties.
  • Text Color: Select the color of title.
  • Background Type: Select either from classic or gradient. Click here.
  • Alignment: Set the alignment of title.
  • Padding: Set the padding.
  • Icon Gap: Set the gap of icon from title.
Business Hours: Indicators Title Style Settings
Business Hours: Indicators Title Style Settings

Icon

  • Primary Color: Choose the primary color for the icon.
  • Secondary Color: Choose the secondary color for the icon.
  • Size: Set the size of the Icon using %, EM, REM, VW, or PX.
  • Padding: Set the padding for the Icon.
  • Rotate: Set the rotation of your Icon in degrees.
  • Border Width: Set the border’s width.
  • Border Radius: Set the border’s radius.
Business Hours: Indicator Icon Style Setttings
Business Hours: Indicator Icon Style Setttings

Date

Note: This option is applicable if Date option is enable in Indicators section.

  • Typography: Set the typography of date.
  • Text Shadow: Set the text shadow.
  • Text Color: Select the text color of date.
  • Background Type: Select from classic or gradient. Click here.
  • Alignment: Select from Left, Center, or Right.
  • Padding: Set the padding.
Business Hours: Indicator Date Style Settings
Business Hours: Indicator Date Style Settings

Time

Note: This option is applicable if Time option is enabled in Indicators section.

  • Typography: Set the typography of date.
  • Text Shadow: Set the text shadow.
  • Text Color: Select the color of text.
  • Background Type: Select either from classic or gradient. Click here.
  • Alignment: Select from Left, Center, or Right.
  • Padding: Set the padding.
Business Hours: Indicators Time Style Settings
Business Hours: Indicators Time Style Settings

Label

Note: This option is applicable when Label option is enabled in Indicators section.

  • Position: Select either Fixed or Relative.
  • Top: Set the spacing from top(applicable if Fixed position is selected).
  • Right: Set the spacing from right(applicable if Fixed position is selected).
  • Typography: Set the typography of label.
  • Text Shadow: Set the text shadow.
Business Hours: Indicators Label Style Settings
Business Hours: Indicators Label Style Settings

Normal

  • Text Color: Select the color of text.
  • Background Type: Select either from classic or gradient. Click here.
Business Hours: Indicators Label Style Settings(Normal)
Business Hours: Indicators Label Style Settings(Normal)

Closed

Styling controls for the closed day label are available under this section. These settings will be applied when someone puts a label on closed day.

Business Indicator: Closed Day Settings
Business Indicator: Closed Day Settings
  • Padding: Set the padding.
  • Border Type: Select the border type.
  • Border Radius: Set the border radius.
  • Box Shadow: Set the box shadow properties.
Business Hours: Indicators Label Style Settings(Hover)
Business Hours: Indicators Label Style Settings(Hover)

Opening Warning Text

Note: This option is applicable when Opening Warning Text option is enabled in Indicators section.

  • Typography: Set the typography of date.
  • Text Shadow: Set the text shadow.
  • Text Color: Select the color of text.
  • Background Type: Select either from classic or gradient. Click here.
  • Alignment: Select from Left, Center, or Right.
  • Padding: Set the padding.
Business Hours: Indicators Opening Warning Text Style Settings
Business Hours: Indicators Opening Warning Text Style Settings

Closing Warning Text

Note: This option is applicable when Closing Warning Text option is enabled in Indicators section.

  • Typography: Set the typography of date.
  • Text Shadow: Set the text shadow.
  • Text Color: Select the color of text.
  • Background Type: Select either from classic or gradient. Click here.
  • Alignment: Select from Left, Center, or Right.
  • Padding: Set the padding.
Business Hours: Indicators Closing Warning Text Style Settings
Business Hours: Indicators Closing Warning Text Style Settings

Order

Choose the order of displaying individual elements, such as

  • Title
  • Date
  • Time
  • Opening Text
  • Closing Text

Note: If any of these elements have a lower priority than others, they can be placed first on the Business Indicator box. This feature gives you greater control over the visual hierarchy of your webpage.

Business Hours: Indicators Items Order Settings
Business Hours: Indicators Items Order Settings

Box

  • Background Type: Select either from classic or gradient. Click here.
  • Border Type: Select the border type.
  • Border Radius: Set border radius properties.
  • Box Shadow: Set the box shadow.
  • Overlay Color: Select the overlay color of box.
  • Padding: Set the padding.
Business Hours: Box Style Settings
Business Hours: Box Style Settings

Check out the Demo page of Business Hours.

Share this Doc

Business Hours

Or copy link

CONTENTS