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

Mandolin features expansive controls for the Colors used throughout the theme. 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 mandolin 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
Theme	Theme color
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

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

Cart

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

The Mandolin 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 Mandolin 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.