Blum Theme settings

Theme: Blum · Section type: Theme settings

Theme settings control the look and behavior of your whole store in one place: colors, fonts, spacing, cart, badges, pre-order, product cards, quick shop, social links, and more. A change here updates every section that uses the setting, so your store stays consistent.

Note: This article gives an overview of each Theme settings category. Some categories have their own detailed article, linked in each part below.

Product cards with sale badges in a collection grid

What you can do

Open Theme settings
Set up your colors with color schemes
Change spacing, button shape, and animations
Set up stock, rating, swatches, and badge colors
Take pre-orders
See what customers see
Look up every setting in "Settings reference"
Fix common problems

Open Theme settings

In the theme editor, click the Theme settings icon in the left sidebar.
Click a category, for example Colors or Cart.
Change the settings. The preview updates as you go.
Click Save.

Tip: The Get Started category is a short setup guide. It lists the first steps: upload your logo, choose a theme style, set colors and fonts, and adjust spacing.

Set up your colors with color schemes

A color scheme is a set of colors for backgrounds, text, buttons, subheading badges, and accents. Each section uses one color scheme. When you edit a scheme, every section that uses it updates.

In the theme editor, click Theme settings > Colors.
Click a scheme to edit it, or click Add scheme to create a new one.
Set the General, Primary button, Secondary button, Subheading badge, and Accent colors.
Click Save.
In a section, select the scheme under Color scheme.

Tip: Keep enough contrast between the background and the text and button colors, so every customer can read your content.

Change spacing, button shape, and animations

In the theme editor, click Theme settings > Appearance.
Under Spacing, choose a Spacing scale. Optional: check Enable content max-width and set Content max-width.
Under Components, choose the Subheading style and the shape of Common components (Rounded or Sharp).
Under Animation and Link, turn the effects on or off.
Click Save.

Set up stock, rating, swatches, and badge colors

In the theme editor, click Theme settings > Product information.
Under Stock status, set Low stock threshold and New in date limit.
Under Rating, select your Product rating app.
Under Variant swatches, enter the Variant option and the Configuration rules.
Under Badge color, set the colors of the Sale, Sold out, and New in badges.
Click Save.

To show swatches with your own colors or images, enter one rule per line in Configuration, in the format Value: color or Value: file name. For example:

Deep Purple: #7000AA
Plastic: plastic.png

For an image swatch, upload the image first in Content > Files in your Shopify admin, then enter its file name.

Take pre-orders

Pre-order lets customers buy products before they are in stock. Pre-order is available in Blum 3.9 and later.

In the theme editor, click Theme settings > Product information.
Under Pre-order, choose when it applies in Enable pre-order: Yes, for products in scope or Only when out of stock.
Optional: select Products and/or Collections to limit pre-order to them. Leave both empty to apply it to all products.
Optional: change the Button label and the Cart message.
Optional: check Show pre-order badge on product cards and set the badge colors.
Click Save.

Note: With Only when out of stock, a variant gets the pre-order button only when Shopify tracks its inventory, its quantity is 0 or less, and Continue selling when out of stock is turned on for it in your Shopify admin.

Tip: Use Cart message to tell customers when pre-orders ship, for example "Ships in 2 weeks". A separate article, "Blum Pre-order", covers pre-order in more detail.

What customers see

Colors and fonts: every section shows the colors of its color scheme and the fonts from Typography.
Badges: product cards show Sale, Sold out, New in, pre-order, and custom badges in the colors you set.
Stock: when a variant's stock is at or below Low stock threshold, the "In stock" status on the product page turns orange instead of green.
Pre-order: in-scope products show the pre-order button label instead of Add to cart. In the cart and the cart drawer, pre-order items show the cart message, for example "Pre-order: Ships in 2 weeks".
Quick shop: customers open a product in a popup from its product card, choose a variant, and add it to the cart without leaving the page.
Links: with Preload links on hover on, a page starts loading when a customer hovers a link, so it opens faster.

The Quick shop popup opened from a product card

Settings reference

Colors

Each color scheme has these settings.

