Skip to end of metadata
Go to start of metadata

Want this feature?

This feature needs to be switched on for your site by Commerce Vision. 

Overview 

The Layout Creator in the CMS allows you to create custom layouts for various pages throughout your site. 

Add rows and columns to a layout as you wish. Each row can be made up of one or many columns. You can even create a custom Theme, if you choose.


Layout Creator can be used with these templates:

  • Product List
  • Theme
  • all Content pages


With the release of CMS 1.23, Layout Creator will be available for:

  • Cart
  • Checkout
  • Category List Zoned
  • Product List Item
  • Flyer 

On this page:


The guide below will show you how to create your own page layouts quickly and easily.

Enable Layout Creator

Layout Creator is not on by default. Contact Commerce Vision to request it.


Create a New Layout

  1. In the CMS, go to the page/template you wish to design the layout for.

  2. In the layout preview pane, the current layout is displayed. You can toggle between Desktop, Tablet, and Mobile views.
     

  3. Click Change. Any existing custom layouts will be displayed, followed by out-of-the-box BPD layouts.

  4. Hover over Options, and click Add Custom Layout.


  5. Give your Layout a Name.

  6. If you like, you can load an example layout, then edit as required. Hover over Options, then click Load Example Layout.
     

  7. Otherwise, start by adding a row.
     

  8. The modal Add New Row window launches. This is where you specify:
    • CSS classes to apply to the row display.
    • Whether the row is full width (e.g. no container wrapping the row)
    • How many columns you’d like (up to 6). If there are 2 or more columns, they will be created with equal width.
       

  9. To save the row, click Confirm.
    (The rows and columns are automatically named in the format Row1Column1, Row1Column2, and so on. You can rename these to anything you like!)
     

  10. Click the Add a row button to continue building your layout. Add as many rows as required. 

  11. To save your new layout, click Save or Save & Exit


Edit a Column

  1. Hover over one of the columns in your row. You’ll see two options: Edit & Delete.

  2. Click Edit.
  3. The Column Options modal window launches. Here’s where you can:
    • Give the column a unique name - one that is meaningful to you.
    • Specify an additional CSS class for the column’s display.
    • Change the column width. The row will never exceed 100% width, so your column options will take that into account. If you want to increase the width of one column, you may need to first delete or decrease the width of another.


  4. To save any changes, click Confirm.


Edit a Row

  1. On the right hand side of each row, you’ll see two buttons: Edit and Options.
     
  2. Click Edit to make changes to the CSS classes and the Full Width setting for that row.
     
  3. Hover over the Options button to:
    • Add Column
    • Delete Row
       

  4. Keep in mind that your row cannot exceed 100% width. If you have 3 columns at 33% and you click ‘Add Column’, a message displays to tell you to resize other columns first.
     


Edit a currently used Layout

A layout that is currently in use somewhere on the website will have limited editing options. This is to protect the look and functionality of the page(s) currently with that layout.
If a layout is in use, a message displays to tell you the layout cannot be edited and which templates are using it.

 

You will also be able to:

  • Add a new row
  • Change column widths and class names for the newly added row
  • Create a duplicate/copy of the layout




Additional Information


Rows and columns can be added to a layout to follow your design wishes.

Minimum Version Requirements


**.**.**

Prerequisites



Self Configurable


Yes

Business Function


BPD Structure

BPD Only?


Yes

B2B/B2C/Both


Both

Third Party Costs


n/a


Related help