Log in
Start free trial

Theme settings

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

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

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 Customize.
  3. Click the Theme settings gear 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.
iPhone
  1. From the Shopify app, tap the … button.
  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 Customize.
  5. Tap ⋮, 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.
  9. Optional: In the Desktop logo width area, use the range slider to adjust the logo pixel width.
  10. Tap Save.
Android
  1. From the Shopify app, tap the ☰ button.
  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 Customize.
  5. Tap …, 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.
  9. Optional: In the Desktop logo width area, use the range slider to adjust the logo pixel width.
  10. Tap ✓.

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 Customize.
  3. Click the Theme settings gear 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.
iPhone
  1. From the Shopify app, tap the … button.
  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 Customize.
  5. Tap ⋮, 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.
  10. Tap Save.
Android
  1. From the Shopify app, tap the ☰ button.
  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 Customize.
  5. Tap …, 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.
  10. Tap ✓.

Colors

You can create and customize 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.

Steps:

Desktop
  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 the Theme settings gear icon
  4. Click Colors.
  5. In the Schemes section, click an existing scheme or click Add Scheme to add a new color scheme.
  6. To edit the color scheme, click the color swatch to change the following content type colors:
    • Background
    • Background gradient
    • Text
    • Solid button background
    • Solid button label
    • Outline button
    • Shadow
  7. 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 color code from the text field.
  8. Click Save.
iPhone

  1. From the Shopify app, tap the … button.

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

  5. Tap ⋮, and then tap Theme settings.

  6. Tap Colors.

  7. In the Schemes section, tap an existing scheme or tap Add Scheme to add a new color scheme.

  8. To edit the color scheme, tap the color swatch to change the following content type colors:

    • Background
    • Background gradient
    • Text
    • Solid button background
    • Solid button label
    • Outline button
    • Shadow

  9. 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 color code from the text field.

  10. Tap Done.

  11. Tap Save.

Android

  1. From the Shopify app, tap the ☰ button.

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

  5. Tap …, and then tap Theme settings.

  6. Tap Colors.

  7. In the Schemes section, tap an existing scheme or tap Add Scheme to add a new color scheme.

  8. To edit the color scheme, tap the color swatch to change the following content type colors:

    • Background
    • Background gradient
    • Text
    • Solid button background
    • Solid button label
    • Outline button
    • Shadow

  9. 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 color code from the text field.

  10. Tap Done.

  11. Tap ✓.

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.

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 Customize.
  3. Click the Theme settings gear 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.
iPhone
  1. From the Shopify app, tap the … button.
  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 Customize.
  5. Tap ⋮, 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.
Android
  1. From the Shopify app, tap the ☰ button.
  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 Customize.
  5. Tap …, 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 ✓.

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 Customize.
  3. Click the Theme settings gear 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.
iPhone
  1. From the Shopify app, tap the … button.
  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 Customize.
  5. Tap ⋮, 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.
Android
  1. From the Shopify app, tap the ☰ button.
  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 Customize.
  5. Tap …, 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 ✓.

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 Customize.
  3. Click the Theme settings gear 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.
iPhone
  1. From the Shopify app, tap the … button.
  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 Customize.
  5. Tap ⋮, 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.
Android
  1. From the Shopify app, tap the ☰ button.
  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 Customize.
  5. Tap …, 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 ✓.

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 Customize.
  3. Click the Theme settings gear 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.
iPhone

  1. From the Shopify app, tap the … button.

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

  5. Tap ⋮, 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.

Android

  1. From the Shopify app, tap the ☰ button.

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

  5. Tap …, 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 ✓.

Borders and shadows

You can adjust the borders and shadows of some interactive content types, such as drawers, buttons, variant pills, or product 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 item.

Customizable options for shadows are:

  • Opacity, which changes the visibility of the item's shadow. A shadow opacity of 0% removes the item's shadow entirely.
  • Horizontal and Vertical offset range sliders, which move the location of the shadow around the item.
  • Blur range slider, which changes 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

Steps:

