How to use CMS Page Editor

About this article

It is possible to compose custom pages using interactive page editor directly in Showroom. This article contains a guide on how to work with page sections, content and product blocks, how to upload the media, edit text and much more.

Page glossary

  • Page - The entire page content that will be visible to some markets
  • Section - Part of the page consisting of several groups of blocks, there can be multiple sections on the page. Sections can be restricted to different markets
  • Group of blocks - Group consisting of composed content blocks and products blocks or mixed content, that lies in the section. There can be multiple groups of blocks in the section
  • Content block - Single block with custom content that lies in the group of blocks
  • Product block - Single block consisting of fixed number of products that lies in the group of blocks

Editor UI

  1. The most important information about the page (title, status) is displayed in the top left corner
  2. Markets are displayed next to page status and there is a cog icon that allows to open Page settings modal
  3. There is a breakpoint switcher in the middle of the topbar that allows to see how the page will look like on desktop, tablet and mobile
  4. In the right we have action buttons: Save, Preview, Publish
  5. Editing empty page starts with adding first section with ‘Add section’ button in the bottom of the page
  6. After section is added we have an option to Add group of blocks
  7. After clicking Add group of blocks button we get the popup where we can choose a template:
  8. Templates are composed out of templates with product blocks, content blocks or both
  9. After choosing a template it is added to the section
  10. After hovering over the block, there is a toolbar displayed in the top right corner
  11. Content block has the following options: Text, Media, Background, Link, Delete
  12. Product block has the Edit products option

Restricting section visibility

It is possible to restrict the entire section to be seen only by specific markets.

  1. By default, when adding a new section it is set to be visible by users from all the markets from page settings.
  2. You can preview for which markets the section is visible for, by hovering on the section area:
  3. To change section visibility settings hover over the section area, choose three dots icon in the top right corner and click on 'Section visibility'
  4. You will be presented with the modal with Visibility settings:
  5. Hide section functionality allows you to hide the entire section from all the users without removing it from the page
  6. Markets listed in the visibility section are the markets that the section will be visible for. It is possible to change them by checking/unchecking the checkboxes.
  7. Devices listed in the visiblity section are breakpoints for which the section will be visible for. It is possible to change them by checking/unchecking the checkboxes.
  8. After changing the visibility settings, make sure to save your changes by clicking the Save button.

Adding text

  1. Hover over the content block and click on Text icon
  2. Choose Add text template
  3. Choose desired text template from the modal
  4. Sample text is added to the content block
  5. Click on the text part that you want to edit
  6. Manage text appearance by choosing text style (Primary heading, Preheading, Paragraph, Quote)
  7. Choose font size, text alignment and color
  8. Hover over the text block to see the resize and move buttons
  9. Move the text vertically by dragging the move icon in the top right corner
  10. Change text width by dragging the expand icon on the right edge
  11. Delete the text by accessing the block toolbar, clicking Text icon and choosing ‘Delete text’ option

Adding background

  1. Hover over the content block to display the toolbar and click on Background icon
  2. Click Add background option
  3. Choose desired background color in the color picker in the left corner
  4. After you’re satisfied with the background, click outside or close the toolbar with X icon
  5. To delete the background click the Trash icon in the background toolbar

Adding media

  1. Hover over the content block to access the toolbar and click on the Media icon
  2. Choose Add media icon
  3. In the popup, you have the possibility to add media by uploading the file or pasting the direct URL
  4. To add media by uploading the file, simply click Choose file button and select media, or drag the images directly into the file upload area
  5. To add media using the URL, simply paste the media URL into the URL input
  6. Preview the picture and click OK
  7. See that the image is added
  8. You can add images and videos
  9. To edit or delete the media hover over the content block to show the toolbar and click on Media icon
  10. Click on the Replace media option to open the media popup and change the media
  11. Click on Delete media to remove the media

Adding overlay

  1. Overlay can be added to increase the text visibility on image background
  2. Hover over the content block to show the toolbar and click on Media and then Add overlay
  3. Work with the toolbar displayed on the left and adjust overlay color and opacity
  4. Remove the overlay by clicking the Trash icon
  1. Link can be added to the content block. To do so hover over the content block to show the toolbar and click the Link icon
  2. Choose Add link
  3. Paste the URL to the desired page that you want to direct the users to in the modal
  4. Choose if the link should be opened in the new tab (window)
  5. Click Save

Feature markers

  • Small icons are displayed on the content block to visualize what settings are currently applied
  • The icon will be displayed when the content block has: applied background, overlay and/or link
  • It will not be visible to the end user, it appears only in the Page editor

Changing content block height

It is possible to change group height for the groups consisting of content blocks, to do so:

  1. Hover next to the group bottom edge and see that there is a resize icon displayed

  2. Drag the resize icon and resize the group

Adding products

It is possible to add products only to the product blocks, to do so:

  1. Hover over the Product block and click on Edit icon
  2. Choose products modal will open
    The popup consists of two sections: Available products and Product added
  3. Add products by hovering on the product and clicking Add
    The products that you will be able to choose from are determined by the page markets (configurable in page settings) and section markets (configurable in section visibility). Please note that the products that you can choose from the popup must be available in all of the section markets and not at least in one of them
  4. There is a maximum number of products can be added to the products block based on its capacity
  5. It is possible drag and reorder the products, this will determine in which order they are displayed on the page
  6. After you’re satisfied, click Save button
  7. The products are added
  8. To remove some of the products, hover over the block and click Edit icon
  9. In the Products added section hover over the product you want to remove and click on Trash icon

Clearing content block content

It is possible to remove all of the content block settings by one click, to do so:

  1. Hover over the content block to access the toolbar and click on Trash icon
  2. Confirm Clear in the modal

  3. After this action all of the text, media, background, etc. will be cleared and the content block will be empty

Previous article: How to manage CMS pages
Next article: How to setup a homepage

On this page