Help
Log in

Customizing Theme Settings

You can use customize overall settings for your online store, such as typography, colors, social media links, and the cart page, from the Theme Settings section of the sidebar menu of the theme editor. Changes that you make in the Theme Settings section apply to your entire online store.

Sections and blocks also have individual settings that you can adjust to customize individual sections of your theme. Learn more about sections and blocks.

On this page

You can add a logo for your business to your online store. Your logo displays in the following places:

  • your header across all pages
  • your password page

Customize your logo

Logo images have a maximum width of 300 px.

Steps:

Desktop

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme that you want to edit, and then click Edit theme.

  3. Click the Theme settings settings icon.

  4. Click Logo.

  5. In the Logo area, add your image or use a free image:

    • To add your image, click Select image, and then add a new or existing image:
      • To use an image that you've already uploaded to your Shopify admin, select the image and then click Done.
      • To use an image from your local computer, click Add images. Select and add an image, and then click Done.
    • To use a free image, click Explore free images. Find an image, click the image to select it, and then click Select.

  6. Optional: Add alt text to your logo image:

    1. In the Logo area, click Edit.
    2. In the Alt text field, enter a brief description of the image.
    3. Click Save.

  7. Optional: In the Desktop logo width area, use the range slider to adjust the logo pixel width.

  8. Click Save.

Mobile

  1. From the Shopify app, tap the Menu icon.

  2. In the Sales channels section, tap Online Store.

  3. Tap Manage all themes.

  4. Find the theme that you want to edit, and then tap Edit theme.

  5. Tap … or ⋮, and then tap Theme settings.

  6. Tap Logo.

  7. In the Logo area, add your image or use a free image:

    • To add your image, tap Select image, and then add a new or existing image:
      • To use an image that you've already uploaded to your Shopify admin, select the image and then tap Done.
      • To use an image from your local device, tap Add images. Select and add an image from your local device, tap the image to select it, and then tap Done.
    • To use a free image, tap Explore free images. Find an image, tap the image to select it, and then tap Done.

  8. Optional: Add alt text to your logo image:

    1. In the Logo area, tap Edit.
    2. In the Alt text field, enter a brief description of the image.
    3. Tap Save or ✓.

  9. Optional: In the Desktop logo width area, use the range slider to adjust the logo pixel width.

  10. Tap Save or ✓.

Add a favicon

You can add a favorites icon, or favicon, which you use to help with the branding of your online store. A favicon displays in the following places:

  • your web browser tab
  • your web browser's history
  • icons on your desktop
  • beside your online store name when your website is bookmarked

Learn more about favicons.

Steps:

Desktop

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme that you want to add a favicon for, and then click Edit theme.

  3. Click the Theme settings settings icon.

  4. Depending on your theme version, click Logo or Favicon.

  5. In the Favicon image section, click Select image, and then add a new or existing image:

    • To select an image that you've already uploaded to your Shopify admin, you can search for or find the image, and then select it with the checkbox.
    • To select an image from your local computer, click Add images, open the image from your local computer, and then select it with the checkbox.

  6. Click Done.

  7. Optional: Add alt text to your favicon image:

    1. In the Favicon image section, click Edit.
    2. In the Alt text field, enter a brief description of the image.
    3. Click Save.

  8. Click Save.

Mobile

  1. From the Shopify app, tap the Menu icon.

  2. In the Sales channels section, tap Online Store.

  3. Tap Manage all themes.

  4. Find the theme that you want to add a favicon for, and then tap Edit theme.

  5. Tap … or ⋮, and then tap Theme settings.

  6. Depending on your theme version, tap Logo or Favicon.

  7. In the Favicon image section, tap Select image, and then add a new or existing image:

    • To select an image that you've already uploaded to your Shopify admin, you can search for or find the image, and then select it with the checkbox.
    • To select an image from your local device, tap Add images, open the image from your local device, and then select it with the checkbox.

  8. Tap Done.

  9. Add alt text to your favicon image:

    1. In the Favicon image section, tap Edit.
    2. In the Alt text field, enter a brief description of the image.
    3. Tap Save or ✓.

  10. Tap Save or ✓.

Colors