Desktop
  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 the Theme settings gear icon.
  4. Click Buttons.
  5. Optional: Use the range slider to change the appearance of your button Border.
  6. Optional: Use the range slider to change the button Shadow. Setting the shadow Opacity to 0% removes the shadow.
  7. Click Save.
iPhone
  1. From the Shopify app, tap the … button.
  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 Customize.
  5. Tap ⋮, and then tap Theme settings.
  6. Tap Buttons.
  7. Optional: Use the range slider to change the appearance of your button Border.
  8. Optional: Use the range slider to change the button Shadow. Setting the shadow Opacity to 0% removes the shadow.
  9. Tap Save.
Android
  1. From the Shopify app, tap the ☰ button.
  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 Customize.
  5. Tap …, and then tap Theme settings.
  6. Tap Buttons.
  7. Optional: Use the range slider to change the appearance of your button Border.
  8. Optional: Use the range slider to change the button Shadow. Setting the shadow Opacity to 0% removes the shadow.
  9. Tap ✓.

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.

Sample online store with selectable variant pills

Steps:

Desktop
  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 the Theme settings gear icon.
  4. Click Variant pills.
  5. Optional: Use the range slider to change the appearance of your variant pill Border.
  6. Optional: Use the range slider to change the variant pill Shadow. Setting the shadow Opacity to 0% removes the shadow.
  7. Click Save.
iPhone
  1. From the Shopify app, tap the … button.
  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 Customize.
  5. Tap ⋮, and then tap Theme settings.
  6. Tap Variant pills.
  7. Optional: Use the range slider to change the appearance of your variant pill Border.
  8. Optional: Use the range slider to change the variant pill Shadow. Setting the shadow Opacity to 0% removes the shadow.
  9. Tap Save.
Android
  1. From the Shopify app, tap the ☰ button.
  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 Customize.
  5. Tap …, and then tap Theme settings.
  6. Tap Variant pills.
  7. Optional: Use the range slider to change the appearance of your variant pill Border.
  8. Optional: Use the range slider to change the variant pill Shadow. Setting the shadow Opacity to 0% removes the shadow.
  9. Tap ✓.

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.

Sample online store with quantity input

Steps:

Desktop
  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 the Theme settings gear icon.
  4. Click Inputs.
  5. Optional: Use the range slider to change the appearance of your input Border.
  6. Optional: Use the range slider to change the input Shadow. Setting the shadow Opacity to 0% removes the shadow.
  7. Click Save.
iPhone
  1. From the Shopify app, tap the … button.
  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 Customize.
  5. Tap ⋮, and then tap Theme settings.
  6. Tap Inputs.
  7. Optional: Use the range slider to change the appearance of your input Border.
  8. Optional: Use the range slider to change the input Shadow. Setting the shadow Opacity to 0% removes the shadow.
  9. Tap Save.
Android
  1. From the Shopify app, tap the ☰ button.
  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 Customize.
  5. Tap …, and then tap Theme settings.
  6. Tap Inputs.
  7. Optional: Use the range slider to change the appearance of your input Border.
  8. Optional: Use the range slider to change the input Shadow. Setting the shadow Opacity to 0% removes the shadow.
  9. Tap ✓.

Cards

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. You can change the color, alignment, image padding, borders, and shadows of these three types of section card.

Steps:

Desktop
  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 the Theme settings gear icon.
  4. Click Product cards, Collection cards, or Blog cards.
  5. To choose a card style, use the Style option.
  6. Optional: To add space around your card images, use the Image padding range slider.
  7. Optional: Choose between Left, Center (default), or Right for the Text alignment of your cards.
  8. Optional: In the Color scheme section, click Change to select a color scheme for your cards.
  9. Optional: Use the range slider to change the appearance of your card Border.
  10. Optional: Use the range slider to change the card Shadow. Setting the shadow Opacity to 0% removes the shadow.
  11. Click Save.
