Width settings

Width controls the maximum width of your site’s content and sections. Set these values once to create a consistent layout across every page, while still allowing section-level overrides when needed. Well-chosen widths improve readability, visual balance, and overall usability.

⚠️ Important: Width choices apply site-wide and directly influence page structure and navigation. Configure them thoughtfully to keep your storefront clear, consistent, and easy to scan.

Width settings

Width settings give you centralized control over the layout widths used across your site. Adjusting these options influences both individual content containers and larger section layouts, offering a strong framework that boosts readability and design clarity.

Content width

Content width determines the maximum allowable horizontal space for your main content areas. This setting plays a key role in whether your content feels compact or expansive, impacting both readability and presentation.

Available options for content width are:

1. Use theme setting

   1. Inherits the main content width set in global theme settings. Default: theme setting

2. 768px

   1. Restricts content to a focused width, offering a maximum of 768 pixels.

3. 1024px

   1. Provides a moderate width, balancing openness and readability.

4. 1240px

   1. Offers a slightly broader presentation, well-suited for diverse layouts.

5. 1440px

   1. Creates a spacious content area, useful for visually rich designs.

6. 1600px

   1. Maximizes available space for very wide layouts or image-centric pages.

7. No max

   1. Removes all width constraints, letting the content fill the browser from edge to edge.

A thoughtfully selected content width supports effective information hierarchy and ensures a comfortable viewing experience on every device.

Additional information

Width settings serve as the backbone for storefront layout. While they ensure default structure and design consistency, you can still use section- or block-level overrides when specific layouts require exceptions. Responsive design is integral—width values should work well on both desktop and mobile screens.

Since mobile displays offer less space, you might consider tailoring widths, spacing, or imagery specifically for phones and tablets. This enhances performance, reduces clutter, and helps each visitor enjoy a readable and attractive storefront no matter their device.

💡 Tip: Use built-in responsive controls to fine-tune widths and assets for mobile displays. Adjusting spacing, images, or even section widths by device delivers a highly polished user experience.

Usage notes

1. Modifying content width adjusts the overall openness and density of your storefront.

   1. A balanced setting maintains clear navigation and strong readability.

2. Medium or narrow widths often work best for text-heavy pages; banners or image-focused sections are suited to full or full-bleed widths.

3. These settings are designed for responsive layouts by default, but wide or uncontrolled widths (like 'no max') may produce different results on very large displays.

4. For accessibility, aim to keep long-form text lines within a reasonable character count to promote easy reading.

5. You might consider using separate width or asset configurations for mobile sections, especially with visual layouts or custom images on smaller screens.

By leveraging Width settings thoughtfully, you achieve a balance of flexibility and structure, enabling your storefront to be both visually compelling and user friendly for every visitor.