Your theme's color settings control the colors used across your online store. You can configure your theme's overall colors in the Colors section of your theme settings. Depending on your theme, colors are managed through either of the following color systems: ​

  • Color palettes are available in newer themes such as Horizon 4.0.0 and later. A color palette is a set of named brand colors that applies across your entire theme. Sections and blocks might have a color input field that you can use to override the palette color with a custom color, or change the assigned palette color.
  • Color schemes are available in most themes, such as all free Shopify themes before the release of Horizon 4.0.0. A color scheme is a group of different colors, such as background, text, and button, that you then apply to different sections throughout your online store. You can create multiple colors schemes in your theme settings.

Manage color palettes

A color palette is a quick way to reuse colors across multiple settings in the theme editor. When you change a color from the color palette, all settings that use that color dynamically update to the new color. It also means that you don't need to remember hexadecimal codes when you want to use a color more than one time.

Color palette in the theme editor

Steps:

Desktop

  1. From your Shopify admin, go to Online Store > Themes.

  2. Next to the theme that you want to edit, click Edit theme.

  3. Click the Theme settings icon, and then click Colors.

  4. In the Colors section, click + to select a color to add to the palette.

  5. Optional: To remove a color that you no longer need in your palette:

    1. Click the color and then click Delete color.
    2. Select a replacement color to replace the deleted color wherever it's used in your theme.
    3. Click Confirm.

  6. Click Save.

Mobile

  1. From the Shopify app, tap Menu, and then tap Settings Settings.

  2. In the Sales channels section, tap Online Store.

  3. Tap Manage all themes.

  4. Find the theme that you want to edit, and then tap Edit theme.

  5. Tap … or ⋮, and then tap Theme settings.

  6. Tap Colors.

  7. In the Colors section, tap + to select a color to add to the palette.

  8. Optional: To remove a color that you no longer need in your palette:

    1. Tap the color and then tap Delete color.
    2. Select a replacement color to replace the deleted color wherever it's used in your theme.
    3. Tap Confirm.

  9. Tap Save or ✓.

Manage color schemes

You can create a new color scheme, delete a color scheme, or manage the colors in your color schemes in your theme settings. You can have up to 21 color schemes in the theme editor.

Steps:

  1. From your Shopify admin, go to Online Store > Themes.

  2. Click Edit theme next to the theme that you want to customize.

  3. Click the settings icon, and then click Colors.

  4. In the Schemes section, click an existing scheme or click Add scheme to add a new color scheme.

  5. Click the color swatch for the content type color that you want to change.

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

  7. 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 add a custom font. The fonts available in your theme depend on your theme's developer. All free Shopify themes use fonts from Shopify's font library.

Consider using system fonts on your store, because system fonts are already installed on a user's computer. Using system fonts avoids downloading new fonts to your customer's computer, which can negatively impact your store's loading speed. The font that displays on your customer's computer depends on their operating system.

Customize your font types

Refer to Shopify's font library for a list of available fonts.

Steps:

Desktop

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme that you want to edit, and then click Edit theme.

  3. Click the Theme settings settings icon.

  4. Click Typography.

  5. To change a font type for your store's headings or body text, click Change in the Headings or Body section.

  6. Click the name of the font that you want to use, and then click Select.

  7. Click Save.

Mobile

  1. From the Shopify app, tap the Menu icon.

  2. In the Sales channels section, tap Online Store.

  3. Tap Manage all themes.

  4. Find the theme that you want to edit, and then tap Edit theme.

  5. Tap … or ⋮, and then tap Theme settings.

  6. Tap Typography.

  7. To change a font type for your store's headings or body text, tap Change in the Headings or Body section.

  8. Tap the name of the font that you want to use, and then tap Done.

  9. Tap Save or ✓.

Customize your font sizes

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

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

Steps:

Desktop

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme that you want to edit, and then click Edit theme.

  3. Click the Theme settings settings icon.

  4. Click Typography.

  5. To change the default font size for Headings text, use the Font size scale range slider to select the default font size.

  6. To change the default font size for Body text, use the Font size scale range slider to select the default font size.

  7. Click Save.

