Theme settings panel allows you to customize the overall appearance and functionality of your store. This section includes various global settings that affect your storefront, such as Colors, Typography, Layout, etc.
The Volume theme uses Color schemes to manage colors across different sections and elements of your store. This allows for a flexible and visually consistent design.
“Color schemes are a theme setting that group elements and their respective colors in a visually representative way. You can assign different colors to various elements in a cohesive color scheme that can be applied across your theme where a color scheme picker is available. You can have up to 21 color schemes.” — Shopify Documentation
Each section in the theme settings provides an option to choose a color scheme. Depending on the section type, you may have the ability to:
This granular control ensures that your store's branding remains consistent while allowing for creative customization. You can experiment with different combinations to achieve the best visual hierarchy and user experience.
For more information on how color schemes work in Shopify, visit the official Shopify documentation on color schemes.
In addition to selecting fonts for Body and Headings, you can instantly increase or decrease the size of all headings and body text at once, using the Base size range slider. This allows you to quickly modify the overall look and feel of your store without adjusting individual text elements.
If you need more precise control over each heading style, proceed to the next section.
For finer control, you can adjust each heading type separately. The theme allows you to set different sizes for desktop and mobile devices.
<aside> 💡
The Desktop font size scale setting is a percentage of the Base size.
</aside>
In the screenshot above, the Page title size is set to 150% of the Base size (40px), which equals 60px.
We provide detailed customization options for three types of headings:
While the Base size setting affects all headings at once, you can scroll down to the individual heading settings to customize each one separately.
In addition to heading settings, you can:
This is the smallest font used in the interface and captions. It should not be larger than the Body font size.
The settings for button labels are similar to Subheading customization. You can individually adjust:
<aside> 💡
In blocks or sections that include buttons, you can choose from three display styles:
In the Theme settings → Typography → Headings, you’ll find a Secondary heading picker. It’s used in two cases:
If you wrap any word or phrase inside {curly brackets} in a section or block’s Heading field, it will automatically pull the Secondary heading font.
In Theme settings → Typography, you can switch the toggle from Main to Secondary for a specific type of heading.
<aside> ☝🏻
For example, you can pair a bold accent font with your Main heading, or choose the same font in an Italic style for the Secondary heading to create more contrast.
</aside>
If you wrap any word or phrase inside [square brackets] in a section or block’s Heading field, that part will be highlighted using the Highlighted background color. This color is set in Theme settings → Colors → Color scheme applied to the specific section.
You can also mix Secondary heading and Highlighted heading together to create unique and unexpected combinations.
Basic layout settings such as Left and right margins and Spacing between sections are complemented by fine-tuned control over three grid variations.
<aside> 💡
Each grid can be applied to any section under Section layout subtitle.
</aside>
Each grid configuration includes:
The primary grid used for most sections with standard width and gaps.
An additional grid that allows for variations in width and spacing.
Designed for specific sections, such as navigation.
Each of the three grids can be applied to any section.
Additionally, within a section, you can individually configure specific grid parameters. These section-level settings override the selected grid settings: