Open Theme settings

From your Shopify admin, go to Online Store > Themes.
Click Customize next to the theme that you want to customize.
Click the paint brush icon.

Colors

You can create up to 21 unique color schemes and apply them to different sections throughout your online store. Learn more about color options, color schemes, and color gradients.

Customize your color settings

From Theme settings, Click Colors
In the Color scheme of body select box, pick a color scheme that has been applied as primary color scheme in the theme.
In the Schemes section, click an existing scheme or click Add scheme to add a new color scheme.
Click the color swatch for the content type color that you want to change.
To set your color, enter a hex color code or choose the color from the color picker. To set the color to transparent, delete the hex code from the text field.
Click Save.

Typography

You can set the font style and size for the text on your online store. You can choose a system font or a custom font.

A. Customize your typography settings

From Theme settings, Click Typography.
For each type of text, click Change to use the font picker.
Explore available fonts with the search field or by clicking Load more.
Click the name of the font you want to use, and then click Select.
Click Save.

B. Customize your font sizes

You can set the default font sizes for your heading and body text within the Typography theme setting.

From Theme settings, Click Typography.
To change the default font size for headings, use the Font size scale to select the default font size. The minimum font size is 100%, and the maximum font size is 150%. Each increment of the scale increases the font size by 5%. The default setting is 100%.
To change the default font size for body text, use the Font size scale to select the default font size. The minimum font size is 100%, and the maximum font size is 130%. Each increment of the scale increases the font size by 5%. The default setting is 100%.
Click Save.

C. Customize button font type

You can set the font for your buttons.

From Theme settings, Click Typography.
Use the Font type to specify the heading or body font that will be applied for buttons.
Click Save.

Layout

Layout allows you to set the maximum width that your online store will display in.

From Theme settings, Click Layout.
Use the range slider to choose between a page width of 1000px or 1600px. The default setting is 1600px.
[Optional] Add vertical space between sections with the range slider. You can add a maximum of 100px between sections.
[Optional] If you have a Grid layout, use the Horizontal space and Vertical space range slider to add space between grid content. Adding horizontal space will add a maximum of 40px of space to your rows, whereas adding vertical space will add a maximum of 40px of space to your columns.
Click Save.

Product rating data

Allows you to choose the Product rating Shopify app or metafields that your online store will display in.

From Theme settings, Click Product rating data.
Choose the "Read rating data from app" in the selecbox. The default setting is Standard metafield.
If you choose "Standard metafields", the theme will display ratings based on metafield definitions for "reviews.rating_count" and "reviews.rating".
Click Save.

Page heading banner

Configure the color and size of the page title, and upload the background image on collection pages, blog posts, and other pages (excluding the homepage and product page ).

From Theme settings, Click Page heading banner.
Use the Heading alignment select box to align text in the page title.
Use the Heading size select box to adjust the font size of the text.
Use the Color scheme picker to pick a color scheme.
Use the Color text on banner image to pick a color to be applied when the text is overlaid on the background image.

Setting	Description
Collection page
Banner image	Pick or upload an image that has been displayed as the top banner on the collection page.
Use collection image	Tick this checkbox to display the collection's featured image instead of the above image. If a collection has not the featured image, the above image will be displayed.
Image height	Adjust the height of the image.
Blog posts and article pages
Banner image	Pick or upload an image that has been displayed as the top banner on the blog and article pages.
Image height	Adjust the height of the image.
Other pages
Banner image	Pick or upload an image that has been displayed as the top banner on the remaining pages.
Image height	Adjust the height of the image.

Breadcrumbs

From Theme settings, Click Breadcrumbs.
Use the checkbox to show/hide the breadcrumbs.
Click Save.

Color swatches

When the product's options are displayed as pills, you can specify which option will be displayed as color swatches.

From Theme settings, Click Color swatches.
Use the Name of color option field to add the name of the option you want to display as color swatches.
Use the Color swatches shape select box to choose the shape that color swatches display.
Click Save.

Cards

Cards are compartmentalized areas in sections that allow you to display multiple items, for example, product cards, and collection cards. You can customize the border, color, and alignment of your section cards.

Customize cards

From Theme settings:

Click Product cards to customize product items in a grid or slider.
Click Collection cards to customize collection items in a grid or slider.

Product cards

Setting	Description
Heading font-weight	Adjust the font weight of the product title. Three options: Thin, Semi bold, Bold. Note: Only works well when font thickness is generated automatically.
Text alignment	Align the card content in left, center, or right.
Show product card border	Enable/disable the border.
Border radius	Adjust the border-radius. If the border is turned off, this setting will be applied to product images.
Shadow opacity	Adjust the opacity of the box shadow.
Buttons	Specify the way to show add to cart and compare buttons. Two options: Always visible or Visible on hover. Note: buttons are always visible on devices that do not support mouse hover.
Cart button text	Specify the way to show the text or icons in the Add to cart button. Two options: Always visible: the text is always shown. Adapt: the theme will display text or icons based on the width of areas that display product cards.
Shorten heading
Number of truncated lines	If your product titles are long, use this setting to display them in the specified number of lines. Leave zero to display titles in full.

