Storefront Development

Storefront Development
Store Framework
Creating an institutional page with Content types

Content types are templates that structure your documents. They can be pages, publications, articles, events, products, and any other type of content that you want to insert into your project. You can also use them in the CMS to create an institutional page.

To create an institutional page, follow these tutorial.

  1. Define the components of your page. In the example below, we use the page and its title, partners, highlights, and carousel components.

{"base64":"  ","img":{"width":1049,"height":559,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":241068,"url":""}}

  1. In the cms folder, go to the content-types.json file.

{"base64":"  ","img":{"width":381,"height":216,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":47545,"url":""}}

  1. In the content-type.json file, create a new content type. To do this, define the following information:
  • id: content type ID. It is recommended to have a lowercase pattern with no spaces, like with URLs.
  • name: name that will be displayed on the page.
  • configurationSchemaSets: extra blocks that will configure the page, such as menu settings and slug blocks, for example.
{ "id": "landing", "name": "Landing Page", "configurationSchemaSets": [] }
  1. Determine the page sections in the section.json file. To define the sections, duplicate an existing one and edit it using the new names and descriptions that you want in your page.
{ “name” “Hero”, “schema”: { “title” “Hero”, “description”: “Add a quick promotion with an image/action pair”, “type”: “object”, “properties”: { “title”: { “type”: “string” }, “subtitle”: { “type”: “string” }, “linkText”: { “type”: “string”, “title”: “Link text” }, “link”: { “type”: “string”, “title”: “Link path” }, “Image5rc”: { “type”: “string”, “title”: “Image”, “widget”: { “ui:widget”: image-uploader }, “Imagealt”: { “Type”: “string”, “title”: “Alt text” } }

️ These fields are the structure of your page. Complete them based on what was defined in step one of this tutorial.

  1. After defining the sections, save them. If you want to view the draft, go to the repository for testing. 6. Go to the store to view the final version of your page.

Learn More

Photo of the contributor
+ 1 contributors
Was this helpful?
Suggest edits (Github)
On this page