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:
-
How to Use Time-Based Pricing and Conditional Display to Increase Conversions
-
Using the Advanced Options of the Conditional Display Setting
-
Hide/Show the Lesson Resources Depending On the Lesson Status of Each User
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:
-
Using the Advanced Options of the Conditional Display Setting
-
Hide/Show the Lesson Resources Depending On the Lesson Status of Each User
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 😸