You can use theme settings to make changes to your online store's typography, colors, social media links, and checkout settings. When you make changes to your theme settings, the changes apply to your entire online store.
Find the theme that you want to edit, and then clickCustomize.
ClickTheme settings.
ClickLogo.
In theLogoarea, clickSelect image, and then do one of the following:
To use an image that you have already uploaded to your Shopify admin, click an image to select it and then clickSelect.
To use an image from your local computer, clickUpload. Choose an image from your computer and clickOpento start the upload. It will be automatically selected when the upload is finished. ClickSelect.
To select a free image, clickFree imagesand search for or click an image to select it.
广告d alt text to your logo image:
ClickEditalt text.
In theEdit imagewindow, enter a brief description of the image.
ClickSave.
Customize your logo width
ClickTheme settings.
ClickLogo.
In theDesktop logo widtharea, toggle the slider to the pixel width you want.
Favicon
You can add a favorites icon, or a favicon, which can help to brand your online store. A favicon shows in the following places:
your web browser tab
your web browser's history
icons on your desktop
beside your online store name when it's bookmarked
Find the theme that you want to edit, and then clickCustomize.
ClickTheme settings.
ClickLogo.
In theFavicon imagearea, clickSelect image, and then do one of the following:
To use an image that you have already uploaded to your Shopify admin, click an image to select it and then clickSelect.
To use an image from your local computer, clickUpload. Choose an image from your computer and clickOpento start the upload. It will be automatically selected when the upload is finished. ClickSelect.
To select a free image, clickFree imagesand search for or click an image to select it.
广告d alt text to your favicon image:
ClickEditalt text.
In theEdit imagewindow, enter a brief description of the image.
In theSchemessection, click an existing scheme or click广告d schemeto add a new color scheme.
Click the color swatch for the content type color that you want to change.
设置颜色,输入十六进制颜色代码or choose the color from the color picker. To set the color to transparent, delete the hex code from the text field.
ClickSave.
Typography
You can set the font style and size for the text on your online store. You can choose a system font or a custom font.
It's recommended that you usesystem fontsin your store. Using system fonts avoids downloading new fonts to your customer's computer, which can negatively impact your store load speed. The font that displays on your customer's computer depends on their operating system.
Find the theme that you want to edit, and then clickCustomize.
ClickTheme settings>Typography.
To change the default font size for headings, use theFont size scaleto select the default font size. The minimum font size is 100%, and the maximum font size is 150%. Each increment of the scale increases the font size by 5%. The default setting is 100%.
To change the default font size for body text, use theFont size scaleto select the default font size. The minimum font size is 100%, and the maximum font size is 130%. Each increment of the scale increases the font size by 5%. The default setting is 100%.
ClickSave.
Layout
Layout allows you to set the maximum width that your online store will display in.
Find the theme that you want to edit, and then clickCustomize.
ClickTheme settings>Layout.
Use range slider to choose between a page width of 1000px or 1600px. The default setting is 1600px.
Optional: Addvertical space between sectionswith the range slider. You can add a maximum of 100px between sections.
Optional: If you have aGridlayout, then use theHorizontal spaceand垂直space滑块添加网格内容之间的空间范围。广告ding horizontal space will add a maximum of 40px of space to your rows, whereas adding vertical space will add a maximum of 40px of space to your columns.
ClickSave.
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.
Optional: To activate an animation that reveals your online store's sections on scroll, selectReveal sections on scroll.
Optional: To add a hover effect animation to your cards and buttons, choose one of the following options from theHover effectsetting:
垂直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.
ClickSave.
Borders and shadows
You can adjust the borders and shadows of some interactive content types, such as drawers, buttons, variants, or quantity inputs.
Customizable options forbordersare:
Thickness, which changes the outline of the item.
Opacity, which sets the visibility of the item outline.
Corner radius, which rounds the corners of your items.
Options forshadowsare:
Opacitychanges the visibility of the item's shadow. A shadow opacity of 0% removes the item shadow entirely.
TheHorizontalor垂直offset range sliders move the location of the shadow around the item.
Use theBlurrange slider to change the opacity of the item's shadow.
Buttons
You can customize the settings for call to action buttons on your online store by adding shadows, changing the spacing or opacity, and adjusting the shape of your buttons.
Find the theme that you want to edit, and then clickCustomize.
ClickTheme settings.
ClickButtons.
Use the sliding scales to change the appearance of your buttonBorder.
Use the sliding scales to change the buttonShadow. Setting the shadow opacity to 0% removes the shadow.
ClickSave.
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.
Find the theme that you want to edit, and then clickCustomize.
ClickTheme settings.
ClickVariant pills.
Use the sliding scales to change the appearance of your variant pillBorder.
Use the sliding scales to change the variant pillShadow. Setting the shadow opacity to 0% removes the shadow.
ClickSave.
Inputs
Inputs are interactive areas that require customer input, for example, a quantity selector, an email signup form, or cart notes. You can adjust the appearance of your online store inputs in theme settings.
Find the theme that you want to edit, and then clickCustomize.
ClickTheme settings.
ClickInputs.
Use the sliding scales to change the appearance of your inputBorder.
Use the sliding scales to change the inputShadow. Setting the shadow opacity to 0% removes the shadow.
ClickSave.
Cards
Product cards, collection cards, and blog cards settings allow you to customize the style of each type of separate area which are displayed in sections. You can change the color, alignment, image padding, borders, and shadows of these three types of section cards.
广告dImage paddingwith the sliding scale. This adds space around your card images.
Use the drop-down menu to set theText alignmentfor your cards. Choose between left, center (default), or right.
Use the drop-down menu to select aColor schemefor your cards.
Use the sliding scales to change the appearance of your cardBorder.
Use the sliding scales to change the cardShadow. Setting the shadow opacity to 0% removes the shadow.
ClickSave.
Content containers
Containers are the text portion of content sections, for example, the text box on a slideshow, an image banner, or the columns in multicolumn sections. You can customize the appearance of content containers for your online store.
Find the theme that you want to edit, and then clickCustomize.
ClickTheme settings.
ClickContent containers.
Use the sliding scales to change the appearance of your content containerBorder.
Use the sliding scales to change the content containerShadow. Setting the shadow opacity to 0% removes the shadow.
ClickSave.
Media
Media is the visual component of sections, for example, product media or the image in Image with Text sections. You can add borders and shadows to your media.
Find the theme that you want to edit, and then clickCustomize.
ClickTheme settings.
ClickDropdowns and pop-ups.
Use the sliding scales to change the appearance of yourBorder.
Use the sliding scales to change theShadow. Setting the shadow opacity to 0% removes the shadow.
ClickSave.
Drawers
Drawers are hidden, interactive containers that appear and disappear when tapped or clicked, for example, a collapsible navigation menu or filter options.
Find the theme that you want to edit, and then clickCustomize.
ClickTheme settings.
ClickDrawers.
Use the sliding scales to change the appearance of yourBorder.
Use the sliding scales to change theShadow. Setting the shadow opacity to 0% removes the shadow.
ClickSave.
Badges
SaleandSold outbadges are automatically added to your product images when the price drops, or when the inventory count reaches 0. You can adjust the position, shape, and color of your badges.
PageandBlogbadges appear on relevant search results. You can customize the position and shape of these badges, but not the color.
Find the theme that you want to edit, and then clickCustomize.
ClickTheme settings.
ClickBadges.
Use the drop-down menu to select the badge position within product cards. Choose between top left, top right, bottom left (default), or bottom right.
广告d rounded corners with theCorner radiussliding scale. Setting the corner radius to 0px produces square badge edges, and increasing the radius rounds the edges of the badges.
Choose aColor schemefor your badges. You can set an alternate color scheme for sold out items.
ClickSave.
Icons
Icons are small images that can be added to certain sections or blocks. Set the color scheme for your icons in Theme settings.
Find the theme that you want to edit, and then clickCustomize.
ClickTheme settings.
ClickIcons
Use the drop-down menu to select the default color for your icons. Choose between Accent 1, Accent 2, Outline button, or text color for your store icons.
ClickSave.
Brand information
You can include information about your brand. You can add the brand information block in your footer.
Find the theme that you want to edit, and then clickCustomize.
ClickTheme settings.
ClickBrand information.
Enter a headline.
Enter a description.
ClickSelect image, and then do one of the following:
To use an image that you have already uploaded to your Shopify admin, click an image to select it and then clickSelect.
To use an image from your local computer, clickUpload. Choose an image from your computer and clickOpento start the upload. It will be automatically selected when the upload is finished. ClickSelect.
To select a free image, clickFree imagesand search for or click an image to select it.
In theImage widtharea, toggle the slider to the pixel width you want.
Social media
You can add social sharing buttons for your products and blog posts, and links to your social media accounts. Links to your social media accounts show in the footer of your online store.
Find the theme that you want to edit, and then clickCustomize.
ClickTheme settings.
ClickSocial media
To add links to your social media accounts, enter the links to your accounts in the fields provided under Accounts. Enter full links, such ashttps://instagram.com/shopify, orhttps://twitter.com/shopify.
ClickSave.
Search behavior
Online Store includes predictive search, which shows suggestions when customers start typing into the search field. Search suggestions can help customers articulate and refine their search queries, and provide new ways for them to explore an online store. They can also let customers quickly browse matches without having to leave their current page to see a separate list of search results.
You can customize the following settings for search:
Enable search suggestions- Enable or disable search suggestions.
显示product vendor- Show or hide product vendors in search suggestions.
显示product price- Show or hide product prices in search suggestions.
Find the theme that you want to edit, and then clickCustomize.
ClickTheme settings.
ClickCurrency format.
To display currency codes, click the显示currency codescheckbox.
ClickSave.
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 appear as a drawer, a page, or a pop-up notification. When the customer's cart is empty, you can display a featured collection on the cart drawer.
Find the theme that you want to edit, and then clickCustomize.
ClickTheme settings>Cart.
Use the drop-down menu to select a cart style: drawer, page, or pop-up notification.
Optional: To display the vendor of the items in a customer's cart, click显示vendor.
Optional: To provide customers with an area to make special requests or add extra order information, select theEnable cart noteoption.
If you have the cart type set toDrawer, then you can display a collection in the cart drawer. The selected collection only appears when the cart is empty.
To add a collection to the empty cart drawer, clickSelect collection. After a collection has been selected, clickChangeto select a different collection or remove the collection from the cart drawer. You can also clickCreate collectionto create a new collection. This button takes you out of theme settings and to theCollectionspage of your Shopify admin.
Checkout
This section lets you customize your store's checkout. Refer toShopify checkoutfor more information about your store's checkout page.
Change theme styles
A theme style is a collection of settings chosen by a theme designer. You can apply a theme style to your store to give it a polished look and feel. All themes have a theme style applied by default. When you customize a theme, you replace the theme style settings with your own. When you apply a theme style to your theme, you change your current settings, such as colors and typography.
Find the theme that you want to edit, and then clickCustomize.
ClickTheme settings>Styles.
Using the drop-down menus, select your theme style options. The available options available depend on which theme you use.
ClickSave.
Undo and redo changes
TheUndobutton reverses your most recent change, and theRedobutton adds back a change that you undid. Clicking theUndobutton more than once will continue to undo your work, one change at a time. TheUndoandRedobuttons are located in the theme editor toolbar.
Click theUndobutton to reverse the following changes:
adding, reordering, and deleting sections
applying colors, fonts, and other settings, on theTheme settingstab
