General layout

Content width and Gutter

General layout settings to manage spacing between content and edges of the screen. 

Content width: This is the maximum width that contained sections will use in pixels. In sections - under Desktop layout settings - you can find the "Full width" setting. 
  • By enabling Full width the content width will be ignored and the section will use the full width of the browser window. 
  • By disabling the Full width, sections will act as contained.

Gutter: The gutter value affects the space between card elements in different parts of the store. However, you can customize the spacing between elements using the section-level grid gap setting. (See for example the Featured Collection section Desktop layout > Grid gap.)

Fixed maximum width

By enabling the fixed maximum width the main content area will not exceed the set content width value. White space is added to the left and right side of the content when the window size is larger than the content width. 

Use fixed maximum width if you want to maintain a non fluid look on wider desktop devices. Other benefits are that managing section medias gets easier as there is a threshold width that the images  and videos won't exceed.

 

 

Settings table

Setting Type Description
Content width Range
  • Sets the maximum width of the content area, in pixels
  • Min value: 1000px
  • Max value: 1920px
  • Default: 1440px
Enable fixed maximum width Checkbox
  • Enables forced maximum content area width
  • When window exceeds the maximum content width white space is added on both sides of the main content.
  • Default: False
White space color Color
  • Used only if fixed maximum width is enabled
  • The color of the whitespace
  • Default: Transparent / Body color
Main content shadow Range
  • Used only if fixed maximum width is enabled 
  • Controls the main area shadow, in percentage
  • Use value 0 to disable
  • Min 0%
  • Max 100%
  • Default: 25%