Overview #
The Banner Background settings are part of the core theme settings that control the overall look and feel of your shop. These settings are applied globally across the shop but can be customized at the section or block level for more specific design needs. They allow you to define how banners appear, ensuring a cohesive and visually appealing presentation throughout your shop.
Key components and functionality #
Banner background settings
The Banner Background settings provide options to customize the visual elements of banners, including images and videos for both desktop and mobile views. This flexibility ensures that your banners are optimized for different devices and screen sizes.
Background image fit
This setting determines how the background image is displayed within the banner area. You can choose from the following options:
- Contain: Ensures the entire image is visible within the banner, maintaining its aspect ratio.
- Cover: The image will cover the entire banner area, potentially cropping parts of the image to maintain its aspect ratio. Default: Cover
- Default: Uses the default setting for image fit.
Background image
This option allows you to select an image to be used as the background for the banner. The image can be uploaded or selected from existing media.
Background image (mobile)
This setting allows you to choose a specific image for mobile devices, ensuring that the banner looks optimal on smaller screens. Sometimes, a different image or aspect ratio might be preferred for mobile to enhance the user experience.
Background video
You can select a video to be used as the background for the banner. This can enhance the visual appeal and engagement of the banner.
Background video (mobile)
This setting allows you to choose a different video for mobile devices, ensuring that the video content is suitable for smaller screens and mobile data usage. Different assets or settings might be necessary for mobile to accommodate varying screen sizes and data considerations.
Usage examples #
-
Promotional Banners: You might consider using a high-quality image or video as the background to highlight special promotions or events. Setting the image fit to "Cover" can ensure the banner is fully utilized.
-
Seasonal Themes: You might consider changing the background images or videos to reflect seasonal themes, such as holiday decorations or summer vibes, to keep the shop's appearance fresh and engaging.
-
Mobile Optimization: Selecting specific images or videos for mobile backgrounds can ensure they load quickly and display correctly on smaller screens, enhancing the user experience for mobile shoppers.
These settings provide flexibility in how banners are presented, allowing for a cohesive and visually appealing shop design that can be tailored to different devices and marketing needs.
Align v1.7 is out now! Learn more about our best release yet →