Multiple Layouts

Multiple layouts allows you to create different structures and satisfies any specific styles for different kinds of business.

1. From your Shopify admin, go to Online Store -> Themes.

2. Find the theme that you want to edit, and then click Customize.

3. Click Theme settings -> Multiple layouts.

Body

Setting	Description
Layout	Default: Set the width of the body to its default size based on the viewport. Full width: Set the width of the body to be full of the viewport. Boxed: Set the width of the body to 1370px and and allow adding two banners to either side of the viewport. Custom width: Manually set the width of the body in the range between 1200px and 1920px.

Boxed layout

Layout Boxed on Home 16

These settings are only applicable when the 'Layout' setting of the Body section is set to 'Boxed'.

Setting	Description
Background color	The background color of an entire page.
Background image	The background image of an entire page.
Left banner	Upload image banner to the left of the entire page.
Left banner link	Specify the link for the left banner to redirect to.
Right banner	Upload image banner to the right of the entire page.
Right banner link	Specify the link for the right banner to redirect to.

Menu mobile

Setting	Description
Layout	Default: The mobile menu will share the same content as the menu setup on desktop. Custom: The mobile menu will be customized to have icons and links that are different from those on desktop.

Collection pages

Setting

Description

Layout

Default: The Default Collection Layout comes with its filter facets on a sidebar. Demo Express order: The collection layout allows your customers to view and select their desired quantity of all the products on one page. Demo Full with: The Full Width Collection Layout will have the filter facets lying on the top of the product showcase. Demo Masonry: The collection layout allows the product items in the following row rise up to completely fill the gaps. It minimizes gaps between elements of varying height, creating a ‘Pinterest-like’ layout. Demo Right sidebar: The layout of the collection page with the sidebar on the right side. Demo Banner advertisement: The collection page layout allows up to three additional image banners inside the product grid. Demo

Collection list pages

Setting

Description

Layout

Default: Collections will be displayed in a form of grid. The collection content displays below the collection image. Demo List: Collections will be displayed line by line. Demo Mansonry: The collections list page layout allows the collection items in the following row rise up to completely fill the gaps. It minimizes gaps between elements of varying height, creating a ‘Pinterest-like’ layout. Demo Grid: Collections will be displayed in a form of grid with the collection name superimposed over the collection image. Demo Full width: Collections will be displayed 2 columns per row. The collection content displays on the right side of the collection image. Demo

Product pages

Setting

Description

Layout

Default: The default layout of the product detail page. Demo Full width: The product page layout display product media as a scroll. To view all product images, simply scroll down. Demo Grid view: The product page layout display product media as a grid. First row show two images and next row show one image. The same for the next rows. Demo Gallery: The product page layout displays product media as a grid with four images and can be slid left to view the remaining product images. Demo Left vertical thumbnails: The product page layout shows product thumbnail slider to the left of the main product. Demo Right vertical thumbs: The product page layout shows product thumbnail slider to the right of the main product. Demo Left/Right sidebar: The product page layout shows the sidebar to the left/right of the main product. Demo Horizontal tab without sidebar: The product page layout displays product media as a grid with two images and can be slide left to view the remaining product images. Demo

Blog Pages

Setting

Description

Layout

Default: Blogs are shown in group. Demo Simple: Blogs are shown individually. Demo Full width: The blogs will be displayed line by line. The blog post content is to the right side of the blog image on the first line and the second line is the opposite. The same for next lines. Demo Masonry: The blog page layout allows the blog posts in the following row rise up to completely fill the gaps. It minimizes gaps between elements of varying height, creating a ‘Pinterest-like’ layout. Demo List: The blogs will be displayed line by line with the content to the right side of the blog image. Demo

Password Layout

Setting	Description
Layout	Password 01: The layout of the password page with the submit form on the left side and a background image on the right. Password 02: The layout of the password page allows the submit form and the count down block to display superimposed over the background image.