“How do I configure my theme’s colors?”

All of Ira’s colors are completely customizable. The color settings in your general settings are your store’s global colors. These colors affect just about every aspect of your store.

There are additional color settings available for specific features in your store, like the header, slideshows, the image with text sections and the footer.

Accent
Used for text links, buttons, and the header message.
Background

Your store’s background color. This will be the most dominant color present in the store. See an example

The image with text section and the footer have their own dedicated background color settings.

Border
Used on user inputs throughout the site, like the quantity chooser. See an example
Headings
The color of headings store-wide.
Text
The color of text store-wide.
Button text
The color of button text store-wide.
Image overlay background
If the Display title/price on hover feature is turned on anywhere in the store (like on collection pages or on a home page featured collection section), this is the background color of the overlay that displays your product names and prices when the customer hovers over a product image. See an example
Image overlay text
The text color on overlays when the Display title/price on hover feature is turned on anywhere in the store (like on collection pages or on a home page featured collection section). See an example

Background

The background color is the dominant color of your store’s page. In the image below, you can see how changing the background color affects a product page.

Border

The border is used minimally throughout your store. It only appears on user inputs, like quantity inputs, your email newsletter signup form and on blog comment forms.

Border color examples

Image overlay background

Whenever you use the Display title/price on hover configuration, prices are only visible when the customer hovers over them. The image overlay background is the color of the product name and price block that appears on hover. This setting can be enabled on collection pages and on home page featured collections.

Image overlay background on hover

By default, Ira uses the Always display title/price configuration, so you won’t see the image overlay background.

You can learn more about how the overlay works on the documentation for the Collection page.

Image overlay text

The image overlay text appears on product images if the Display title/price on hover feature is configured. This setting can be enabled on collection pages and on home page featured collections.

There’s an example how this looks with the Image overlay background documentation.

Choosing a color palette

If you haven’t already picked a color palette for your store, you may be interested in these resources that could help you pick an effective scheme.