iPhone
  1. From the Shopify app, tap the … button.
  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 Customize.
  5. Tap ⋮, and then tap Theme settings.
  6. Tap Product cards, Collection cards, or Blog cards.
  7. To choose a card style, use the Style option.
  8. Optional: To add space around your card images, use the Image padding range slider.
  9. Optional: Choose between Left, Center (default), or Right for the Text alignment of your cards.
  10. Optional: In the Color scheme section, tap Change. Select a color scheme for your cards, and then tap Done.
  11. Optional: Use the range slider to change the appearance of your card Border.
  12. Optional: Use the range slider to change the card Shadow. Setting the shadow Opacity to 0% removes the shadow.
  13. Tap Save.
Android
  1. From the Shopify app, tap the ☰ button.
  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 Customize.
  5. Tap …, and then tap Theme settings.
  6. Tap Product cards, Collection cards, or Blog cards.
  7. To choose a card style, use the Style option.
  8. Optional: To add space around your card images, use the Image padding range slider.
  9. Optional: Choose between Left, Center (default), or Right for the Text alignment of your cards.
  10. Optional: In the Color scheme section, tap Change. Select a color scheme for your cards, and then tap Done.
  11. Optional: Use the range slider to change the appearance of your card Border.
  12. Optional: Use the range slider to change the card Shadow. Setting the shadow Opacity to 0% removes the shadow.
  13. Tap ✓.

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.

Steps:

Desktop
  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 the Theme settings gear icon.
  4. Click Content containers.
  5. Use the range slider to change the appearance of your content container Border.
  6. Use the range slider to change the content container Shadow. Setting the shadow Opacity to 0% removes the shadow.
  7. Click Save.
iPhone
  1. From the Shopify app, tap the … button.
  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 Customize.
  5. Tap ⋮, and then tap Theme settings.
  6. Tap Content containers.
  7. Use the range slider to change the appearance of your content container Border.
  8. Use the range slider to change the content container Shadow. Setting the shadow Opacity to 0% removes the shadow.
  9. Tap Save.
Android
  1. From the Shopify app, tap the ☰ button.
  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 Customize.
  5. Tap …, and then tap Theme settings.
  6. Tap Content containers.
  7. Use the range slider to change the appearance of your content container Border.
  8. Use the range slider to change the content container Shadow. Setting the shadow Opacity to 0% removes the shadow.
  9. Tap ✓.

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.

Steps:

Desktop
  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 the Theme settings gear icon.
  4. Click Media.
  5. Use the range slider to change the appearance of your media Border.
  6. Use the range slider to change the media Shadow. Setting the shadow Opacity to 0% removes the shadow.
  7. Click Save.
iPhone
  1. From the Shopify app, tap the … button.
  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 Customize.
  5. Tap ⋮, and then tap Theme settings.
  6. Tap Media.
  7. Use the range slider to change the appearance of your media Border.
  8. Use the range slider to change the media Shadow. Setting the shadow Opacity to 0% removes the shadow.
  9. Tap Save.
Android
  1. From the Shopify app, tap the ☰ button.
  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 Customize.
  5. Tap …, and then tap Theme settings.
  6. Tap Media.
  7. Use the range slider to change the appearance of your media Border.
  8. Use the range slider to change the media Shadow. Setting the shadow Opacity to 0% removes the shadow.
  9. Tap ✓.

You can adjust the appearance of navigation drop-downs, pop-up modals, and cart pop-ups on 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 Customize.
  3. Click the Theme settings gear icon.
  4. Click Dropdowns and pop-ups.
  5. Use the range slider to change the appearance of your Border.
  6. Use the range slider to change the Shadow. Setting the shadow Opacity to 0% removes the shadow.
  7. Click Save.
iPhone
  1. From the Shopify app, tap the … button.
  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 Customize.
  5. Tap ⋮, and then tap Theme settings.
  6. Tap Dropdowns and pop-ups.
  7. Use the range slider to change the appearance of your Border.
  8. Use the range slider to change the Shadow. Setting the shadow Opacity to 0% removes the shadow.
  9. Tap Save.
Android
  1. From the Shopify app, tap the ☰ button.
  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 Customize.
  5. Tap …, and then tap Theme settings.
  6. Tap Dropdowns and pop-ups.
  7. Use the range slider to change the appearance of your Border.
  8. Use the range slider to change the Shadow. Setting the shadow Opacity to 0% removes the shadow.
  9. Tap ✓.

