Theme settings
From Ira's Customize theme editor, you can click on the Theme settings tab to access theme-wide settings.
The articles in this section provide more detail about how these theme settings work, and link out to Shopify documentation when these settings reach outside of Ira's scope.
Colors
From the Colors theme settings panel, you can set the colors Ira uses across the theme.
For each setting, you can use Shopify's color picker to change the color. Use the Save button in the top-right corner of your Customize theme editor once you're finished editing.
Color settings
Ira has many color settings available, so you can completely customize Ira's look so it matches your branding and style.
We realize that having so many settings is a bit confusing, so as we define each setting we'll include an image that describes where and how the color is displayed.
Here are quick links to each sub-section of color settings:
General
Background
Change the dominant background color of each page.
Note that the page background does not affect other sections that have their own background color, like the header, footer, and sections with contrast colors enabled.
See the home page in pink::
Borders
The line color of borders between sections of a page, and around any buttons and form inputs that have border lines.
See examples in red::
Overlay
The overlay color of a page. This color is shown when a modal window appears. You can see it when clicking the search icon or opening a mega nav menu.
See a pink overlay in this image::
Headings
Change the color for heading text. Headings appear in almost every section of each page. You can see a home page section's heading in red::
Note that some sections override this color with their own, section-specific heading color.
Body
Change the color for regular body text. This changes many product names, prices, descriptions, blog post text, and so on. This will be the majority of body text on your storefront.
You can see examples of body text in red::
Links
Change the color for link text. Links appear in your store's body text. See an example in red::
Header
You can set colors specific to the header of your store.
Background
Change the background color of the header.
When you use the transparent header feature, note that this color is displayed only some of the time.
See an example in red::
Text
Change the color of any text or icons that appear in the header. This includes the menu icon (☰) as shown on mobile.
Note that if you have not uploaded a logo, the text color is applied to your store name as well.
See an example in red::
Border
Change the color of border line at the bottom of the header.
Settings reference
The footer is a large section at the bottom of every storefront page.
Background
Change the dominant background color of the footer. See an example in red::
Text
Change the text color of the footer.
Border
Change the line color of the borders of the footer. This setting effects border lines as well as input borders, like the newsletter signup form.
Set the colors of primary buttons across the storefront. Most buttons are considered primary buttons. They are usually "Buy" buttons, add-to-cart buttons and other calls to action.
You can see an examples of primary buttons in red::
Background
Change the background color of the primary button.
Text
Change the text color of the primary button.
Contrast
Some of Ira's sections allow you to enable contrast colors. When enabled, the section will use the colors below instead of the your regular text, button, and page colors.
Background
The background color for each contrast section. See an example in red::
Headings
The heading color for each contrast section. See an example in red::
Body
The body text color for each contrast section. See an example in red::
Borders
The border color for each contrast section. See an example in red::
Button background
The button background color for each contrast section. See an example in red::
Button text
The button text color for each contrast section.
Links
The color of links in each contrast section. See an example in red::
Settings reference
If your store uses Ira's mega navigation menu or quick shop features, use these color settings to change their colors.
The search bar, cart modals, and the drawers revealed by pressing on a menu icon (☰) also use these color settings.
See examples in red::
Text
Change the color of popover modal text.
Background
Change the dominant background color of all popovers. See an example in red::
Border
Change the line color of borders around your popovers. See an example in red::
Input background
The background color of the search bar input found inside of popover modals.
See an example in red::
Input text
The text color of the search bar input found inside of popover modals.
Fonts
From the Fonts theme settings panel, you can change the fonts used across your store.
Settings reference
The following font settings are available:
Headings
The font used for header text store-wide.
Body
The font used for body, link, and button text store-wide.
Mini headings
The font used for mini heading text store-wide. Meta text includes product price and info, and other store-related text.
Layout
From the Layout theme settings panel, you can change the presentation of some global Ira layout styles:
You can show or hide a border line between each section of a page.
You can change the corner radius of images and bordered layout elements.
These settings can completely transform how your storefront feels.
Here's an example of a home page where the Corner radius is set to 0 pixels::
And here's an example of a home page where the Corner radius is set to 16 pixels::
Configure layout presentation
Settings reference
You can change the global layout with these settings:
Show border between sections
Check this checkbox to show a visible border between sections of each page.
Corner radius
Use this slider to set the radius of images and box-like elements on each page.
Animation
From the Animation theme settings panel, you can enable or disable the transition animations when you navigate from page to page. When enabled, the pages fade into each other smoothly.
Search
The Search theme settings panel lets you customize how search results appear to customers. For example, you may want to include blog posts in search results, or include the product's vendor name.
Configure search results
To change the presentation of search results:
Settings reference
Search results have the following settings:
Results per category
For each product category, set the amount of results that should be displayed for a search.
This setting ranges from 1 to 6 results.
Show articles
Include your store's articles (blog posts), if relevant, in search results.
Show pages
Include your store's pages, if relevant, in search results.
For each product search result, the following settings are available:
Show price
Show the product's price inline with its search results.
Show vendor
Show the product's vendor name inline with its search results.
Product
From the Product theme settings panel, you can change how customers choose from variants of a product. These settings allow you to choose which variant option types should use swatches and chips.
There's a whole article about how to configure swatches. See Swatches for more information.
Swatches look like this::
And chips look like this::
By default, swatches are enabled for the Color option type. Chips are enabled for the Size option type.
Option types that do not use swatches or ships instead have dropdown menus for each type::
Cart
From the Cart theme settings panel, you can add some functionality to your cart pages.
Here, you can also enable Ira's "quick shop" functionality.
Change your cart presentation
Settings reference
The cart has the following settings:
Show notification when item is added to cart
Check this checkbox to flash a notification message whenever the customer adds an item to their cart.
Enable quick shop
Check this checkbox to enable Ira's quick shop feature.
Enable cart notes
Check this checkbox to let customers add special shipping instructions for their order.
Social media
From the Social media theme settings panel, you can add links to all of your social media accounts.
These links activate buttons that link to each social media page. These buttons can be configured to appear in Ira's footer.
Here's what the buttons look like when active::
Configure social media accounts
To set social links up, put your social media page's URL into the matching field of your social media settings.
For example, a YouTube channel URL would look something like https://www.youtube.com/user/shopify, where shopify would be your own username.
Favicon
From the Favicon theme settings panel, you can upload a favicon.
Favicons are tiny icons that appear next to your site's title or URL in browser tabs, bookmark menus and address bars. The recommended image dimensions are 32px by 32px.
Favicon
An upload form that takes a favicon.
Recommended dimensions:
| Width | Height |
|---|---|
32 pixels* | 32 pixels* |
*Minimum recommended dimensions. We strongly recommend that you upload a square icon.
All modern desktop browsers support ICO, PNG and GIFs as favicons. See Favicons on Wikipedia for more information.
Checkout
From the Checkout theme settings panel, you can change the look and feel of your checkout pages.
Checkout styles are a Shopify feature. So, Ira uses Shopify's standard settings.
For more information about these settings, see Shopify's Customizing the style of your checkout article.
Last updated