How to Create Flexible CMS Detail Pages

Create Flexible CMS Pages with Conditional Logic in Framer

In this guide, we explain how to use conditionals to create flexible CMS detail pages in Framer, enabling dynamic layouts that adapt to your content.

Controlling Visibility Using Conditional Logic “Is Set”

The simplest way to control visibility is with the “Is Set” condition. This checks whether an element (e.g., an image) is added to the page.

• If an image is added, it is displayed.

• If not, it remains hidden.

This approach requires no additional CMS fields and is ideal for straightforward use cases.

Screenshot area – Shows the “Is Set” option in the “Set Variable” dropdown.

Other Conditional Options

Conditional logic also supports text-based criteria, such as:

• Equals

• Doesn’t equal

• Starts with

• Doesn’t start with

• Ends with

• Doesn’t end with

• Contains

• Doesn’t contain

These conditions let you check for specific text matches to control element visibility.

Controlling Visibility Using Option Fields

Setting Up Option Fields

To add option fields in your CMS collection:

1. Navigate to the CMS view

2. Click Edit Fields

3. Click the plus icon to add a new field

4. Select Option from the dropdown menu

5. Create a list of options like “Show 1 Image” or “Show 3 Images” to customize visibility for each collection item

Applying Option Field Logic to Designs

1. Select the element whose visibility you want to control

2. Click the plus icon next to the Visible option

3. Select Set Variable and choose the Option condition

Key options include:

• Equal – shows the element if it matches the selected option

• Doesn’t equal – hides the element if it doesn’t match

• Convert – enables control for multiple options and fallback behavior for unmatched cases

Example: Dynamic Layouts with Component Variants

If you have a component with two variants — one showing three images and the other showing one — you can use the Convert option to select which layout to display for each option in the dropdown.

Using Toggle Fields for Simple Logic

For basic Yes/No conditions, use Toggle fields to control element visibility, such as showing or hiding an image.

Leveraging Conditionals and Transforms

Conditionals and transforms give you advanced control over CMS detail pages. You can apply conditions to any element with a plus icon (+), creating dynamic layouts tailored to your content.

For more advanced techniques, watch the full video guide.