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.
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click the Theme settings gear icon
Click Colors.
In the Schemes section, click an existing scheme or click Add Scheme to add a new color scheme.
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
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.
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.
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click the Theme settings gear icon.
Click Typography.
To change a font type for your store's headings or body text, click Change in the Headings or Body section.
Click the name of the font that you want to use, and then click Select.
Click Save.
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:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click the Theme settings gear icon.
Click Typography.
To change the default font size for Headings text, use the Font size scale range slider to select the default font size.
To change the default font size for Body text, use the Font size scale range slider to select the default font size.
Click Save.
Layout
You can set the maximum width that your online store will display at, and set the vertical and horizontal space between sections.
Steps:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click the Theme settings gear icon.
Click Layout.
Use the Page width range slider to choose a page width between 1000 px and 1600 px. The default setting is 1600 px.
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.
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.
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:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click the Theme settings gear icon.
Click Animations.
Optional: To activate an animation that reveals your online store's sections on scroll, select Reveal sections on scroll.
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.
Click Save.
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.
Steps:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click the Theme settings gear icon.
Click Buttons.
Optional: Use the range slider to change the appearance of your button Border.
Optional: Use the range slider to change the button Shadow. Setting the shadow Opacity to 0% removes the shadow.
Click Save.
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.
Steps:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click the Theme settings gear icon.
Click Variant pills.
Optional: Use the range slider to change the appearance of your variant pill Border.
Optional: Use the range slider to change the variant pill Shadow. Setting the shadow Opacity to 0% removes the shadow.
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.
Steps:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click the Theme settings gear icon.
Click Inputs.
Optional: Use the range slider to change the appearance of your input Border.
Optional: Use the range slider to change the input Shadow. Setting the shadow Opacity to 0% removes the shadow.
Click Save.
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:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click the Theme settings gear icon.
Click Product cards, Collection cards, or Blog cards.
To choose a card style, use the Style option.
Optional: To add space around your card images, use the Image padding range slider.
Optional: Choose between Left, Center (default), or Right for the Text alignment of your cards.
Optional: In the Color scheme section, click Change to select a color scheme for your cards.
Optional: Use the range slider to change the appearance of your card Border.
Optional: Use the range slider to change the card Shadow. Setting the shadow Opacity to 0% removes the shadow.
Click Save.
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:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click the Theme settings gear icon.
Click Content containers.
Use the range slider to change the appearance of your content container Border.
Use the range slider to change the content container Shadow. Setting the shadow Opacity to 0% removes the shadow.
Click Save.
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:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click the Theme settings gear icon.
Click Media.
Use the range slider to change the appearance of your media Border.
Use the range slider to change the media Shadow. Setting the shadow Opacity to 0% removes the shadow.
Click Save.
Dropdowns and pop-ups
You can adjust the appearance of navigation drop-downs, pop-up modals, and cart pop-ups on your online store.
Steps:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click the Theme settings gear icon.
Click Dropdowns and pop-ups.
Use the range slider to change the appearance of your Border.
Use the range slider to change the Shadow. Setting the shadow Opacity to 0% removes the shadow.
Click Save.
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:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click the Theme settings gear icon.
Click Drawers.
Use the range slider to change the appearance of your drawer Border.
Use the range slider to change the drawer Shadow. Setting the shadow Opacity to 0% removes the shadow.
Click Save.
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.
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:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click the Theme settings gear icon.
Click Badges.
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.
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.
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.
Click Save.
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:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click the Theme settings gear icon.
Click Brand information.
Optional: Enter a Headline about your brand or business.
Optional: Enter a Description about your brand or business.
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.
Optional: In the Image width area, toggle the range slider to the pixel width that you want.
Click Save.
Social media
You can add links to your social media accounts that display in the footer of your online store.
Steps:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click the Theme settings gear icon.
Click Social media.
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.
Click Save.
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:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click the Theme settings gear icon.
Click Search behavior.
To activate or deactivate search suggestions, select or deselect Enable search suggestions.
Optional: To display or hide the product vendor in search suggestions, select or deselect Show product vendor.
Optional: To display or hide the product price in search suggestions, select or deselect Show product price.
Click Save.
Currency format
You can choose to have the currency code displayed with prices on your products.
Steps:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click the Theme settings gear icon.
Click Currency format.
To display currency codes, select Show currency codes.
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 in the cart drawer.
Steps:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click the Theme settings gear icon.
Click Cart.
Use the Cart type drop-down menu to select the Drawer, Page, or Popup notification cart style.
Optional: To display the vendors of the items in a customer's cart, select Show vendor.
Optional: To provide customers with a text box where they can enter special requests or add extra order information, select Enable cart note.
Optional: If you select Drawer as your Cart type, then you can display a collection in the cart drawer when it's empty:
In the Cart drawer area, click Select collection.
Click the name of the collection that you want to display, and then click Select.
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:
In the Cart drawer > Color scheme area, click Change.
Select a color scheme that you want to use for your cart drawer.
Click Save.
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.
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:
From your Shopify admin, go to Online Store > Themes.
Find the theme that you want to edit, and then click Customize.
Click the Theme settings gear icon.
Click Theme style.
Select the theme style that you want to use, and then click Change style.
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. 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.
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
Can’t find the answers you’re looking for? We’re here to help.
