> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/ts1_1wtojxd.png)

**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
1. In the theme editor, click the **Theme settings** icon in the left sidebar.
2. Click a category, for example **Colors** or **Cart**.
3. Change the settings. The preview updates as you go.
4. 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.

1. In the theme editor, click **Theme settings** > **Colors**.
2. Click a scheme to edit it, or click **Add scheme** to create a new one.
3. Set the **General**, **Primary button**, **Secondary button**, **Subheading badge**, and **Accent** colors.
4. Click **Save**.
5. 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
1. In the theme editor, click **Theme settings** > **Appearance**.
2. Under **Spacing**, choose a **Spacing scale**. Optional: check **Enable content max-width** and set **Content max-width**.
3. Under **Components**, choose the **Subheading style** and the shape of **Common components** (Rounded or Sharp).
4. Under **Animation** and **Link**, turn the effects on or off.
5. Click **Save**.

## Set up stock, rating, swatches, and badge colors
1. In the theme editor, click **Theme settings** > **Product information**.
2. Under **Stock status**, set **Low stock threshold** and **New in date limit**.
3. Under **Rating**, select your **Product rating app**.
4. Under **Variant swatches**, enter the **Variant option** and the **Configuration** rules.
5. Under **Badge color**, set the colors of the Sale, Sold out, and New in badges.
6. 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.

1. In the theme editor, click **Theme settings** > **Product information**.
2. Under **Pre-order**, choose when it applies in **Enable pre-order**: **Yes, for products in scope** or **Only when out of stock**.
3. Optional: select **Products** and/or **Collections** to limit pre-order to them. Leave both empty to apply it to all products.
4. Optional: change the **Button label** and the **Cart message**.
5. Optional: check **Show pre-order badge on product cards** and set the badge colors.
6. 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](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/ts2_lku88i.png)

## 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](https://doc.ecomx.co/en/article/blum-typography-1pwfswy/) 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](https://doc.ecomx.co/en/article/blum-cart-template-1egjtoq/) 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](https://doc.ecomx.co/en/article/blum-search-result-template-quick-search-g08dso/) 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](https://doc.ecomx.co/en/article/blum-product-card-okpp7q/) 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. |

### Social media
| 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**.

## Related articles
- [Blum Typography](https://doc.ecomx.co/en/article/blum-typography-1pwfswy/)
- [Blum Product Card](https://doc.ecomx.co/en/article/blum-product-card-okpp7q/)
- [Blum Cart template](https://doc.ecomx.co/en/article/blum-cart-template-1egjtoq/)
- [Blum How To Setup Product Siblings](https://doc.ecomx.co/en/article/blum-how-to-setup-product-siblings-ee16j2/)
- [Blum Theme Styles/Presets](https://doc.ecomx.co/en/article/blum-theme-stylespresets-kst5jz/)