Collection cards

You can turn on/off the card overlay and choose the color scheme for collection cards.

Badges

Sale and Sold out badges are automatically added to your product images when the price drops, or when the inventory count reaches 0. You can adjust the color of your badges. In addition, you can also create custom badges by using product metafields. Learn more about metafields.

From Theme settings, Click Badges.
Pick text and background colors for your badges.
Click Save.

For the Sale badge, you can specify the format to show it. Example: only show the text, percentage, or discount amount.

You can add social sharing buttons for your products and blog posts, and links to your social media accounts. Links to your social media accounts show in the footer of your online store.

From Theme settings, Click Social media.
To add links to your social media accounts, enter the links to your accounts in the fields provided under Accounts. Enter full links, such as https://www.instagram.com/boosthemeteam, or https://twitter.com/boostheme.
Click Save.

Search behavior

Online Store includes predictive search, which shows products, articles, pages, or collection suggestions when customers start typing into the search field. Search results suggestions can help customers articulate and refine their search queries, and provide new ways for them to explore an online store. They can also let customers quickly browse matches without having to leave their current page to see a separate list of search results.

Turn on/off this feature:

From Theme settings, Click Search behavior.
Use the Enable search suggestions checkbox to turn this feature on/off.
Use the color scheme picker to select a Color scheme for the search suggestion section.
Click Save.

Animations

When an image appears in the user's viewport, the animation will be played to show the image. You can turn this feature on/off by yourself.

From Theme settings, Click Animations.
Use the checkbox to turn this feature on/off.
Click Save.

Favicon

You can add a favorites icon, or a favicon, which can help to brand your online store. A favicon shows in the following places:

your web browser tab
your web browser's history
icons on your desktop
besides your online store name when it is bookmarked

Learn more about favicons.

Tip
The recommended size for a favicon is 32 x 32 px. Larger images might be scaled down to 32 x 32 px.

Customize your favicon

From Theme settings, Click Favicon.
In the Favicon image area, click Select image, and then do one of the following:
- To use an image that you have already uploaded to your Shopify admin, click on an image to select it and click Select.
- To use an image from your local computer, click Upload. Choose an image from your computer and click Open to start the upload. It will be automatically selected when the upload is finished. Click Select.
- To select a free image, click Free images and search for or click an image to select it.
Add alt text to your favicon image:
1. Click Edit alt text.
2. In the Edit image window, enter a brief description of the image.
3. Click Save.

Currency format

You can choose to have product, cart, and checkout prices always show currency codes.

From Theme settings, Click Currency format.
To enable currency codes, click the Show currency codes checkbox.
Click Save.

Collections list page

This page is located at the/collectionsURL of the store. And you can set meta title and meta description for this page.

From Theme settings, Click the Collections list page.
Use text fields to enter your meta title and description.
Click Save.

Cart

You can change the style of the cart on your online store. When a customer adds a product from your store to their cart, the cart can appear as a drawer, a page, or a pop-up notification. When the customer's cart is empty, you can display a list of collections in the cart drawer.

From Theme settings, Click the Cart.
Use the drop-down menu to select a cart style: drawer, page, popup notification.
Use the checkbox to enable the free shipping bar. The free shipping bar is displayed in the cart drawer, product page, quick view popup, featured product section, and cart page.
Use the Free shipping minimum amount field to add the amount that customers will get free shipping cost.
Use the Free shipping unreached message field to add the message you want to show when customers do reach the free shipping amount yet.
Use the Free shipping reached message field to add the message you want to show when customers reach the free shipping amount.
Click Save.

If you have the cart type set to Drawer, then you can display a list of collections in the cart drawer. The selected collections only appear when the cart is empty.

You can add a list of collections to the empty cart drawer by customizing the Cart drawer section.

Floating toolbar

Configure to show/hide the back-to-top button.

Customize back-to-top button

From Theme settings, Click the Floating toolbar.
In the Back to top button part, use the checkbox to show/hide this feature.
Click Save.

Product compare

From Theme settings, Click the Product compare.
Use the sliding scales to change the low inventory threshold. This threshold will help to determine whether a product is in stock or low stock.
Use the checkbox to show/hide the inventory count.
Click Save.

You can configure the Product compare popup here.

Maps

Configure the Google Maps API key that has been used in the Maps section.

From Theme settings, Click Maps.
Add your Google Maps API key in the text box. Learn how to get the API key.
Click Save.

Checkout

This section lets you customize your store's checkout. Refer to Shopify checkout for more information about your store's checkout page.

Change theme styles

A theme style is a collection of settings chosen by a theme designer. You can apply a theme style to your store to give it a polished look and feel. All themes have a theme style applied by default. When you customize a theme, you replace the theme style settings with your own. When you apply a theme style to your theme, you change your current settings, such as colors and typography.

From Theme settings, Click Theme style.
Using the dropdown menus, select your theme style options. The available options available depend on which theme you use.
Click Save.