Multiple Layouts
Last updated
Last updated
Multiple layouts allows you to create different structures and satisfies any specific styles for different kinds of business.
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Theme settings -> Multiple layouts.
Body
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
These settings are only applicable when the 'Layout' setting of the Body section is set to 'Boxed'.
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
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
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
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
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
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
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.