Drawers

Drawers are hidden, interactive containers that display when tapped or clicked, such as a collapsible navigation menu or collection filter options. You can customize the border and shadow of the drawers on 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 Customize.
  3. Click the Theme settings gear icon.
  4. Click Drawers.
  5. Use the range slider to change the appearance of your drawer Border.
  6. Use the range slider to change the drawer Shadow. Setting the shadow Opacity to 0% removes the shadow.
  7. Click Save.
iPhone
  1. From the Shopify app, tap the … button.
  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 Customize.
  5. Tap ⋮, and then tap Theme settings.
  6. Tap Drawers.
  7. Use the range slider to change the appearance of your drawer Border.
  8. Use the range slider to change the drawer Shadow. Setting the shadow Opacity to 0% removes the shadow.
  9. Tap Save.
Android
  1. From the Shopify app, tap the ☰ button.
  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 Customize.
  5. Tap …, and then tap Theme settings.
  6. Tap Drawers.
  7. Use the range slider to change the appearance of your drawer Border.
  8. Use the range slider to change the drawer Shadow. Setting the shadow Opacity to 0% removes the shadow.
  9. Tap ✓.

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.

Sample online store with sale and sold out badges

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.

Steps:

Desktop
  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 the Theme settings gear icon.
  4. Click Badges.
  5. To select your badge position, click the Position on cards drop-down menu, and then click Bottom left, Bottom right, Top left, or Top right.
  6. Optional: To add rounded corners to your badges, use the Corner radius range slider. Setting the corner radius to 0 px produces square badge edges, and increasing the radius makes the edges of the badge more rounded.
  7. Optional: To select a color scheme, click Change for the Sale badge color scheme or the Sold out badge color scheme, then click the color scheme that you want.
  8. Click Save.
iPhone
  1. From the Shopify app, tap the … button.
  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 Customize.
  5. Tap ⋮, and then tap Theme settings.
  6. Tap Badges.
  7. To select your badge position, tap the Position on cards drop-down menu, and then tap Bottom left, Bottom right, Top left, or Top right.
  8. Optional: To add rounded corners to your badges, use the Corner radius range slider. Setting the corner radius to 0 px produces square badge edges, and increasing the radius makes the edges of the badge more rounded.
  9. Optional: To select a color scheme, tap Change for the Sale badge color scheme or the Sold out badge color scheme. Select a color scheme for your badges, and then tap Done.
  10. Tap Save.
Android
  1. From the Shopify app, tap the ☰ button.
  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 Customize.
  5. Tap …, and then tap Theme settings.
  6. Tap Badges.
  7. To select your badge position, tap the Position on cards drop-down menu, and then tap Bottom left, Bottom right, Top left, or Top right.
  8. Optional: To add rounded corners to your badges, use the Corner radius range slider. Setting the corner radius to 0 px produces square badge edges, and increasing the radius makes the edges of the badge more rounded.
  9. Optional: To select a color scheme, tap Change for the Sale badge color scheme or the Sold out badge color scheme. Select a color scheme for your badges, and then tap Done.
  10. Tap ✓.

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. Find the theme that you want to edit, and then click Customize.
  3. Click the Theme settings gear icon.
  4. Click Brand information.
  5. Optional: Enter a Headline about your brand or business.
  6. Optional: Enter a Description about your brand or business.
  7. Optional: In the Image 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.
  8. Optional: In the Image width area, toggle the range slider to the pixel width that you want.
  9. Click Save.
iPhone
  1. From the Shopify app, tap the … button.
  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 Customize.
  5. Tap ⋮, and then tap Theme settings.
  6. Tap Brand information.
  7. Optional: Enter a Headline about your brand or business.
  8. Optional: Enter a Description about your brand or business.
  9. Optional: In the Image 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.
  10. Optional: In the Image width area, toggle the range slider to the pixel width you want.
  11. Tap Save.
