All Collections
Thrive Architect
Working in Thrive Architect
Using the Conditional Display Feature to Create a Top Section Adjustable to Your Closing Hours
Using the Conditional Display Feature to Create a Top Section Adjustable to Your Closing Hours

Learn how to create a custom top section that displays different contact methods, depending on the time someone accesses the website.

Iulia Dezmirean avatar
Written by Iulia Dezmirean
Updated over a week ago

In Thrive Architect/Thrive Theme Builder, you are now able to use the Conditional Display feature to choose how the content is viewed by users by creating display conditions.

Before we get started, here are some resources that might come in handy:

One of the ways in which this feature can be used is by choosing the closing time of your shop and creating a background section around that. For example, let's say I have a pastry shop that closes at 5 pm and people can place orders online.

When accessing my homepage, I want my visitors to be able to see a top section that changes according to the time of the day.

If someone accesses the site during working hours, they should see a phone number that they can use to place orders:

But if they access it when the store is closed, they should see the email:

If you want to achieve something like this, here are the steps to be taken:

1. Add a "Background Section"/"Content Box" on the top of your page

We're going to start by adding the section on the top side of our page. This can either be a "Background Section" element or a "Content Box" one - the "Conditional Display" feature will be available for either of them.

Open your page using Thrive Architect (or, if you want to insert this section globally, on more pages, you can also follow these steps on a Thrive Theme Builder template).

Once the editor opens, you can click on the plus sign from the right sidebar to open the list of elements and look for one of the above-mentioned elements. For this example, I will use a "Background Section":

Grab the element and drag and drop it on the editor, where you would like to have the section placed on the page:

2. Using the conditional display feature, create two different displays for the element

Once the element has been added, you can access the "Conditional Display" section of the left sidebar:

Click on the section, to expand its options:

Then, go ahead and add two displays (and rename them, to make everything easier). If you need help with setting up the displays, check out these resources:

3. Customize each variation of the element

Once you've added the two displays, you can go ahead and customize them. In this case, I have changed the background color, text and buttons, to make it very clear whether my store is open or closed.

Thus, when someone accesses my page, if it's during working hours, this is how the section will look like:

And if the page is being accessed during closing hours, this is what people will see:

4. Add the display condition rules for each of the displays

As a last step, to finish up our setup, we'll have to set up the display condition rules for each display.

For the one that appears during open hours, this is the rule that will be set:

And when the store is closed, this is the display condition rule:

This way, the scenario will be fulfilled.

I really hope this article was useful to you. If you need more help setting up various Thrive Suite features, make sure you take a look at our knowledge base.

Also, if the article was useful, don't forget to leave a smile below ๐Ÿ˜ธ

Did this answer your question?