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:
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:
Make full-width
Disable grid max-width
Disable grid gaps
The Variant Picker settings in Theme Settings → Variant Picker allow you to customize how product options are displayed. These settings apply to the Product Overview section (Product template), Quick View template, and Featured Product section.
You can also adjust the Input Size with two options: Big or Small.
<aside> 💡
</aside>
This is the default design when no other display type is selected.