Mobile

  1. From the Shopify app, tap the Menu icon.

  2. In the Sales channels section, tap Online Store.

  3. Tap Manage all themes.

  4. Find the theme that you want to edit, and then tap Edit theme.

  5. Tap … or ⋮, and then tap Theme settings.

  6. Tap Typography.

  7. To change the default font size for Headings text, use the Font size scale range slider to select the default font size.

  8. To change the default font size for Body text, use the Font size scale range slider to select the default font size.

  9. Tap Save or ✓.

Layout

You can set the maximum width that your online store will display at, and set the vertical and horizontal space between sections.

Steps:

Desktop

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme that you want to edit, and then click Edit theme.

  3. Click the Theme settings settings icon.

  4. Click Layout.

  5. Use the Page width range slider to choose a page width between 1000 px and 1600 px. The default setting is 1600 px.

  6. Optional: Use the range slider to add vertical Space between template sections on your pages. You can add up to a maximum of 100 px between sections.

  7. Optional: If you have a Grid layout, then use the Horizontal space and Vertical space range sliders to add space between grid content on your pages. Adding horizontal space will add a maximum of 40 px of space to the rows of content on your pages, whereas adding vertical space will add a maximum of 40 px of space to the columns of content on your pages.

  8. Click Save.

Mobile

  1. From the Shopify app, tap the Menu icon.

  2. In the Sales channels section, tap Online Store.

  3. Tap Manage all themes.

  4. Find the theme that you want to edit, and then tap Edit theme.

  5. Tap … or ⋮, and then tap Theme settings.

  6. Tap Layout.

  7. Use the Page width range slider to choose a page width between 1000 px and 1600 px. The default setting is 1600 px.

  8. Optional: Use the range slider to add vertical Space between template sections on your pages. You can add up to a maximum of 100 px between sections.

  9. Optional: If you have a Grid layout, then use the Horizontal space and Vertical space range sliders to add space between grid content on your pages. Adding horizontal space will add a maximum of 40 px of space to the rows of content on your pages, whereas adding vertical space will add a maximum of 40 px of space to the columns of content on your pages.

  10. Tap Save or ✓.

Animations

Animations allow you to add movement and visual interest to your online store. You can activate a fade-in animation that reveals your store's sections on scroll, and a hover effect for your cards and buttons.

Steps:

Desktop

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme that you want to edit, and then click Edit theme.

  3. Click the Theme settings settings icon.

  4. Click Animations.

  5. Optional: To activate an animation that reveals your online store's sections on scroll, select Reveal sections on scroll.

  6. Optional: To add a hover effect animation to your cards and buttons, select one of the following options from the Hover effect setting:

    • Vertical lift: When a customer hovers over a card or button, the element shifts upwards.
    • 3D lift: When a customer hovers over a card or button, the element shifts forward, giving it a 3D effect. This also has a subtle shine that moves across the element, giving it another layer of dimension.

  7. Click Save.

Mobile

  1. From the Shopify app, tap the Menu icon.

  2. In the Sales channels section, tap Online Store.

  3. Tap Manage all themes.

  4. Find the theme that you want to edit, and then tap Edit theme.

  5. Tap … or ⋮, and then tap Theme settings.

  6. Tap Animations.

  7. Optional: To activate an animation that reveals your online store's sections on scroll, select Reveal sections on scroll.

  8. Optional: To add a hover effect animation to your cards and buttons, select one of the following options from the Hover effect setting:

    • Vertical lift: When a customer hovers over a card or button, the element shifts upwards.
    • 3D lift: When a customer hovers over a card or button, the element shifts forward, giving it a 3D effect. This also has a subtle shine that moves across the element, giving it another layer of dimension.

  9. Tap Save or ✓.

Visual elements customization settings

You can adjust the appearance of elements of your theme, such as buttons, product cards, and variants from the Theme settings page. Each option contains the relevant settings for that element.

