Skip to main content

Theme settings

  • Updated

Overview

You can use theme settings to customize the colors and typography on your online store. You can also set up links to your social media accounts, edit your cart settings, and add a favicon.

Color

Chord features expansive controls for the Colors used throughout the theme. Divided into common categories, colors can be specified by clicking the color picker beside the color label.

Customize color

Steps:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find chord theme that you want to edit, and then click Customize.
  3. Click Theme settings.
  4. Click colors
  5. To open the color picker, click the color swatch for the content type color you want to change. To set a specific hex color code, click on the text field to enter the color. To set the color to transparent, delete the hex code value from the text field.
  6. Click Save

Settings

Setting Description
Base  
Text Body text color
Background The background color of the body.
Border Border color apply to certain elements containing Form input, widget, drawer, modal, etc
Color schemes  
Background Primary roles are used for key components across the UI, such as the button, prominent buttons, active states, as well as the tint of elevated surfaces.
Text Color on primary color.
Background Secondary roles are used for less prominent components in the UI, such as secondary button.
Text Colors on secondary color.
Background Tertiary roles are used for contrasting accents that can be used to balance primary and secondary colors or bring heightened attention to an element, such as sale price, sale label, favorited icon
Text Colors on tertiary color.

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.

It's recommended that you use system fonts in your store. Using system fonts avoids downloading new fonts to your customer's computer, which can negatively impact your store load speed. The font that displays on your customer's computer depends on their operating system.

Customize typography

Steps:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find chord theme that you want to edit, and then click Customize.
  3. Click Theme settings.
  4. Click Typography.
  5. For each type of text, click Change to use the font picker.
  6. Explore available fonts with the search field or by clicking Load more.
  7. Click the name of the font you want to use, and then click Select.
  8. Click Save

Customize your font sizes

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

Steps:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find chord theme that you want to edit, and then click Customize.
  3. Click Theme settings.
  4. Click Typography.
  5. To change the default font size for displays, use the Font size scale to select the default font size. The minimum font size is 100%, and the maximum font size is 200%. Each increment of the scale increases the font size by 5%. The default setting is 100%.
  6. 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 200%. Each increment of the scale increases the font size by 5%. The default setting is 100%.
  7. 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 200%. Each increment of the scale increases the font size by 5%. The default setting is 100%.
  8. Click Save

Settings

Setting Description
Body text  
Font Body text font
Font size scale The minimum font size is 100%, and the maximum font size is 200%. Each increment of the scale increases the font size by 5%. The default setting is 100%.
Headings  
Font Heading text font
Font size scale The minimum font size is 100%, and the maximum font size is 200%. Each increment of the scale increases the font size by 5%. The default setting is 100%.
Display  
Font Within the settings for the theme's Display font.
Font size scale The minimum font size is 100%, and the maximum font size is 200%. Each increment of the scale increases the font size by 5%. The default setting is 100%.

Product

Setting Description
Enable quick view Check the checkbox to enable product quick view, you can see a search icon on the right top of the product card.
PRODUCT CARD  
Text alignment Aligns the product card text within the block:
  • Left - Aligns the image to the left of the block.
  • Center (default) - Aligns the image to the center of the block.
  • Right - Aligns the image to the right of the block.
Image ratio The image ratio for the section image:
  • Adapt to image - Uses the aspect ratio of the images. This prevents the images from being cropped.
  • 2:3
  • 3:4
  • 1:1
  • 4:3
  • 16:9
  • 21:9
Show secondary image on hover Displays the secondary image when mouse over the image.
Show labels Show product label, like ON SALE, OUT OF SOCKT on the top left side of the card.
Show color swatch Show color swatch for each product card.
Badges  
Corner radius Setting the corner radius to 0px produces square badge edges, and increasing the radius rounds the edges of the badges.

Cart

Chord lets you customize your cart page by selecting the cart type.

The Chord theme supports 2 cart types:

  • Page redirects customers to your cart page when an item is added to the cart.
  • Drawer opens a drawer on the side of the page when items are added to a cart and prompts the user to proceed to the checkout page.

Search

Shopify allows you to search products, pages and articles.

However, by default, the chord are configured to only search through products. You can, however, very easily modify this behavior. To do that, open the Theme Settings, open the >Search section, you will find a setting that allows you to choose how the search should work.

Social media

You can add social sharing buttons for your products and blog posts, and links to your social media accounts.

To add links to your social media accounts, enter the links to your accounts in the fields provided under Social accounts. Enter full links, such as https://instagram.com/shopify, or https://twitter.com/shopify

Favicon

A favicon, or favorites icon, is a small square image or logo that appears next to a web address. You can find favicons on your browser tabs, as well as on browser pages that list web addresses, such as the bookmarks page. You can add a favicon to your online store to help strengthen your brand and to add a polished look to your website.

Create a favicon

You can use a free favicon generator website to create a custom favicon, or you can create your own. To find a favicon generator, search the internet for free favicon generator

Add a favicon to your online store

In the Favicon image area, click Select image, and then do one of the following:

  • To select an image that you have already uploaded to your Shopify admin, click the Library tab.
  • To select an image from your local computer, click the Library tab, and then click Upload.
The recommended size for a favicon is 96 x 96 px. Larger images might be scaled down to 96 x 96 px, depending on your theme.

Checkout

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

Related articles