Section width settings

Overview #

The Width settings group is a core part of the theme settings, designed to control the overall width of content and sections throughout the site. These settings are applied globally but can be overridden at the section or block level for more specific customization. They play a crucial role in defining the visual layout and user experience of the shop.

Key components and functionality #

Content width

This setting allows you to define the maximum width of the content area within the theme, providing flexibility in design and layout. It helps ensure that content is displayed consistently across different devices and screen sizes.

• Options:
  1. Use theme setting (default)
  2. 768px
  3. 1024px
  4. 1240px
  5. 1440px
  6. 1600px
  7. No max

These options enable you to select a predefined width or remove any maximum width constraints, allowing for full-width content display.

Section width

This setting controls the width of individual sections within the theme, offering different layout styles and visual emphasis. It provides flexibility in how sections are displayed, from adhering to the content width to extending across the entire screen.

• Options:
  1. Use theme setting (default)
  2. Content width
  3. Full-width
  4. Full-bleed

Disclaimer

The width settings are designed to provide a balance between aesthetic appeal and usability. It is important to consider the overall design and user experience when adjusting these settings to ensure that the content remains accessible and visually appealing across different devices.

Usage examples #

1. Creating a full-width hero section: You might consider setting the section width to "Full-bleed" to create a visually impactful hero section that spans the entire width of the screen, perfect for showcasing high-quality images or promotional content.

2. Maintaining a consistent content width: You might consider using the "Content width" option to ensure that all sections adhere to a uniform width, providing a cohesive look and feel throughout the site.

3. Responsive design considerations: When designing for mobile devices, you might consider using narrower content widths like 768px to ensure readability and ease of navigation on smaller screens. This approach allows for different settings between desktop and mobile, accommodating varying design needs and user experiences.

By leveraging these settings, you can create a visually appealing and user-friendly online store that adapts to various screen sizes and enhances the overall shopping experience.