Business Hours
Business Hours
Welcome to the “Business Hours” documentation.
Looking to integrate a business hours into your website? Our block makes it easy for you to update your operating hours and other pertinent information on your website, including holiday closures or special events.
In this guide, we'll show you how to use the editor to customize your business hours block.
Step 1 : Open the Editor
1. Go to Business Hours templates.
2. Click on "Edit" after choosing your template.
class="flex justify-center items-start h-auto w-auto" alt="">Step 2: Set Operating and Closed Days
In this panel, you can effortlessly set and edit your working and closed days as required.
class="flex justify-center items-start h-auto w-80" alt="">1. To update your business hours, simply edit each day by selecting the opening and closing hours.
If your business operates in two sessions during the day, you can add additional time slots.
class="flex justify-center items-start h-auto w-80" alt="">2. Deactivate the toggle to mark a day as closed.
3. To simplify and speed up the process, you can use the copy icon to replicate the characteristics of one day to another.
class="flex justify-center items-start h-auto w-80" alt="">4. In the closed days section, you can specify the dates when your business will be closed.
class="flex justify-center items-start h-auto w-80" alt="">Step 3: Customize Your Content
In the content panel, you have the option to modify the label for each working and closed day, apply a background color or make it transparent, and select the text color according to your preferences.
class="flex justify-center items-start h-auto w-auto" alt="">Step 4: Configure Your Settings
Here, you'll handle the business hours settings:
1. You can decide if you want to put an image, choose where to put it in the page and adjust its width and height.
class="flex justify-center items-start h-auto w-auto" alt="">2. You can personalize the title style, border, and roundness.
class="flex justify-center items-start h-auto w-auto" alt="">3. Within the "Schedule" section, how to display the border and fine-tune its size.
Additionally, you have the option to adjust margins, modify roundness, set the time format, and define its style.
class="flex justify-center items-start h-auto w-auto" alt="">4. Lastly, in this section, you can determine how your block will be displayed, customize its style including roundness, width, and height. You can also fine-tune the margin to achieve the desired spacing.
class="flex justify-center items-start h-auto w-auto h-auto h-auto " alt="">Step 5: Choose Your Colors
In this panel, you can select your background style: whether it's an image, a color, a gradient, or transparent. Moreover, you can fine-tune the other content colors to seamlessly align with your website's design.
class="flex justify-center items-start h-auto w-auto" alt="">Step 6: Preview
Lastly, you can click on “Preview” to see how your business hours block looks on both desktop and mobile devices. After this, you can proceed to the next step.
class="flex justify-center items-start h-auto w-auto" alt="">