Theme settings

You can use customize theme settings in the sidebar menu of the theme editor to make changes to your online store's typography, colors, social media links, and cart page. Theme settings changes apply to your entire online store.

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

Tip

To see more videos, visit our YouTube channel.

Logo

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

3. Click the Theme 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.

iPhone

1. From the Shopify app, tap the 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 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 ✓.

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

10. Tap ✓.

Android

1. From the Shopify app, tap the 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 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 ✓.

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.

Tip

The recommended size for a favicon is 32 x 32 px. Larger images might be scaled down to 32 x 32 px.

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

10. Tap ✓.

Android

1. From the Shopify app, tap the 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 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 ✓.

10. Tap ✓.

Colors

You can define different color schemes in your theme settings and apply the color schemes to different sections throughout your online store with a color scheme picker. A color scheme is a set of colors. Your theme has a set of default color schemes applied that you can change at any time in the theme editor. You can add your brand colors to ensure a cohesive application of your color palette across your online store.

Templates don't have individual color settings so that your online store design is consistent throughout your website. A template is considered a main page or the main content for a store. Having different color schemes throughout your store might lead to bad user experience and can cause customers to leave your store without purchasing products.

You can create and customize up to 21 unique color schemes and apply them to different sections throughout your online store.

Color schemes

Color schemes are a theme setting that group elements and their respective colors in a visually representative way. You can assign different colors to various elements in a cohesive color scheme that can be applied across your theme where a color scheme picker is available. You can have up to 21 color schemes. You can also preview how your colors are displayed in the scheme's preview.

List of different settings that you can apply to color schemes in the theme editor.

Setting	Description
Background	Color is applied to the background of some sections and to the outline button background.
Background gradient	A gradient of colors is applied to the background of some sections. Background gradients replace the background where possible.
Text	Color is applied to the section or block text.
Solid button background	Color is applied to the primary button background.
Solid button label	Color is applied to the primary button text.
Outline button	Color is applied to the secondary button text and border.
Shadow	Color is applied to the shadows.

Managing your color scheme

Your store's color scheme and color options are set within your theme settings. For solid colors, use the color picker to select a new color or enter the value of the color in the text field. The color field accepts the following color names and values:

• Color names such as red, black, or blue.
• RGB color codes.
• Hexadecimal color values.

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

Applying your color scheme

After you define your color scheme in your theme settings, you can assign a color scheme using the color scheme picker in your theme's sections and blocks. The color scheme picker is available only in certain sections, blocks, and general theme settings.

Gradients

You can set up a gradient of colors in some themes for visually interesting background options. The color_background setting is used to customize the CSS background property.

Tip

To learn more about gradients and CSS backgrounds, refer to Mozilla's linear gradient and CSS background documentation.

The gradient picker allows you to select the colors, gradient style, angle, position, and opacity of the gradient. The options selected in the gradient picker are previewed in real time in the theme editor. You can also create a gradient background using CSS code, which includes a validation checker.

Set up gradients

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

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

3. Click the icon, and then click Colors.

4. In the Schemes section, click an existing scheme that you want to edit.

5. Click the gradient color swatch option, such as Background gradient.

6. If you haven't previously set up a gradient, then some preset options are displayed for you to choose from. Select any preset gradient to open the options panel.

7. Select your gradient options:

• Choose between a linear or radial gradient. Use the buttons to select your preferred gradient style.
• Set the angle of your gradient with the up and down arrows. Click the up or down arrow to increase or decrease the angle percentage by 5.
• Use the slider to select the Position of your gradient, or enter a numeric value in the field.
• Enter a specific color hex code or use the color slider to choose a hue. Recently selected colors are displayed at the bottom of the gradient options panel.
• To make your gradient opaque, use the slider on the right to select the transparency of your gradient. You can also enter a percentage in the field next to the hex color code.

8. Click Save.

Use CSS to set gradients

Most CSS background property values can be used to set a background color. You can use this field for solid colors (for example, #000000, black, rgb(0,0,0,0), rgba(0,0,0,0), hsl(0, 0%, 0%), and hsla(0, 0%, 0%, 1) all produce a solid black background), or for gradients (for example, linear-gradient(red, green), radial-gradient(red, green), or conic-gradient(red, green)). Gradients can also be repeated.

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 the icon, and then click Colors.

4. In the Schemes section, click an existing scheme that you want to edit.

5. Click the gradient that you want to edit.

6. Click the arrow next to Gradient, and then select CSS.

7. In the CSS code field, type or paste your gradient code. The theme editor preview displays your gradient in the appropriate location.

8. Click Save.

Remove a gradient

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

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

3. Click the icon, and then click Colors.

4. In the Schemes section, click an existing scheme that you want to edit.

5. Click the gradient that you want to remove.

6. Click Remove gradient.

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.

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

Android

1. From the Shopify app, tap the 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 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 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 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 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 ✓.

Android

1. From the Shopify app, tap the 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 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 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 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 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 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 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.

Note

The fade-in animation is activated on your theme by default. You can deactivate the animation from your theme settings at any time.

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

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 Customize next to the theme that you want to edit.

3. Click the 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.

iPhone

1. From the Shopify app, tap the icon.

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

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

4. Tap the 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 ✓.

Android

1. From the Shopify app, tap the icon.

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

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

4. Tap the 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 ✓.

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

Android

1. From the Shopify app, tap the 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 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 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 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 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 ✓.

Android

1. From the Shopify app, tap the 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 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 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 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 Customize.

5. Tap ⋮, and then tap Theme settings.

6. Tap Currency format.

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

8. Tap ✓.

Android

1. From the Shopify app, tap the 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 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 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 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 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 ✓.

Android

1. From the Shopify app, tap the 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 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 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 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 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 ✓.

Android

1. From the Shopify app, tap the 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 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 ✓.