Point: What is Studio 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 centrally manage frequently updated content like blogs and news.
For more on how Studio.Design CMS works and how to use it, check out the articles below.
By combining display conditions that can be set on dynamic elements with boolean properties from CMS properties, you can control whether specific elements are shown or hidden on a per-item basis.
Use cases
Show a "NEW" badge only on newly added products in a product list or article detail page.
Show a registration button only for events currently being held on an event list or detail page.
In this article, we'll use a CMS model containing a restaurant menu as an example to walk through how to display a "NEW" badge only on new menu items in a menu list (CMS List).
Tips: Using other CMS properties for display conditions
By combining CMS properties with display conditions, you can flexibly control element visibility on dynamic pages and CMS Lists.
For more examples, check out the articles below.
Before you start
The steps in this article assume that you've already created your CMS article content. Make sure you've completed the following:
Create your announcement articles in the CMS Dashboard.
Create an article-type CMS Model and add article items (CMS Items).
In the CMS Item detail editor, write the article body and add related information like categories as properties.
Set the publication status of your finished article items to [Published].
In the design editor, use a dynamic page to create an announcement article detail page linked to the CMS Model you created in step 1.
In the design editor, use a CMS List to create an announcement article list linked to the CMS Model you created in step 1.
For an overview of creating and publishing CMS articles, see the article below.
Step 1. Set up a boolean property
Create a boolean property in the CMS Dashboard to mark which CMS Items should display the "NEW" badge.
In the CMS Dashboard, open the target CMS Model to view the list of CMS Items.
Scroll the item list to the right and click [+] at the far right.
Click [+ Add Property].
Select [Boolean] from the property types and click [Add].
Use a clear, descriptive name like "NEW Badge" so it's easy to identify in the design editor.
In the new [NEW Badge] column, toggle the value on or off for each CMS Item.
Set the boolean to enabled (on / blue) for any CMS Item where you want the "NEW" badge to appear.
Step 2. Place the "NEW" badge in the design editor
Add a "NEW" badge to the CMS List.
In the design editor, open the page that contains the CMS List linked to your target CMS Model.
Add a text box and move it to the layer where you want to place the "NEW" badge.
Type "NEW" into the text box.
Double-click the text box, or use the text settings field in the [Text] tab of the right panel to edit the wording and formatting.
In the right panel, adjust the font size, text color, background color, padding, and other properties to make it look like a clear, recognizable badge. The help articles below may be useful.
If the panel is closed, open the right panel.
Step 3. Set the display condition in the design editor
Apply a display condition to the "NEW" badge using the boolean property you added in Step 1.
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 the boolean property [NEW Badge].
Set the condition to [is True].
With this setting, the "NEW" badge will only appear for CMS Items where [NEW Badge] is enabled (true).
Step 4. Check the result
Finally, confirm that the "NEW" badge appears only where you intended.
Open Live Preview and check that the "NEW" badge is shown only on the CMS Items you intended.
Check the published site.
Confirm that the relevant CMS Items have a status of Published, and if everything looks good, publish the site from the publish panel.
If your site is already published, update the site to push your changes live.
Related articles
conditional display new arrivals customizing display