Page layouts: arrange your pages with blocks
Open My store → Layouts. This is where you decide what appears on each page of your store: the header, the home page sections, the footer and more. You need a screen at least 1024 pixels wide to edit.
How a page is built
- Choose the Page at the top: Default (Catch-all) applies to every page that has no layout of its own; you can add pages such as the home page, category pages or product pages with Add layout page.
- Each page is split into areas, top to bottom: Top bar (a thin strip above the header), Header, Page content, and Footer. The top bar, header and footer are usually shared by every page; Page content is only on that page.
- Each area has Rows. Each row has Columns (for example two columns: 58% and 42%). Each column holds Blocks.
- Page content (built-in) is where the page's own content goes (the product details on a product page, the cart on the cart page). Keep it on those pages.
Add a block
- Click Add Block in a column (or Add Row for a new row first).
- Search the block library: try "banner", "menu", "products" or "cart". Popular blocks:
- Hero Banner — a big image with a headline and a button;
- Banner Slider, Banners, Banner (composer) and Promo Grid;
- Products, Featured Products, Recent Products and Product Tabs — rows or grids of products;
- Shop by Category, Category Slider, Brands, Testimonials, Blog Posts, Shoppable Videos, Trust Badges;
- Announcement Bar, Heading, Text / HTML, Spacer, Divider, Custom HTML;
- header and footer blocks: Store Logo, Search Bar, Navigation Menu, Category Mega-Menu Bar, Account Menu, Cart Menu, Wishlist Icon, Footer Link Column, Social Links, Payment Badges, Newsletter Signup, Contact Info, Copyright Bar.
- Click the block to open its settings: its content (titles, images, which products) and display options.
Change and arrange
- Drag blocks to move them, or use Move up / Move down.
- Visibility hides a block, or shows it only on Desktop, Tablet or Mobile. Visible to limits it to certain customer groups.
- Delete a block, column or row from its menu.
Changes save automatically and appear on your live store straight away. You can undo a deletion, and History lists every change. Preview shows the page before you look at the real store.