Chord Theme Settings
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:- From your Shopify admin, go to Online Store > Themes.
- Find chord theme that you want to edit, and then click Customize.
- Click Theme settings.
- Click colors
- 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.
- 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:- From your Shopify admin, go to Online Store > Themes.
- Find chord theme that you want to edit, and then click Customize.
- Click 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
Customize your font sizes
You can set the default font sizes for your heading and body text within the Typography theme setting.
Steps:- From your Shopify admin, go to Online Store > Themes.
- Find chord theme that you want to edit, and then click Customize.
- Click Theme settings.
- Click Typography.
- 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%.
- 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%.
- 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%.
- 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:
|
Image ratio | The image ratio for the section image:
|
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.