Image overlay settings

Overview #

The overlay settings are part of the core theme settings designed to control the overall look and feel of the shop. These settings are applied throughout the theme to ensure a consistent aesthetic, but they can also be customized at the section or block level for more specific design needs.

Key components and functionality #

Overlay settings

Overlay settings enhance the visual appeal of the shop by adding layers of color and transparency to various elements. This helps create a cohesive design and can draw attention to specific areas.

Overlay color

The overlay color setting allows you to select a color for the overlay applied to elements. This can be used to create a uniform look or to highlight specific areas of the shop.

Overlay gradient

The overlay gradient setting enables the application of a gradient effect over elements. This adds depth and visual interest, making certain sections stand out more prominently.

Overlay opacity

The overlay opacity setting controls the transparency level of the overlay. It ranges from 0% (completely transparent) to 100% (completely opaque), with a default value of 48%. Adjusting the opacity can help achieve the desired balance between visibility and emphasis on the underlying content.

Usage examples #

1. Highlighting featured products: You might consider using a semi-transparent overlay color to subtly highlight featured products on the homepage, ensuring they catch the eye without overwhelming the rest of the content.

2. Creating depth with gradients: Applying an overlay gradient to the background of a promotional banner can add depth and draw attention to special offers or announcements.

3. Balancing text and background: Adjusting the overlay opacity on text-heavy sections can ensure readability while maintaining a cohesive design with the rest of the theme.