Appearance
Set your store's navigation layout, global spacing, and visual structure — from classic header-based to editorial sidebar-based layouts.
Theme Editor → Theme settings → Appearance
One layout setting, every page transformed
Most Shopify themes give you a header and that's it. Avante is built differently — with a full Sidebar-based layout option that opens up store structures you simply can't build with a conventional header-only theme. Whether you're running a brand with a story to tell, a multi-category catalog, or a high-fashion editorial experience, the right layout makes your store feel purpose-built.
Navigation layout
Header-based
Classic top navigation. Only the header is displayed — sidebars are disabled. Fast to set up, widely understood by shoppers. Pair with Transparent header for a cinematic full-bleed hero.
Sidebar-based
Moves the menu to the side, freeing the entire top area for brand content. Choose from 7 configurations. You can also add a header alongside the sidebar.
The diagram below shows all available layout configurations — Header-based and the main Sidebar-based combinations.
Sidebar setup
Available only when Sidebar-based navigation is selected.
Sidebar navigation creates layouts that look more like an editorial publication than a standard Shopify store. A secondary sidebar adds a second navigation layer — useful for stores with deep category structures or extra content like brand stories and lookbooks.
Sidebar template
Select from 7 options: Main XS, Main XS with secondary, Main S, Main S with secondary, Main M, Main M with secondary, Main L half screen.
Show header
Display a header above the sidebar.
The example below shows Main S with secondary — a compact main sidebar on the left and a secondary sidebar on the right.
Transparent header and sidebars
Make the header overlay the first section of the page instead of pushing it down — for a cinematic full-bleed hero effect.
Allow transparent navigation
Enables the transparent overlay effect. Must be combined with a supported section.
Enable on mobile
Extends the transparent effect to mobile screens (v8).
Supported sections: Slideshow with media, Image banner, Video banner, Footer.
Three steps are required for transparent navigation to work:
Add a supported section (Slideshow, Image banner, or Video banner) to the top of your template
Open that section → enable Overlap by navigation
If you use Sidebar-based navigation → open Main sidebar section in Theme Editor → scroll to Colors → set Color scheme.
The sidebar will have its own background and override the transparency effect if the "Swap" or "Set" settings are selected.
For a full guide including logo setup for transparent state, see Transparent header.
Spacing & layout
The White space and Max page width settings define the breathing room of your store. Spacious layouts with wider max widths feel premium and editorial; compact layouts with tighter spacing feel efficient and product-focused.
Remove side padding for media
Lets images and videos go edge-to-edge while keeping text padding intact. Can be overridden per section (v13).
White space
Controls spacing between blocks. Spacious = larger gaps, Compact = tighter layout.
Enable custom product grid gap
Unlocks manual control of spacing between product cards in grid sections (v14).
Column gap (desktop / mobile)
Gap in pixels between product card columns. Available when custom grid gap is enabled.
Show lines
Displays divider lines between elements. Line color is inherited from the text color.
Line width
Line thickness from 1px to 4px.
Line opacity
Line opacity from 0% to 100%.
Center text
Aligns headings and content to center across all templates except navigation. Overridden by individual section/block alignment settings.
Max page width
Maximum width for page sections: 1200px, 1400px, 1700px, or Full-width.
Include header and footer
Applies the max page width to the header and footer as well.
Prevent iOS zoom in input fields
Disables auto-zoom for input fields on iOS, preventing layout shifts.
Pro tip: Enable Remove side padding for media to let hero images and video banners run full-bleed edge-to-edge, while text and content blocks retain their comfortable side margins.
Last updated
Was this helpful?