All Collections
Advanced
Custom Elements & CMS Collections
Using Custom CMS Collections for Dynamic Segments
Using Custom CMS Collections for Dynamic Segments

Learn how to use custom CMS collections to manage dynamic segments and feeds of content that are regularly updated.

Updated over a week ago

Learn how to use custom CMS collections to manage dynamic segments and pages like menus, blogs, news, jobs and more.

CMS Collections allow you to define your own models with various attributes to use within your custom elements.

How to create a CMS Collection

To create a CMS Collection, simply log into your Shogun dashboard and navigate to "CMS" menu on the left.

Shogun's menu showing the location of the CMS feature

Click the "Create New" button in the upper-right to start your new CMS collection.

Button showing how to start building your CMS collection in Shogun

How to add properties to a CMS Collection

Properties can be added to your CMS Collections to allow you to store data in them. The property can be one of the following types:

  • Plain Text

  • Rich Text

  • Image (HTML)

  • Image (URL)

  • Markdown

  • HTML

  • Integer

  • Boolean / checkbox

Click the "Add Property" button to start adding properties to your CMS collection. When clicking this button, a pop-up will appear where you can set a name and value type for your property.

The menu to add properties to CMS collections in Shogun

Note: Property names should be lowercase and without spaces.

How to add an entry to your CMS Collection

Adding an entry to your CMS collection is super easy. First, go to the CMS section of your Shogun dashboard and click on the name of the CMS collection you've created.

image showing a listing of the CMS collections in the Shogun dashboard

Next, click the "Add entry" button in the upper-right to start adding entries to the CMS collection.

Once you've clicked this button, you'll see fields for each of the properties you've defined in your CMS collection. Populate content into each of the property fields, then click the "Save" button to add the entry to your CMS collection.

Screen what data can be added into custom CMS collections in Shogun

How to use a CMS Collection in a Custom Element

You can create a Custom Element on your page to display the content of your new CMS Collection. To get started, navigate to the "Advanced" section of the Shogun dashboard, select "Custom Elements", then click the "Create New" button in the upper-right to open the custom element editor.

The custom element editor in Shogun

To use the new CMS Collection:

  1. Create a variable to add your collection to.

  2. Select 'Collection' in the right-hand menu of the editor

  3. Select your collection from the dropdown menu

  4. Hit save

You will see the available properties of the CMS Collection in the right-hand menu of the editor.

How to use your Custom Element and CMS Collection on a page

Just like any other Custom Element, you will find your new custom element in the "Custom" category of the Elements library in the Shogun editor.

Custom elements listing in the Shogun editor

To use this on your Shogun page, you can simply drag this onto your content like any other element!

What are the benefits of CMS Collections?

When you need to update a CMS Collection, all of the pages with this CMS Collection will be updated automatically. This allows you to create sections that can be updated.

Please note: CMS collection updates can take up to 30 minutes to reflect on the live page.

What is the best way of using the data in a Custom Element?

Once a CMS Collection is set into a Custom Element, you can go ahead and get started with reading in this data by referencing their properties. You will need to follow the instructions above in order to ensure that your CMS Collection is assigned to a variable before you get started.

Referencing a property is super easy to do, this can be done using the property name, for example,

{{ my_cms_collection.my_property }}

If you are working with lists of data, it is best to use a for loop to access all of your data in the CMS Collection.

{% for data in my_cms_collection %}
{{ data.my_property }}
{% endfor %}

This will ensure that all of your content is looped through and displayed as you would like it to be.

Did this answer your question?