Blum theme
Search…
⌃K

Theme settings

In this knowledge base article, you will know how to set up the Theme settings in Blum theme. As you can see, you can customize theme by clicking on second icon on the menu bar and set up for these part:

Colors

Blum theme supports 2 color schemes for Text and Background:
  • Main Accent Text
  • Main Accent Background
  • Extra Accent Text
  • Extra Accent Background
You can check this manual for more details.

Typography

To change Typography, we can go to Theme settings > Typography, where you can universally change the font family of headings and body texts, as well as font scale level. You can check this manual for more details.

Appearance

In this section, you can enable or disable to show background grid lines
Overlay opacity apply for every section which contains content inside the image: For example: Slideshow, Content collage, Featured product list, Image card, ....
Overlay opacity can be adjusted with min: 0%, max: 90%
There are 2 styles of subheading styles:
  • Badge
  • Normal
Subheading Accent Scheme can be switched between 2 values:
  • Main accent
  • Extra accent
For Image cards, you can enable the option to use text color as set in Typography for image card’s content. If the option is unselected, the text in card's content will be in inverted color.

Cart

Cart is classified into 2 types:
  • Drawer
  • Page
By default, cart type is set at Drawer.
You can select details to be displayed with the cart, including:
  • Show product vendor
  • Enable order notes
  • Enable dynamic checkout button
  • Show tax and shipping information
  • Show free shipping notification: Encourage customers add more to cart to earn free shipping
You can also set up Minimum Order Price For Free Shipping by entering the minimum number based on the order price that matches your free shipping rate. If both options “Show free shipping notification” and “Minimum order price for free shipping” are set, the Free shipping notification will be shown as below
You can click on the dropdown menu to select the result displaying:
  • Products only
  • Products and pages
  • Products and blog posts
  • Products, pages and blog posts
By default, the search result will display Products, pages and blog posts.

Product Information

It can be displayed from 0 to 10 low stock threshold and the default is 5. Blum supports variant options that display as swatches. You can choose to Enable variant swatches to display.

Variant swatches mechanism

By default, Blum theme supports color swatches for you with basic color. Data of color will be collected from option ‘Color’ or ‘Colour’. If it can not collect data because option name is not Color or Colour, it will display as a label. If data contains color which theme doesn’t support it will display as a label.

Variant swatches rules

You can be able to custom color or other options for your store. You can enter variant name with variant.png or HEX code into field Variant swatches rules. If it matches with an existing variant from your store, this variant will be set custom value.

Product Card

Blum theme comes with three different product image ratio for you:
  • Square
  • Portrait (2:3)
  • Landscape (3:2)
  • Adapt to image
By default, product image will be set as Portrait (2:3)
Along with that, you can enable or disable the options to display including:
  • Resize image to fit its container
  • Show second image on hover: Hover on product image to show second image. If that product does not have image, it will automatically display placeholder.
  • Show vendor
  • Show product rating: Note that to display a rating, you must add a product rating app first. You can check more details here
  • Show color swatches: Note that it only shows if variant swatches is enabled
  • Show Sale badge
  • Enable quick shop: quick shop content will appear.

Collection Card

Blum theme brings 2 collection image ratios are:
  • Square
  • Portrait
You are also able to enable or disable show product count here.

Article Card

At this point, you can enable to show featured image. Then simply select featured image ratio in the dropdown menu:
  • Square
  • Portrait (2:3)
  • Landscape (3:2)
  • Adapt to image
By default, Feature image ratio will be in Landscape type (3:2)
You can also be able to select these information:
  • Show blog’s tag: show only 1 first blog post’s tag, click on the tag to show other blogs have the same tag.
  • Show excerpt: change excerpts by editing your blog posts. You can see more details here
  • Show published date
  • Show author
  • Show “Read more”

Quick Shop

In this section, you can select these information:
  • Show Sale badge
  • Show product quantity
  • Show stock number (Basic stock information still shows without stock number)
  • Show dynamic checkout buttons: Using the payment methods available on your store, customers see their preferred option, like PayPal or Apple Pay. More details here
  • Show shipping policy
Once you have configured all the settings in this section, you will see a popup similar to this when clicking on Quick shop.

Currency

Note that cart and checkout prices always show currency codes, Example: $1.00 USD. This part lets you enable to show currency code on product card, product details, etc. And if you disable this currency codes, it will just show on cart and checkout prices.
This section lets you enable or disable to show breadcrumb. You can see more details about breadcrumb here.

Contact Information

This is where you will need to enter email address and phone number on the field to set up your personal store

Social Media

Blum theme allows you to connect with most of social media, including:
  • Facebook
  • Twitter
  • Instagram
  • YouTube
  • Vimeo
  • Pinterest
  • LinkedIn
  • TikTok
  • Tumblr
  • Snapchat
You can freely add or remove any social media by connecting with its URL account.

Favicon

To add your favicon image, click the Select image button. The media manager will open up. There, drag and drop your logo, or select it if it is already uploaded. (Note that 64 x 64px .png is recommended).

Maximum Items To Show

You can change the number of total items showing by changing the value at the Maximum Items To Show slider. The value will range from 0 to 48, with value step being 4 items, and show 12 items by default.
To optimize the display of items list on all screen sizes, the Maximum Items To Show will be
  • The same on mobile, tablet portrait, large desktop screen
  • Different on desktop regular screen and tablet landscape
Specific as follows
Due to the difference, some products may show on mobile, tablet portrait, and large desktop screen, but does not show on desktop regular screen and tablet landscape.
The reason for this difference is, to fit the screen size of each device, the number of Items Per Row will be different, which is:
  • On mobile view: 1 - 2 items per row
  • On tablet and laptop: 3 items per row
  • On large-screen devices: 4 items per row
Based on this:
  • If Maximum Items To Show value is equal or bigger than number of your created items, all your items will be displayed. Note that Number Of Items To Show may vary among different screen size, based on the table above. This makes some items can show on some screen, but will be hidden on others screen size.
  • If Maximum Items To Show is smaller than number of your created items, exceeded created items will be hidden to be equal to Maximum Items To Show value.
  • If Maximum Items To Show is 0, all created items will be displayed