CMS properties are pieces of related information you can add to CMS items.
For each item, you can flexibly add various types of information—such as text, images, numbers, colors, and select options—and use them for design and layout in the Studio.Design editor.
You can also build relationships with other models and dynamically link them using the feature that references models and registers them as properties (reference properties).
Tip: If you want to create listing pages for each attribute, such as writer information, tags, or categories, using reference properties is essential.
Point: What is Studio.Design CMS?
Studio.Design CMS is the CMS (Content Management System) feature available within Studio.Design.
For more on how it works and an overview, see the help articles below.
Property types and required properties
Here's a look at the property types available in Studio.Design, along with the required properties that are set up in advance.
List of property types
Studio.Design offers the following 11 property types. For details, see Property type details below.
Property type | Description |
Text | A property for storing free-form text (such as summaries, supplementary descriptions, or URLs). |
Rich Text | Designed for creating articles, this property lets you add headings, images, code, and more using Markdown syntax. You can add multiple rich text properties to a single item as needed. |
Image | A property for adding images. You can add or remove them as needed—for example, for card designs. |
Video | A property for adding videos. You can manage videos for each CMS item and display them by linking to a video box. |
A property for adding PDF files. Manage product catalogs, seminar materials, and other PDFs per CMS item, and use them as download links. | |
Number | A property for storing numeric values such as prices, sort orders, or numeric IDs. Can be used for sorting and conditional logic. |
Select | A property that lets you choose one option from a preset list. Great for status-style labels or managing types. |
Multi-select | A property that lets you choose multiple options from a preset list. Useful for tags or linking multiple categories. |
Boolean | A true/false property used to manage things like on/off or yes/no states. Great for flag-like information (for example, highlighting an item or marking it as a featured pick). |
Color | A property for storing color information such as color codes. Useful for color-coding by category or for visuals that align with your design. |
Reference | A property for linking items from other CMS models. Use it to associate items with categories, or to express relationships like related articles or related products. |
Required properties
CMS properties include "required properties" that Studio.Design provides by default and cannot be deleted. These are system-defined properties tied to the basic information and behavior of CMS items.
Point: "Body" and "Avatar" are required properties found only in the Article-type model and the User-type model, respectively.
Property name | Description |
A property for managing the publication state of a CMS item. There are four statuses: "Draft," "Published," "Changed," and "Scheduled." | |
Title | A property always shown as the name used to identify a CMS item. |
A unique string used at the end of the published page's URL. It's normally generated automatically for each CMS item, but you can change it as needed. | |
A property for setting the date and time when the CMS item becomes viewable on the published site. | |
Last updated | A property that shows the date and time the CMS item was last updated. It updates automatically based on edits, and users cannot change or delete it directly. |
Body | A rich text property added by default to items in the Article-type model. The property name is preset to "Body (Body/Contents)." |
Avatar | A property found only in the User-type model. Used to add a user's avatar image. |
Adding a CMS property
Tip: To display an added property on a page, you need to link the data to a box in the editor. For details, see Dynamic pages > Linking CMS data.
Follow these steps to add an optional property.
From the list of models on the left, select the model you want to add a property to.
On the items list screen, click [+] and choose a property type.
Edit the property label, then click Add.
Set the property value for each item.
You can also add properties the same way from the item detail screen.
Editing a CMS property value
From the list of models on the left, select the model you want.
Edit the property value on the CMS items list screen.Standard properties: You can edit them directly from the items list or detail screen.
Reference properties: To edit the property itself, go to the referenced model.
To clear a select or multi-select property value, click [×] to remove it.
Update the item.
If you edit or clear a property on a published item, its status changes to "Changed." To reflect changes on the published site, you'll need to update the item's status.
You can also do this from the item detail screen.
Editing and deleting property labels
From the list of models on the left, select the model you want.
On the items list screen, click the label of the property you want to edit.
From the menu, you can do the following:
Edit the label name
Choose values for select or multi-select properties
Hide the property
Delete the property (deleting a property cannot be undone).
You can do the same from the item detail screen.
Property type details
1. Text property
A text property lets you store a string of text.
You can choose between single-line and multi-line display. You can change this line-break setting later from the property settings screen.
Use cases
Show as an article subtitle
Show product descriptions
Store external link URLs
How to set it up
When adding the property, select [No line breaks] or [Line breaks allowed].
Enter your text and save. If line breaks are allowed: Use Shift/Option + Return to insert a line break (Shift or Alt on Windows).
Note: When switching from "line breaks allowed" to "no line breaks," <br> will appear at line break locations only in the CMS dashboard, while line breaks will remain in the editor, live preview, and published site. Remove the <br> text manually as needed.
Example of using a text property as a URL:
2. Rich text property
A rich text property lets you add formatted text—such as headings, paragraphs, bulleted lists, and links—using Markdown syntax. You can also add and arrange images, videos, and PDF files within the same property as needed.
For more on how to edit it, see CMS property: Rich text (Body).
Use cases
Manage long-form content like article bodies or columns in a single property
Create structured content for things like FAQs or help docs by combining headings, body text, and bulleted lists
3. Image property
An image property lets you add uploaded images.
For supported image formats, see File formats and sizes you can upload to the Studio.Design editor.
Use cases
Show a featured image for each article
Show a photo for each product
Show a writer's icon
4. Video property
A video property is for adding video files. You can link a registered video property to a video box in the editor to display it.
For supported video formats and file size limits, see Supported file formats and size limits.
Use cases
On a case study page, show interview videos for each article item.
On a product page, show how-to or demo videos for each article item.
5. PDF property
A PDF property is for adding PDF files.
You can add different materials or documents for each CMS item and use them as download links on the page.
As with regular pages, you cannot display the contents of a PDF directly on the page.
Use cases
On a product page, include PDFs of product specs or catalogs as download links.
On a seminar information page, share PDFs of handouts or slides from the event.
On a careers page, provide PDFs of company brochures or job descriptions.
6. Boolean property
A boolean property lets you set an on/off (true/false) value.
Use cases
Show or hide a "New" badge (combined with display conditions)
Mark "Recommended" products (combined with display conditions)
Change the style (color, size, etc.) of specific content (combined with conditional styles)
How to set it up
When adding the property, select [Boolean].
Set a clear label name (for example, "Show as New" or "Recommended product").
Turn it on or off for each item.
Related articles
7. Number property
A number property lets you add numeric values.
Use cases
Enter prices and use the editor's filter feature to show only products under ¥3,000
Enter product sizes and use the editor's filter feature to show only products from 100 cm to 500 cm
How to set it up
When adding the property, select [Number].
Enter a number for each item.
8. Color property
A property that lets you set a color (color code). You can use it as a box fill or as the text color in a text box.
Use cases
Color-coding by category
Setting tag background colors
How to set it up
When adding the property, select "Color."
Use the color picker or enter a color code.
Click "Confirm" to save.
Note:
Gradients cannot be set.
You cannot add or remove colors from your favorites palette through the CMS dashboard.
9. Select property
A select property lets you choose one option from a preset list. It's useful for categorizing items or showing tags.
You can filter items in a CMS list by specifying a single option as a filter condition.
Unlike reference properties, select properties don't have a slug (unique URL), so you can't use them to create separate page paths.
Select properties cannot be chosen as a dynamic filter (Dynamic).
If you need a listing page dynamically filtered by categories or tags, consider using a reference property instead.
Use case
For event announcement articles, attach a single label like "Reservation required" or "No reservation needed" to each event (when you don't need a separate article listing page for each label).
How to set it up
When adding the property, select [Select].
Register the options.
Choose one option per item.
10. Multi-select property
A multi-select property lets you choose multiple options from a preset list.
It's useful when you want to filter by multiple conditions at once using CMS list filter conditions. You can set up to 5 property options as filter conditions (AND search).
You can filter items in a CMS list by specifying single or multiple options as filter conditions.
Unlike reference properties, select properties don't have a slug (unique URL), so you can't use them to create separate page paths.
Select properties cannot be chosen as a dynamic filter (Dynamic).
If you need a listing page dynamically filtered by categories or tags, consider using a reference property instead.
Use cases
On a careers page, display multiple labels for job duties such as "HR" and "Accounting" (when you don't need a separate article listing page for each label)
On a portfolio site, display multiple labels such as "Graphic" and "Website" (when you don't need a separate article listing page for each label)
How to set it up
When adding the property, select [Multi-select].
Register the options.
Choose multiple options as needed for each item.
You can drag and drop to change the display order on both the site and within the dashboard. The upper items control the order on the site, and the lower items control the order in the dashboard.
11. Reference property
Unlike properties added directly to an item, a reference property lets you reference items from another model. You can choose between single-select (one) and multi-select (multiple).
Because the property itself can have its own additional info such as a slug (unique URL), you can create separate page paths or display additional images and text per property option.
You can create listing pages dynamically filtered by category or tag.
You can filter items in a CMS list by specifying single or multiple options as filter conditions. With multi-select, you can set up to 5 properties as filter conditions (AND search).
Use cases
Show writer info (such as image, name, and other details) on an article
Display tags or categories (when you also want to create a listing page for each tag or category)
How to set it up
When adding the property, choose a model from [Reference model].
Choose either single-select or multi-select.
Select a referenced item for each item.
When you add a reference property, you choose between single-select and multi-select. You cannot switch between single-select and multi-select later, so you'll need to recreate the property if you want to change it.
Differences between single-select and multi-select
Single-select:
Can reference only one item
Can be linked to text or image boxes
Multi-select:
Can reference multiple items
Can be linked only to lists
Note: You cannot change a reference property linked to a list from multi-select to single-select. If you need to switch between multi-select and single-select, you'll need to recreate the list.
property reference