Customize Store Layout
The Layout setting controls the overall spacing and structure of your storefront. You can use it to adjust the page width, section spacing, and grid spacing between product cards
This guide explains how to update layout settings in BurgerShop Theme Editor.
On this page
- Access Layout settings
- Understand Layout settings
- Change container width
- Change section spacing
- Adjust grid spacing
- Preview your layout
- Save and publish changes
Access Layout settings
You can manage your store layout from the Theme Editor.
Steps:
- Log in to your BurgerShop admin.
- Go to Online store.
- Select Themes.
- Open the theme you want to edit.
- Click Customize.
- In the left sidebar, click General setting.
- Select Layout.
From this section, you can adjust the global layout settings for your storefront
Understand Layout settings
The Layout section includes two main groups:
| Setting group | What it controls |
|---|---|
| Layout | Controls the main content width and spacing between sections |
| Grid | Controls spacing between product cards or items in a grid layout |
These settings can affect multiple pages, such as the homepage, collection pages, and product listing sections.
Change container width
The Container width setting controls the maximum width of your storefront content.
A wider container gives your store more horizontal space, while a narrower container creates a more focused layout.
Steps:
- Go to General setting > Layout.
- Find Container width.
- Drag the slider to increase or decrease the width.
- Review the storefront preview.
When to use a wider container
Use a wider container if:
- You want to show more products in one row.
- Your store has large product images.
- Your layout looks too narrow on desktop.
When to use a narrower container
Use a narrower container if:
- You want a cleaner, more focused layout.
- Your product cards look too spread out.
- Your content feels hard to scan.
Change section spacing
The Section spacing setting controls the vertical space between different sections on a page.
For example, it can affect the spacing between a banner, collection section, promotion section, and product grid.
Steps:
- Go to General setting > Layout.
- Find Section spacing.
- Drag the slider to increase or decrease the spacing.
- Review the preview.
Recommended use
- Increase spacing when sections feel too close together.
- Decrease spacing when the page feels too long or has too much blank space.
Tip
Good section spacing helps customers scan your storefront more easily. Avoid making sections too crowded or too far apart.
These settings can affect multiple pages, such as the homepage, collection pages, and product listing sections.
Change container width
The Container width setting controls the maximum width of your storefront content.
A wider container gives your store more horizontal space, while a narrower container creates a more focused layout.
Steps:
- Go to General setting > Layout.
- Find Container width.
- Drag the slider to increase or decrease the width.
- Review the storefront preview.
When to use a wider container
Use a wider container if:
- You want to show more products in one row.
- Your store has large product images.
- Your layout looks too narrow on desktop.
When to use a narrower container
Use a narrower container if:
- You want a cleaner, more focused layout.
- Your product cards look too spread out.
- Your content feels hard to scan.
Change section spacing
The Section spacing setting controls the vertical space between different sections on a page.
For example, it can affect the spacing between a banner, collection section, promotion section, and product grid.
Steps:
- Go to General setting > Layout.
- Find Section spacing.
- Drag the slider to increase or decrease the spacing.
- Review the preview.
Recommended use
- Increase spacing when sections feel too close together.
- Decrease spacing when the page feels too long or has too much blank space.
Tip
Good section spacing helps customers scan your storefront more easily. Avoid making sections too crowded or too far apart
Adjust grid spacing
The Grid settings control the spacing between items in product grids or collection layouts.
There are two main options:
| Setting | Description |
|---|---|
| Gap between columns | Controls horizontal spacing between product cards |
| Gap between rows | Controls vertical spacing between product cards |
Change gap between columns
The Gap between columns setting controls the space between product cards from left to right.
Steps:
- Go to General setting > Layout.
- Under Grid, find Gap between columns.
- Drag the slider to adjust the horizontal spacing.
- Check the product grid preview.
Increase the gap if product cards look too close together. Decrease the gap if you want to fit more content into the row.
Change gap between rows
The Gap between rows setting controls the space between product cards from top to bottom.
Steps:
- Go to General setting > Layout.
- Under Grid, find Gap between rows.
- Drag the slider to adjust the vertical spacing.
- Review the product grid preview.
Increase the row gap if product cards feel crowded. Decrease the row gap if your product list feels too long.
Preview your layout
After adjusting layout settings, review the storefront preview carefully
Save and publish changes
After updating the layout, save your changes.