Theme settings

You can use theme settings to make changes to your online store's typography, colors, social media links, and checkout settings. When you make changes to your theme settings, the changes apply to your entire online store.

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

  • your header across all pages
  • your password page

Logo images have a maximum width of 300 px.

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Click Theme settings.
  4. Click Logo.
  5. In the Logo 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 an image to select it and then 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.
  6. Add alt text to your logo image:
    1. Click Edit alt text.
    2. In the Edit image window, enter a brief description of the image.
    3. Click Save.

Customize your logo width

  1. Click Theme settings.
  2. Click Logo.
  3. In the Desktop logo width area, toggle the slider to the pixel width you want.

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
  • beside your online store name when it's bookmarked

Learn more about favicons.

Customize your favicon

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Click Theme settings.
  4. Click Logo.
  5. 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 an image to select it and then 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.
  6. 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.

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

  1. From your Shopify admin, go to Online Store > Themes.
  2. Click Customize next to the theme that you want to customize.
  3. Click Theme settings, 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 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 your typography settings

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the 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 the theme that you want to edit, and then click Customize.
  3. Click Theme settings > Typography.
  4. 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%.
  5. 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%.
  6. Click Save.

Layout

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

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Click Theme settings > Layout.
  4. Use range slider to choose between a page width of 1000px or 1600px. The default setting is 1600px.
  5. Optional: Add vertical space between sections with the range slider. You can add a maximum of 100px between sections.
  6. Optional: If you have a Grid layout, then 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.
  7. Click Save.

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:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Click Customize next to the theme that you want to customize.
  3. Click Theme settings, and then click Animations.
  4. Optional: To activate an animation that reveals your online store's sections on scroll, select Reveal sections on scroll.
  5. Optional: To add a hover effect animation to your cards and buttons, choose 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.
  6. Click Save.

Borders and shadows

You can adjust the borders and shadows of some interactive content types, such as drawers, buttons, variants, or quantity inputs.

Customizable options for borders are:

  • Thickness, which changes the outline of the item.
  • Opacity, which sets the visibility of the item outline.
  • Corner radius, which rounds the corners of your items.

Options for shadows are:

  • Opacity changes the visibility of the item's shadow. A shadow opacity of 0% removes the item shadow entirely.
  • The Horizontal or Vertical offset range sliders move the location of the shadow around the item.
  • Use the Blur range slider to change the opacity of the item's shadow.

Buttons

You can customize the settings for call to action buttons on your online store by adding shadows, changing the spacing or opacity, and adjusting the shape of your buttons.

Sample online store with call to action button

Customize buttons

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Click Theme settings.
  4. Click Buttons.
  5. Use the sliding scales to change the appearance of your button Border.
  6. Use the sliding scales to change the button Shadow. Setting the shadow opacity to 0% removes the shadow.
  7. Click Save.

Variant options with swatches

Sample online store with selectable swatch options

Swatches are a visual representation of product variants. To display swatches, you need the latest version of Dawn and category metafields connected to your variants. With Dawn, variant options can be displayed either in a dropdown or as a swatch. If you're displaying variant options as a swatch, then you can choose to have these swatches displayed as a circle, swatch, or none, which displays the option value as text.

Sample dawn settings for swatches

Set up swatches with category metafields

  1. From your Shopify admin, go to Products.
  2. Click a product.
  3. In the Product organization section, enter your product’s category in the Product category field, and then select the most accurate result from the Product category list. The product category must include a Color category metafield.
  4. In the Variants section, click Add options like size or color.
  5. Click Color.
  6. Click the Add color field and select any default color entries from the drop-down menu.
  7. To add a custom color entry:
    1. Click Add color, and then click Add new entry.
    2. On the Add entry page, fill in the Label and Color fields.
    3. If you want a pattern instead of a color, then fill in the Image field. If you add both a color and image, then the image will be used for the swatch.
    4. Select a Base color and Base pattern.
    5. Click Save.
  8. Click Save to save your product.

Customize swatches in Dawn

  1. From your Shopify admin, go to Online Store > Themes.
  2. Make sure you have the latest version of Dawn installed, then click Customize.
  3. Navigate to the product you added color options to.
  4. Optional: To customize swatches, click the Variant picker block. You can change the display of the swatches by choosing between Circle, Square, or None.
  5. Click Save to save the theme.

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.

Sample online store with selectable variant pills

Customize variant pills

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Click Theme settings.
  4. Click Variant pills.
  5. Use the sliding scales to change the appearance of your variant pill Border.
  6. Use the sliding scales to change the variant pill Shadow. Setting the shadow opacity to 0% removes the shadow.
  7. Click Save.

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 in theme settings.

Sample online store with quantity input

Customize inputs

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Click Theme settings.
  4. Click Inputs.
  5. Use the sliding scales to change the appearance of your input Border.
  6. Use the sliding scales to change the input Shadow. Setting the shadow opacity to 0% removes the shadow.
  7. Click Save.

Cards

Product cards, collection cards, and blog cards settings allow you to customize the style of each type of separate area which are displayed in sections. You can change the color, alignment, image padding, borders, and shadows of these three types of section cards.