You can adjust settings for the following elements of your theme:

  • Buttons: Buttons include call to action buttons in sections such as a slideshow or image with text, as well as the buttons in a contact form, on your product pages, and cart pages.
  • Variant pills: Variant pills allow you to display the variants of a product on a product page or a featured product section. Customers can select the desired variant to add the product to their cart without needing to change product pages. You can customize how your variant pills display on your online store.
  • Inputs: Inputs are interactive areas that require customer input, for example, a quantity selector, an email signup form, or cart notes. You can adjust the appearance of your online store inputs.
  • The settings for product cards, collection cards, and blog cards allow you to customize the style of each type of card when they're displayed in page sections.
    • Product cards: Product cards display information about your products in areas of your theme that list multiple products, such as collection templates, collection sections, and search results.
    • Collection cards: Collection cards display information about your collections in areas of your theme that list collections, such as a collection list template or section.
    • Blog cards: Blog cards display information about your blog posts in areas of your theme that list multiple products, such as blog templates, blog sections, and search results.
  • Content containers: Containers are used for the text element of content sections, for example, the text box on a slideshow, on an image banner, or in the columns of multicolumn sections. You can customize the appearance of content containers for your online store.
  • Media: Media is the visual component of sections, for example, product media or an image in the Image with text section. You can add borders and shadows to your media.
  • Dropdowns and pop-ups: You can adjust the appearance of drop-down menus, pop-up modals, and cart pop-ups on your online store.
  • Drawers: Drawers are hidden, interactive containers that display when tapped or clicked, such as a collapsible menus or collection filter options. You can customize the border and shadow of the drawers on your online store.
  • Badges: Sale and Sold out badges are automatically added to your product images when you reduce the price or when the inventory count reaches 0. You can adjust the position, shape, and color of your Sale and Sold out badges individually in your theme settings. Page and Blog badges display in relevant search results. You can customize the position and shape of these badges, but you can't change the color of the Page and Blog badges.
  • Brand information: You can include information about your brand on your online store. When you've completed the following steps, you can then add the Brand information block in your online store's footer.

Steps:

Desktop

  1. From your Shopify admin, go to Online Store > Themes.

  2. Click Edit theme next to the theme that you want to edit.

  3. Click the settings icon.

  4. Click an element to open the settings.

  5. Adjust any of the available settings. You can review the changes by navigating to different areas of your theme in the preview window.

  6. Click Save.

Mobile

  1. From the Shopify app, tap the Menu icon.

  2. In the Sales channels section, tap Online Store.

  3. Tap Edit theme next to the theme that you want to edit.

  4. Tap the settings icon.

  5. Tap an element to open the settings.

  6. Adjust any of the available settings. You can review the changes by navigating to different areas of your theme in the preview window.

  7. Tap Save or ✓.

Social media

You can add links to your social media accounts that display in the footer of your online store.

Steps:

Desktop

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme that you want to edit, and then click Edit theme.

  3. Click the Theme settings settings icon.

  4. Click Social media.

  5. To add links to your social media accounts, enter the website addresses for your accounts in the relevant Social accounts fields. You need to enter full links, such as https://instagram.com/shopify or https://tiktok.com/@shopify.

  6. Click Save.

Mobile

  1. From the Shopify app, tap the Menu icon.

  2. In the Sales channels section, tap Online Store.

  3. Tap Manage all themes.

  4. Find the theme that you want to edit, and then tap Edit theme.

  5. Tap … or ⋮, and then tap Theme settings.

  6. Tap Social media.

  7. To add links to your social media accounts, enter the website addresses for your accounts in the relevant Social accounts fields. You need to enter full links, such as https://instagram.com/shopify or https://tiktok.com/@shopify.

  8. Tap Save or ✓.

Search behavior

Your online store includes predictive search, which displays suggestions when customers start typing into the search field. Search suggestions can help customers articulate and refine their search queries, and provide new ways for them to explore your online store. Search suggestions can also let customers quickly browse matches, without having to leave their current page to view a separate list of search results.

To learn more about how search suggestions work, refer to Predictive search.

You can customize how search suggestions display to your customers.

Steps:

Desktop

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme that you want to edit, and then click Edit theme.

  3. Click the Theme settings settings icon.

  4. Click Search behavior.

  5. To activate or deactivate search suggestions, select or deselect Enable search suggestions.

  6. Optional: To display or hide the product vendor in search suggestions, select or deselect Show product vendor.

  7. Optional: To display or hide the product price in search suggestions, select or deselect Show product price.

  8. Click Save.