Setting	What it does
Background	Sets the background color of sections that use the scheme.
Background gradient	Replaces the solid background with a gradient. If a browser doesn't support gradients, it shows the solid background.
Content	Sets the color of text, headings, and icons.
Primary button: Background	Sets the background of primary buttons. Also used for text links.
Primary button: Background gradient	Replaces the solid primary button background with a gradient.
Primary button: Content	Sets the text color of primary buttons.
Secondary button: Background	Sets the background of secondary buttons.
Secondary button: Background gradient	Replaces the solid secondary button background with a gradient.
Secondary button: Content	Sets the text color of secondary buttons.
Badge background	Sets the background of subheadings shown as a badge.
Badge text	Sets the text color of subheadings shown as a badge.
Main accent text	Sets the text color of elements that use the Main accent, for example a prominent badge or an icon.
Main accent background	Sets the background color of elements that use the Main accent.
Extra accent text	Sets the text color of elements that use the Extra accent.
Extra accent background	Sets the background color of elements that use the Extra accent.

Typography

Sets the fonts and text sizes for body text, headings, buttons, subheadings, and menu items. See the article Blum Typography for every setting.

Appearance

Setting	What it does
Enable content max-width	Limits how wide the content gets on large screens.
Content max-width	Sets the maximum content width, from 1200 to 1500 px, in steps of 100 px. Works with Enable content max-width.
Spacing scale	Sets the spacing between and inside sections for the whole store: Small, Medium, or Large. The spacing also grows with the screen size.
Subheading style	Shows subheadings as a Badge (with the badge colors of the color scheme) or as plain text.
Common components	Sets the shape of buttons, variant selectors, color swatches, quantity selectors, and similar elements: Rounded or Sharp.
Enable parallax scrolling for Prominent badge	Moves the prominent badge in sections as the page scrolls.
Optimize page performance	Turns off the scroll-in animation for the first sections of a page, so the top of the page loads faster.
Preload links on hover	Starts loading a page when a customer hovers a link, so it opens faster. Doesn't run in the theme editor.
Enable RTL	Shows the store from right to left for the languages in Languages support RTL.
Languages support RTL	Lists the language codes that use right-to-left, separated by commas, for example ar,he,fa. Leave it blank to use right-to-left for all languages.

Cart

Sets the cart type (Drawer or Page), the add to cart confirmation, the cart content, and the free shipping notification. See the article Blum Cart template for every setting.

Search

Setting	What it does
Enable Quick search	Opens search in a quick search panel. Turn it off to send customers to the Search page instead.
Searchable fields	Not a setting. You choose what search results include in the Shopify Search & Discovery app.

See the article Blum Search Result template & Quick Search for the search settings.

Product information

Setting	What it does
Low stock threshold	Shows the stock status in orange (low stock) instead of green when a variant's stock is at or below this number, from 0 to 10. Set it to 0 to turn this off.
New in date limit	Gives the New in badge to products published within this many days, from 0 to 10. At 0, no product gets the New in badge.
Product rating app	Selects your review app: Judge.me, Air Reviews, Loox, Okendo, or Other apps. Other apps may need extra setup from the app developer.
Variant option	The option name to show as swatches, for example color. Only one option can show as swatches.
Configuration	Sets custom swatch colors or images, one rule per line, in the format Value: #hex color or Value: file name.
Product variations metafield	The namespace and key of the metafield that links product variations, for example custom.color. See the article Blum How To Setup Product Siblings.
Variation selector style	Shows product variations as Product images, Color, or Buttons.
Sale badge text	Sets the text color of the Sale badge.
Sale badge background	Sets the background color of the Sale badge.
Sold out badge text	Sets the text color of the Sold out badge.
Sold out badge background	Sets the background color of the Sold out badge.
New in badge text	Sets the text color of the New in badge.
New in badge background	Sets the background color of the New in badge.

Pre-order

These settings are under Product information.

Setting	What it does
Enable pre-order	Turns pre-order on: No, Yes, for products in scope, or Only when out of stock.
Products	Limits pre-order to these products. Leave Products and Collections empty to apply pre-order to all products. If you select both, a product must match both.
Collections	Limits pre-order to products in these collections.
Button label	The text of the pre-order button. If empty, "Pre-order" is used. Appears when pre-order is on.
Cart message	Shows on pre-order items in the cart and the cart drawer. If empty, "Ships in 2 weeks" is used. Appears when pre-order is on.
Show pre-order badge on product cards	Shows a pre-order badge on product cards instead of the Sold out badge. Appears when pre-order is on.
Badge background	Sets the pre-order badge background. Appears when the pre-order badge is on.
Badge text	Sets the pre-order badge text color. Appears when the pre-order badge is on.

