Card color settings

Overview #

The settings outlined here are designed to control the app-wide look and feel of your shop. These core theme settings are organized into groups and focus on visual aspects such as colors and overlays. While these settings are generally applied throughout the entire shop, they can be overridden at the section or block level to allow for more granular customization.

Key components and functionality #

Color settings - Cards

This setting group allows you to customize the color scheme of cards used throughout the theme. Cards are versatile components that can display various types of content, such as products, collections, or articles.

• Card background color: This setting allows you to choose a solid color for the background of your cards.
• Card background gradient: You might consider applying a gradient effect to the card background, adding depth and visual interest.
• Card border color: Customize the color of the border surrounding your cards to match your theme's aesthetic.
• Card heading color: Set the color for the headings within your cards, ensuring they stand out and are easy to read.
• Card text color: Adjust the color of the text within your cards for optimal readability and style.

Banner color settings

This setting group focuses on the visual customization of banners, which are typically used for promotions or important announcements.

• Banner overlay color: Choose a color to overlay on your banners, which can help text stand out against background images.
• Banner overlay gradient: Consider applying a gradient overlay to your banners for a more dynamic visual effect.
• Banner overlay opacity: Control the transparency of the overlay with a range from -2% to 100%, allowing you to fine-tune the visibility of the underlying image. The default value is -2%.

Usage examples #

1. Customizing card appearance: You might consider adjusting the card background and border colors to create a unique look that matches your brand. For instance, setting a light grey background with a darker border can create a subtle, elegant effect.

2. Enhancing banner visibility: To ensure that promotional text on a banner is easily readable, you might consider applying a semi-transparent black overlay with a gradient effect. This can help the text pop without completely obscuring the background image.

These settings provide a flexible way to maintain a cohesive visual identity across your shop while allowing for specific customizations where needed.