Multiple Layouts
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 Body
| Setting | Description |
|---|---|
Default | Set the width of the body to its default size based on the viewport. |
Fullwidth | 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. |
Layout Boxed
These settings are applied when the 'Layout Body' uses 'Boxed' layout.
| Setting | Description |
|---|---|
Background Color | The background color of an entire page. |
Select Image Background | The background image of an entire page. |
Select Banner Left | Upload image banner to the left of the entire page. |
Link Banner Left | Specify the link for the left banner to redirect to. |
Select Banner Right | Upload image banner to the right of the entire page. |
Link Banner Right | Specify the link for the right banner to redirect to. |
Menu Mobile Layout
| Setting | Description |
|---|---|
Layout Default | The mobile menu will share the same content as the menu setup on desktop. |
Layout Custom | The mobile menu will be customized to have icons and links that are different from those on desktop. |
Collections Layout
| Setting | Description |
|---|---|
The Default Collection Layout comes with its filter facets on a sidebar. | |
The collection layout allows your customers to view and select their desired quantity of all the products on one page. | |
The Full Width Collection Layout will have the filter facets lying on the top of the product showcase. | |
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. | |
The layout of the collection page with the sidebar on the right side. | |
The collection page layout allows up to three additional image banners inside the product grid. |
List Collections Layout
| Setting | Description |
|---|---|
Collections will be displayed in a form of grid. The collection content displays below the collection image. | |
Collections will be displayed line by line. | |
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. | |
Collections will be displayed in a form of grid with the collection name superimposed over the collection image. | |
Collections will be displayed 2 columns per row. The collection content displays on the right side of the collection image. |
Product page layout
| Setting | Description |
|---|---|
The default layout of the product detail page. | |
The product page layout display product media as a scroll. To view all product images, simply scroll down. | |
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. | |
The product page layout displays product media as a grid with four images and can be slid left to view the remaining product images. | |
The product page layout shows product thumbnail slider to the left of the main product. | |
The product page layout shows product thumbnail slider to the right of the main product. | |
The product page layout shows the sidebar to the left/right of the main product. | |
The product page layout displays product media as a grid with two images and can be slide left to view the remaining product images. |
Blog Page Layout
| Setting | Description |
|---|---|
Blogs are shown in group | |
Blogs are shown individually | |
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. | |
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. | |
The blogs will be displayed line by line with the content to the right side of the blog image. |
Password Layout
| Setting | Description |
|---|---|
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. |
Last updated