Android
  1. From the Shopify app, tap the ☰ button.
  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 Customize.
  5. Tap …, and then tap Theme settings.
  6. Tap Brand information.
  7. Optional: Enter a Headline about your brand or business.
  8. Optional: Enter a Description about your brand or business.
  9. Optional: In the Image 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.
  10. Optional: In the Image width area, toggle the range slider to the pixel width you want.
  11. Tap ✓.

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 Customize.
  3. Click the Theme settings gear 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.
iPhone
  1. From the Shopify app, tap the … button.
  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 Customize.
  5. Tap ⋮, 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.
Android
  1. From the Shopify app, tap the ☰ button.
  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 Customize.
  5. Tap …, 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 ✓.

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 Customize.
  3. Click the Theme settings gear 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.
iPhone
  1. From the Shopify app, tap the … button.
  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 Customize.
  5. Tap ⋮, 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.
Android
  1. From the Shopify app, tap the ☰ button.
  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 Customize.
  5. Tap …, 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 ✓.

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 Customize.
  3. Click the Theme settings gear icon.
  4. Click Currency format.
  5. To display currency codes, select Show currency codes.
  6. Click Save.
iPhone
  1. From the Shopify app, tap the … button.
  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 Customize.
  5. Tap ⋮, and then tap Theme settings.
  6. Tap Currency format.
  7. To display currency codes, select Show currency codes.
  8. Tap Save.
Android
  1. From the Shopify app, tap the ☰ button.
  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 Customize.
  5. Tap …, and then tap Theme settings.
  6. Tap Currency format.
  7. To display currency codes, select Show currency codes.
  8. Tap ✓.

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 Customize.
  3. Click the Theme settings gear 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.
iPhone
  1. From the Shopify app, tap the … button.
  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 Customize.
  5. Tap ⋮, 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.
Android
  1. From the Shopify app, tap the ☰ button.
  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 Customize.
  5. Tap …, 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 ✓.

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 Customize.
  3. Click the Theme settings gear icon.
  4. Click Theme style.
  5. Select the theme style that you want to use, and then click Change style.
  6. Click Save.
iPhone
  1. From the Shopify app, tap the … button.
  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 Customize.
  5. Tap ⋮, 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.
Android
  1. From the Shopify app, tap the ☰ button.
  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 Customize.
  5. Tap …, 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 ✓.

Undo and redo changes

The Undo button reverses your most recent change, and the Redo button adds back a change that you undid. If you click the Undo button more than one time, then it continues 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 changes that you made to your theme, including the following examples:

  • adding, reordering, and deleting sections
  • applying colors, fonts, and other theme settings
  • resetting a theme style

Color options with swatches

The updated Shopify product taxonomy includes a standard color attribute that allows you to add color swatches to your storefront. To access this standard attribute, select a product category that includes a color category metafield. The following category metafields support color swatches:

  • Backing color
  • Backrest upholstery color
  • Band color
  • Blanket color
  • Body color
  • Butt cap color
  • Color
  • Canopy color
  • Case color
  • Core color
  • Cover color
  • Dial color
  • Door color
  • Door mat base color
  • Eyewear frame color
  • Eyewear lens color
  • Fingerboard color
  • Flower color
  • Flush plate color
  • Footwear color
  • Foundation color
  • Frame color
  • Furniture/Fixture color
  • Handle color
  • Housing color
  • Ink color
  • Instrument color
  • Instrument string color
  • Jumping surface color
  • Laser color
  • Leg color
  • Lens color
  • Light color
  • Neck color
  • Pen color
  • Pole color
  • Riser color
  • Rod color
  • Saddle base color
  • Saddle seat color
  • Seat color
  • Seat upholstery color
  • Shaft color
  • Sheet color
  • Shelf color
  • Shell/Frame color
  • Slat color
  • Spool color
  • String color
  • Suction cup color
  • Tabletop color
  • Tank color
  • Temple color
  • Top color
  • Upholstery color

Learn more about adding color swatches using category metafields and migrating existing products to use category metafields.

Can’t find the answers you’re looking for? We’re here to help.