Layout

Theme settings - Layout

The Layout settings in your theme allow for control over the width, spacing, and corner radius of elements on your store, ensuring a cohesive and customizable design.

1. Page width:

Adjust how far the sections span across the page. Set the maximum width that your online store will display at using these options: 1200px, 1400px, 1600px, 1800px.

Behavior based on screen width:

  • When Screen width > Page width: The section width remains at the selected page width, even if users increase their window or browser width.

  • When Screen width < Page width: Left and right margins are fixed (non-zero), ensuring sections don’t span full width.

Example: If you set the page width to 1400px and view the store on a 1920px screen, the section width will stay at 1400px. On smaller screens (e.g., 768px), margins will ensure the section maintains a visually balanced width.

2. Spacing:

Adjust the margins between sections on both desktop and mobile devices:

  • Space between sections on desktop (from 0 to 100px): Controls the margin between sections for desktop views.

  • Space between sections on mobile (from 0 to 100px): Ensures mobile-optimized spacing while maintaining a clean layout.

3. Corner radius:

Fine-tune the roundness of the corners for various elements throughout your store. Range for corner radius: 0px ➝ 40px. Elements affected:

  • Buttons:

    • Buttons in sections like Rich text, Image banner, Grid, etc.

    • Quick add buttons, Buy buttons on product pages.

    • Variant picker block (when in button layout).

  • Content:

    • Images, videos, and product media displayed on the product page.

    • Sections with content containers like Multicolumn, Image with text, etc.

    • Images of products in sections like Featured collection, Collection tabs, Shop the look, and Product grid in the Collection page.

    • Images of collections in the Collection list section and on the Collections list page.

    • Blog images in the Blog post page & Blog posts section.

  • Badges: Sale badges, Sold out badges, and Custom badges.

  • Dropdown and popups

  • Country flags.

Last updated

Was this helpful?