Banner foreground media settings

Overview #

The Banner Foreground Media setting group is designed to control the visual presentation of media elements across your theme. These settings are essential for defining how images and links are displayed in the banner foreground, contributing to the overall look and feel of your shop. While these settings are applied globally, they can be customized at the section or block level for more specific design needs.

Key components and functionality #

Image

This setting allows you to select an image for the banner foreground. The image picker provides an easy-to-use interface for uploading or selecting an existing image from your library.

Image style

This setting determines the style of the image displayed in the banner foreground. You can choose from the following options:

1. Default: The image is displayed in its original form.
2. Rounded corners: The image is displayed with rounded corners for a softer appearance.
3. Circle: The image is displayed as a circle, which can be useful for profile pictures or logos.

Max image width

This setting controls the maximum width of the image in the banner foreground. You can adjust the width within a range of 0 to 1600 pixels, in increments of 16 pixels. The default value is 160 pixels. This flexibility allows you to ensure that images are displayed at an optimal size for your design.

Link

This setting allows you to add a URL link to the image in the banner foreground. This can be useful for directing users to a specific page or external site when they click on the image.

Usage examples #

1. Promotional Banner: You might consider uploading a promotional image, setting the image style to "Rounded corners" for a modern look, and adjusting the max image width to fit your design. Adding a link could direct users to a special offer page.

2. Profile Display: You might consider selecting a profile picture using the image picker, choosing the "Circle" style for a professional appearance, and setting the max image width to ensure it fits well within your layout. Using the link setting could direct users to a personal profile or contact page.

3. Product Highlight: You might consider uploading a product image, keeping the style as "Default" to maintain the original product look, and adjusting the max image width to highlight the product prominently. Adding a link could provide easy access to the product page.

These settings provide a versatile framework for customizing the visual presentation of media elements in your theme, enhancing both aesthetics and functionality.