With Studio.Design CMS, you can show or hide elements in the design editor based on properties set in your CMS items.
This article explains how to use the Published date/time property of a CMS item to display a "NEW" badge for a limited time right after a CMS article is published.
Point: What is Studio.Design CMS?
Studio.Design CMS is a Content Management System (CMS) feature that lets you structure, manage, and update content directly within Studio.Design. By combining models, items, and properties, you can manage frequently updated content like blogs and news in one place.
To learn more about how Studio.Design CMS works and how to get started, check out these articles:
Show an element only during a set period
By setting a display condition like "within X days/weeks/months/years from" on the Published date/time property in Studio.Design CMS, you can show a specific element only during that time frame.
Currently, the Published date/time is the only property with date information that can be used for display conditions.
So, if you want to display something for a set period starting from a specific date, you'll need to edit the published date/time from the CMS dashboard.
Use cases
Display a "NEW" badge on blog articles posted within the past week.
Show a price label badge on limited-time offers for 3 days only.
Display a "Recommended" mark on campaign products for one month.
In this article, we'll walk through how to display a "NEW" badge only on articles published within the past week in a news article list.
Before you start
The steps in this article assume that your CMS article content has already been created. Make sure you've completed the following:
Create your news articles in the CMS dashboard.
Create an article-type CMS model and add article items (CMS items).
In the CMS item detail editor, enter your article content and add related info like categories as properties.
Set the publication status of your completed article items to [Published].
In the design editor, use a dynamic page to create a news article detail page linked to the CMS model you created in step 1.
In the design editor, use a CMS list to create a news article list linked to the CMS model you created in step 1.
For a full overview of creating and publishing CMS articles, see this article:
Step 1. Set the Published date/time property in the CMS dashboard
First, check the Published date/time property of your news article and edit it if needed.
In the CMS dashboard, open the CMS item for the news article you want to update.
Check the Published date/time property. By default, this is automatically set to the date and time the article was published.
To adjust when the article appears as "new," change the published date/time after publishing to control how long the badge appears.
Step 2. Add a "NEW" badge in the design editor
Add a "NEW" badge to your news article list.
In the design editor, open the page that displays your article list (CMS list).
Add a text box and move it to the layer where you want the "NEW" badge to appear.
Enter "NEW" in the text box.
Double-click the text box, or use the text settings field on the [Text] tab in the right panel to edit the wording and formatting.
Use the right panel to adjust font size, text color, background color, padding, and more to make the badge stand out. The articles below offer helpful tips.
If the panel is closed, open the right panel.
Step 3. Set the display condition in the design editor
Now, set a display condition for the "NEW" badge based on the published date/time.
Select the "NEW" badge.
In the right panel, select the [Settings] tab.
If the panel is closed, open the right panel.
Click the Display condition field.
From the property list, select [Published date/time] and set the period to [1] [week].
Step 4. Verify the display
Finally, make sure the "NEW" badge appears only during the intended period.
Open Live Preview and confirm that the "NEW" badge appears only on CMS items within the specified period from the published date/time.
If needed, change the published date/time of an article in the CMS dashboard and verify that the badge appears or disappears as expected.
Check the news article list on your published site. Make sure the CMS item's status is set to Published, then publish your site from the publish panel if everything looks good.
If your site is already published, update your site to apply the changes.
Related articles