Layout

Overview #

The theme settings are designed to manage core settings that control the overall look and feel of an online shop. These settings are applied globally across the site but can be overridden at the section or block level. The settings are organized into theme setting groups, specifically focusing on layout settings, which influence the structural and visual presentation of the shop.

Key components and functionality #

Layout

The layout settings group is essential for defining the structural appearance of your shop. It includes settings that control the border radius and width of content and sections, allowing for a customized and cohesive design.

Border radius

This setting allows you to adjust the roundness of the corners of various elements throughout the shop. It provides a range from 0 to 160 pixels, with a step of 2 pixels. The default value is 8 pixels. Adjusting the border radius can soften the appearance of elements or create a more defined, angular look.

Content width

This setting determines the maximum width of the content container. It offers several options to choose from, including:

1. 768 pixels
2. 1024 pixels
3. 1240 pixels
4. 1440 pixels
5. 1600 pixels
6. No maximum width

The default setting is 1600 pixels. Selecting the appropriate content width ensures that your shop's layout is optimized for different screen sizes and provides a consistent viewing experience.

Section width

This setting controls the width of individual sections within the shop. The available options are:

1. Default (content width)
2. Full width
3. Full bleed

The default setting is default (content width). Adjusting the section width can help highlight specific content or create a more immersive browsing experience.

Usage examples #

1. Border radius customization: If you want to create a modern and sleek design, you might set the border radius to a higher value, such as 16 or 24 pixels, to give elements a more rounded appearance.

2. Content width adjustment: For a shop that features high-resolution images or detailed product descriptions, setting the content width to 1600 pixels can provide ample space for showcasing content without compromising readability.

3. Section width variation: Use the full bleed option for sections that contain large images or banners to create a dramatic visual impact, while keeping other sections at the default width for a balanced layout.

These settings allow for a high degree of customization, enabling you to tailor the shop's appearance to match your brand's identity and enhance the user experience.