Banner alignment settings

The settings outlined here are essential for defining the overall look and feel of an online shop. These core theme settings are applied globally but can be customized at the section or block level to maintain a consistent design and user experience throughout the site.

The Banner alignment setting group allows you to control the positioning of content within banners. This includes both horizontal and vertical alignment options, ensuring that text and images are displayed in a visually appealing manner. Horizontal alignment options include left, center, and right, while vertical alignment options include top, middle, and bottom, with the default being bottom.

For practical usage, you might consider centering both the horizontal and vertical alignment to highlight a call-to-action button in a banner, ensuring it is prominently displayed. Alternatively, aligning text to the left can create a clean and organized look for banners with a lot of text, especially when paired with an image on the right. These settings offer flexibility in designing banners that meet the aesthetic and functional needs of your shop.

Overview #

The settings described here are core theme 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. They are crucial for maintaining a consistent design and user experience throughout the shop.

Key components and functionality #

Banner alignment

The Banner alignment setting group allows you to control the positioning of content within banners, ensuring that text and images are displayed in a visually appealing manner.

Horizontal alignment

This setting determines the horizontal positioning of content within a banner. You can choose from the following options:

  1. Left: Aligns content to the left side of the banner.
  2. Center: Centers content within the banner.
  3. Right: Aligns content to the right side of the banner.

Vertical alignment

This setting controls the vertical positioning of content within a banner. The available options are:

  1. Top: Aligns content to the top of the banner.
  2. Middle: Centers content vertically within the banner.
  3. Bottom: Aligns content to the bottom of the banner.
    • Default: Bottom

Usage examples #

  1. Centering a Call-to-Action: You might consider centering both the horizontal and vertical alignment to highlight a call-to-action button in a banner. This ensures the button is prominently displayed in the middle of the banner.

  2. Aligning Text to the Left: For banners that contain a lot of text, such as a promotional message, you might consider aligning the text to the left to create a clean and organized look, especially if the text is accompanied by an image on the right.

These settings provide flexibility in designing banners that fit the aesthetic and functional needs of your shop, enhancing both the visual appeal and user experience.