Product card

Sets the image ratio, second image on hover, vendor, rating, swatches, quick shop, custom badges, and badge position and style. See the article Blum Product Card for every setting.

Collection card

Setting	What it does
Image ratio	Sets the shape of collection images: Square (1:1), Portrait (2:3), Landscape (3:2), or Adapt to image.
Show product count	Shows the number of products in each collection.
Color scheme	Sets the colors of collection cards.
Mask overlay opacity	Darkens the image behind the card text, from 0 % to 90 %.

Article card

Setting	What it does
Show featured image	Shows the blog post's featured image.
Featured image ratio	Sets the shape of the featured image: Square (1:1), Portrait (2:3), Landscape (3:2), or Adapt to image.
Show blog's tags	Shows the blog post's tags.
Show excerpt	Shows the blog post's excerpt. You edit the excerpt in the blog post in your Shopify admin.
Show published date	Shows the date the post was published.
Show author	Shows the author's name.
Show "Read more"	Shows a Read more link to the full post.

Quick shop

Setting	What it does
Color scheme	Sets the colors of the quick shop popup.
Show sale badge	Shows the sale badge next to the price.
Show product quantity	Shows the quantity selector.
Show stock number	Shows the number of items in stock. Without it, customers still see basic stock information.
Show dynamic checkout buttons	Shows buttons such as PayPal or Apple Pay, based on your store's payment methods.
Show tax and shipping policy	Shows the tax and shipping information under the price.
Show product description	Shows the product description in the popup.
Collapsible description	Puts the description in a closed Description panel that customers open with a click. Appears with Show product description.
Media ratio	Sets the shape of the main image: Square (1:1), Portrait (2:3), Landscape (3:2), or Adapt to image.
Thumbnail ratio	Sets the shape of the thumbnails, with the same options.
Media background	Sets the background color behind product media.
Show button on	Shows the quick shop button all the time (Sticky) or on hover (Hover). Touch devices always use Sticky.
Type	Shows the button as Text or Icon. Small screens always show the icon.
Icon size	Sets the icon size, from 16 to 24 px. Appears with Icon.
Label	The button text. Appears with Text.
Style	Uses the Primary or Secondary button colors.
Show rating	Shows the product rating from your rating app.
Star rating	Sets the color of the rating stars. Appears with Show rating.
Selector type	Shows variant options as Button or Dropdown.
Show variant swatches	Shows the swatch option as swatches.
Option name	The label shown above product variations in the popup, for example Color.

Currency

Setting	What it does
Show currency code	Shows the currency code with prices across the store, for example $1.00 USD. Cart and checkout prices always show the code.

Email address and phone number

Setting	What it does
Email address	Your store email. Shows in the footer, the menu drawer, and the password page.
Phone number	Your store phone number. Shows in the same places. Customers can tap it to call.

Setting	What it does
Facebook, X / Twitter, Instagram, LINE, YouTube, Vimeo, Pinterest, LinkedIn, TikTok, Tumblr, Snapchat	The link to your page on each network. Sections that show social icons, such as the footer, show an icon for each link you enter. Leave a field empty to hide that icon.

Favicon

Setting	What it does
Favicon image	The small icon in the browser tab. It's scaled down to 32 x 32 px.

Troubleshooting

No product has the New in badge.
New in date limit is set to 0, or your products were published longer ago than the limit. Set a number of days from 1 to 10, and check Show new in badge in Product card.

My swatch image doesn't show.
Upload the image in Content > Files, and enter only its file name in Configuration, for example Plastic: plastic.png. The value before the colon must match the option value.

The pre-order button doesn't show on an out-of-stock product.
With Only when out of stock, the variant must have tracked inventory and Continue selling when out of stock turned on in your Shopify admin. Also check that the product is in the selected Products or Collections.

My store shows right to left in English.
Languages support RTL is empty, so right-to-left applies to all languages. Enter the codes of your right-to-left languages, for example ar,he.

The quick shop button doesn't show.
Check Enable quick shop in Theme settings > Product card.

Updated on: 26/10/2026

Was this article helpful?

Thank you!