Mobile

  1. From the Shopify app, tap the Menu icon.

  2. In the Sales channels section, tap Online Store.

  3. Tap Manage all themes.

  4. Find the theme that you want to edit, and then tap Edit theme.

  5. Tap … or ⋮, and then tap Theme settings.

  6. Tap Search behavior.

  7. To activate or deactivate search suggestions, select or deselect Enable search suggestions.

  8. Optional: To display or hide the product vendor in search suggestions, select or deselect Show product vendor.

  9. Optional: To display or hide the product price in search suggestions, select or deselect Show product price.

  10. Tap Save or ✓.

Currency format

You can choose to have the currency code displayed with prices on your products.

Steps:

Desktop

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme that you want to edit, and then click Edit theme.

  3. Click the Theme settings settings icon.

  4. Click Currency format.

  5. To display currency codes, select Show currency codes.

  6. Click Save.

Mobile

  1. From the Shopify app, tap the Menu icon.

  2. In the Sales channels section, tap Online Store.

  3. Tap Manage all themes.

  4. Find the theme that you want to edit, and then tap Edit theme.

  5. Tap … or ⋮, and then tap Theme settings.

  6. Tap Currency format.

  7. To display currency codes, select Show currency codes.

  8. Tap Save or ✓.

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 be displayed as a drawer, a page, or a pop-up notification. To keep the customer on the product page, use the drawer or pop-up notification option. To take the customer to the cart page, use the page option. When the customer's cart is empty, you can display a featured collection in the cart drawer.

Steps:

Desktop

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme that you want to edit, and then click Edit theme.

  3. Click the Theme settings settings icon.

  4. Click Cart.

  5. Use the Cart type drop-down menu to select the Drawer, Page, or Popup notification cart style.

  6. Optional: To display the vendors of the items in a customer's cart, select Show vendor.

  7. Optional: To provide customers with a text box where they can enter special requests or add extra order information, select Enable cart note.

  8. Optional: If you select Drawer as your Cart type, then you can display a collection in the cart drawer when it's empty:

    1. In the Cart drawer area, click Select collection.
    2. Click the name of the collection that you want to display, and then click Select.

  9. Optional: If you select Drawer as your Cart type, then you can change the color scheme of your cart drawer by taking the following steps:

    1. In the Cart drawer > Color scheme area, click Change.
    2. Select a color scheme that you want to use for your cart drawer.

  10. Click Save.

Mobile

  1. From the Shopify app, tap the Menu icon.

  2. In the Sales channels section, tap Online Store.

  3. Tap Manage all themes.

  4. Find the theme that you want to edit, and then tap Edit theme.

  5. Tap … or ⋮, and then tap Theme settings.

  6. Tap Cart.

  7. Select your Cart type from the Drawer, Page, or Popup notification options.

  8. Optional: To display the vendors of the items in a customer's cart, select Show vendor.

  9. Optional: To provide customers with a text box where they can enter special requests or add extra order information, select Enable cart note.

  10. Optional: If you select Drawer as your Cart type, then you can display a collection in the cart drawer when it's empty:

    1. In the Cart drawer area, tap Select collection.
    2. Tap the name of the collection that you want to display, and then tap Done.

  11. Optional: If you select Drawer as your Cart type, then you can change the color scheme of your cart drawer by taking the following steps:

    1. In the Cart drawer > Color scheme area, tap Change.
    2. Select a color scheme that you want to use for your cart drawer, and then tap Done.

  12. Tap Save or ✓.

Custom CSS

The Custom CSS section allows you to enter your own CSS code, for example to customize the appearance of your online store's buttons beyond the default settings that are available, or to apply unique styling to specific text elements.

Custom CSS in your theme settings affects all pages in your online store, except your checkout.

Learn more about Adding custom CSS to your theme.

Theme style

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. The other theme style options that you have depend on which theme you use.

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.

Steps:

Desktop

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme that you want to edit, and then click Edit theme.

  3. Click the Theme settings settings icon.

  4. Click Theme style.

  5. Select the theme style that you want to use, and then click Change style.

  6. Click Save.

Mobile

  1. From the Shopify app, tap the Menu icon.

  2. In the Sales channels section, tap Online Store.

  3. Tap Manage all themes.

  4. Find the theme that you want to edit, and then tap Edit theme.

  5. Tap … or ⋮, and then tap Theme settings.

  6. Tap Theme style.

  7. Select the theme style that you want to use, and then tap Done.

  8. Tap Save or ✓.