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
Collection list pages
Layout
Product pages
Layout
Blog Pages
Layout
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.
Default: The Default Collection Layout comes with its filter facets on a sidebar.
Express order: The collection layout allows your customers to view and select their desired quantity of all the products on one page.
Full with: The Full Width Collection Layout will have the filter facets lying on the top of the product showcase.
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.
Right sidebar: The layout of the collection page with the sidebar on the right side.
Banner advertisement: The collection page layout allows up to three additional image banners inside the product grid.
Default: Collections will be displayed in a form of grid. The collection content displays below the collection image.
List: Collections will be displayed line by line.
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.
Grid: Collections will be displayed in a form of grid with the collection name superimposed over the collection image.
Full width: Collections will be displayed 2 columns per row. The collection content displays on the right side of the collection image.
Default: The default layout of the product detail page.
Full width: The product page layout display product media as a scroll. To view all product images, simply scroll down.
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.
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.
Left vertical thumbnails: The product page layout shows product thumbnail slider to the left of the main product.
Right vertical thumbs: The product page layout shows product thumbnail slider to the right of the main product.
Left/Right sidebar: The product page layout shows the sidebar to the left/right of the main product.
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.
Default: Blogs are shown in group.
Simple: Blogs are shown individually.
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.
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.
List: The blogs will be displayed line by line with the content to the right side of the blog image.