Customize cards

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Click Theme settings.
  4. Click Product Cards, Collection Cards, or Blog Cards.
  5. Use the drop-down menu to choose a card Style.
  6. Add Image padding with the sliding scale. This adds space around your card images.
  7. Use the drop-down menu to set the Text alignment for your cards. Choose between left, center (default), or right.
  8. Use the drop-down menu to select a Color scheme for your cards.
  9. Use the sliding scales to change the appearance of your card Border.
  10. Use the sliding scales to change the card Shadow. Setting the shadow opacity to 0% removes the shadow.
  11. Click Save.

Content containers

Containers are the text portion of content sections, for example, the text box on a slideshow, an image banner, or the columns in multicolumn sections. You can customize the appearance of content containers for your online store.

Customize content containers

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Click Theme settings.
  4. Click Content containers.
  5. Use the sliding scales to change the appearance of your content container Border.
  6. Use the sliding scales to change the content container Shadow. Setting the shadow opacity to 0% removes the shadow.
  7. Click Save.

Media

Media is the visual component of sections, for example, product media or the image in Image with Text sections. You can add borders and shadows to your media.

Customize media

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Click Theme settings.
  4. Click Media.
  5. Use the sliding scales to change the appearance of your media Border.
  6. Use the sliding scales to change the media Shadow. Setting the shadow opacity to 0% removes the shadow.
  7. Click Save.

Adjust the appearance of navigation drop-downs, pop-up modals, and cart pop-ups.

Customize drop-downs and pop-ups

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Click Theme settings.
  4. Click Dropdowns and pop-ups.
  5. Use the sliding scales to change the appearance of your Border.
  6. Use the sliding scales to change the Shadow. Setting the shadow opacity to 0% removes the shadow.
  7. Click Save.

Drawers

Drawers are hidden, interactive containers that appear and disappear when tapped or clicked, for example, a collapsible navigation menu or filter options.

Customize drawers

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Click Theme settings.
  4. Click Drawers.
  5. Use the sliding scales to change the appearance of your Border.
  6. Use the sliding scales to change the Shadow. Setting the shadow opacity to 0% removes the shadow.
  7. Click Save.

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 position, shape, and color of your badges.

Sample online store with sale and sold out badges

Page and Blog badges appear on relevant search results. You can customize the position and shape of these badges, but not the color.

Customize badges

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Click Theme settings.
  4. Click Badges.
  5. Use the drop-down menu to select the badge position within product cards. Choose between top left, top right, bottom left (default), or bottom right.
  6. Add rounded corners with the Corner radius sliding scale. Setting the corner radius to 0px produces square badge edges, and increasing the radius rounds the edges of the badges.
  7. Choose a Color scheme for your badges. You can set an alternate color scheme for sold out items.
  8. Click Save.

Icons

Icons are small images that can be added to certain sections or blocks. Set the color scheme for your icons in Theme settings.

Sample online store with icons in collapsible rows

Customize icons

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Click Theme settings.
  4. Click Icons
  5. Use the drop-down menu to select the default color for your icons. Choose between Accent 1, Accent 2, Outline button, or text color for your store icons.
  6. Click Save.

Brand information

You can include information about your brand. You can add the brand information block in your footer.

Customize your brand information

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Click Theme settings.
  4. Click Brand information.
  5. Enter a headline.
  6. Enter a description.
  7. Click Select image, and then do one of the following:
    • To use an image that you have already uploaded to your Shopify admin, click an image to select it and then 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.
  8. In the Image width area, toggle the slider to the pixel width you want.

Social media

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.

Customize your social media settings

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Click Theme settings.
  4. Click Social media
  5. 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://instagram.com/shopify, or https://twitter.com/shopify.
  6. Click Save.

Search behavior

Online Store includes predictive search, which shows 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 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.

You can customize the following settings for search:

  • Enable search suggestions - Enable or disable search suggestions.
  • Show product vendor - Show or hide product vendors in search suggestions.
  • Show product price - Show or hide product prices in search suggestions.

Change search input settings

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Click Theme settings.
  4. Click Search input
  5. Use the settings to customize the search behavior for the store.
  6. Click Save.

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

Currency format

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

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Click Theme settings.
  4. Click Currency format.
  5. To display currency codes, click the Show currency codes checkbox.
  6. 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 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 on the cart drawer.

Steps:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Click Theme settings > Cart.
  4. Use the drop-down menu to select a cart style: drawer, page, or pop-up notification.
  5. Optional: To display the vendor of the items in a customer's cart, click Show vendor.
  6. Optional: To provide customers with an area to make special requests or add extra order information, select the Enable cart note option.

If you have the cart type set to Drawer, then you can display a collection in the cart drawer. The selected collection only appears when the cart is empty.

To add a collection to the empty cart drawer, click Select collection. After a collection has been selected, click Change to select a different collection or remove the collection from the cart drawer. You can also click Create collection to create a new collection. This button takes you out of theme settings and to the Collections page of your Shopify admin.

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.

Steps:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, and then click Customize.
  3. Click Theme settings > Styles.
  4. Using the drop-down menus, select your theme style options. The available options available depend on which theme you use.
  5. Click Save.

Undo and redo changes

The Undo button reverses your most recent change, and the Redo button adds back a change that you undid. Clicking the Undo button more than once will continue to undo your work, one change at a time. The Undo and Redo buttons are located in the theme editor toolbar.

The Undo and Redo buttons in the theme editor toolbar

Click the Undo button to reverse the following changes:

  • adding, reordering, and deleting sections
  • applying colors, fonts, and other settings, on the Theme settings tab
  • resetting a theme style.
Ready to start selling with Shopify?Try it free