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:

ColorsClick to copy 2222

Blum theme supports 2 color schemes for Text and Background:

  • Main Accent Text
  • Main Accent Background
  • Extra Accent Text
  • Extra Accent Background

TypographyClick to copy 2222

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.

typography blum

AppearanceClick to copy 2222

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, ….

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.

You can also freely enable or disable parallax scroll at Animation option. When enabled, the prominent badge will scroll with the page content. When disabled, the prominent badge will stop scrolling along, but will keep rotating as usual.

CartClick to copy 2222

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 bar will be shown as bellow:

  • On notification message

  • On Cart Drawer

  • On Cart page

By default, Free shipping amount will display currency based on your settings inside Shopify dashboard > Settings > Store details > Store currency.

In case the currency is changed, the value of Free shipping amount will also be automatically exchanged based on Shopify mechanism. The live exchange rates will be applied.

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.

search blum

Product InformationClick to copy 2222

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 mechanismClick to copy 2222

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 rulesClick to copy 2222

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

variant rules

If you want to use image for variant swatches, you will need to upload the image png file onto the Shopify Files. Blum theme supports for PNG and JPG file.

variant rules blum

Then enter the Name of the variant with the Image-name.png or Image-name.jpg. For example, I have uploaded the image file name ” prd-img ” and want to add it for the “Black” color so I need to add in the Variant swatches rules: ” Black: prd-img.png ”

Check the video tutorial below to learn more about the way to set up Color Swatches in Electro theme:

Product CardClick to copy 2222

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.

product card

Collection CardClick to copy 2222

Blum theme brings 4 collection image ratios are:

  • Square
  • Portrait (2:3)
  • Landscape (3:2)
  • Adapt to image

Along with Image ratio, you can select the Overlay Opacity for the Collection card. Overlay opacity can be adjusted with min: 0%, max: 90%.

The Show product count option is turned off by default but you can simply put a tick on this option to turn it on.

Article CardClick to copy 2222

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 ShopClick to copy 2222

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 tax and 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.

CurrencyClick to copy 2222

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.

Email address and Phone numberClick to copy 2222

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

Social MediaClick to copy 2222

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

FaviconClick to copy 2222

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).

Navigate this category