Motion includes a variety of settings that let you customize and personalize the overall look and feel of your store.
To access Theme settings, click the gear icon in the left sidebar of the theme editor.
- Colors
- Typography
- Icons
- Animations
- Products
- Product tiles
- Cart
- Social media
- Favicon
- Search
- Extras
- Custom CSS
- Theme style
-
Colors
Motion provides extensive controls for managing colors across the theme. These settings are organized into common categories, and each color can be selected using the color picker.
General
These settings apply to the bulk content and sections throughout the theme. Control the colors using the color picker beside each label.
• Background
• Text
• Lines and borders
• Buttons
• Button text
• Sale price
• Sale tag
• Sale tag text
• Cart dot
Header
These color settings are used for the header section and the announcement bar block. Select and customize colors using the color picker next to each label.
• Background
• Text
• Announcement bar
• Announcement bar text
Footer
Apply colors to the footer section using the color picker beside each label.
• Background
• Text
Menu and cart drawers
These settings apply to the mobile header navigation drawer and the cart drawer. Use the color picker next to each label to adjust the colors.
• Background
• Text
• Lines and borders
• Buttons
• Button text
• Overlays
Image treatment
Overlay is the darkening effect used on image sections to enhance text readability. These settings are used across large images with overlaid text like the slideshow section or featured collection.
• Text
• From overlay color (applied at the top of the section)
• From overlay opacity
• To overlay color (applied at the bottom of the section)
• To overlay opacity
Animations
Use these color settings to control the image backgrounds on elements like the product grid, featured collections, hero sections, and collection headers.
• Image background
• Image section background
-
Typography
The Typography settings allow you to change the font family and adjust text sizes throughout the theme.
Headings
Use Shopify’s font picker to select a Font and adjust its Base size, Letter spacing, and Line height. Turn on Capitalize to display headings, labels, and footer titles in all caps, and enable Center page and section titles to align them in the center.
The heading settings apply to:
• Section heading fields
• Page titles
• Product titles on product pages
• Sidebar headings
• Footer headings
Body text
Use Shopify’s font picker to select the Body font and customize its Base size, Letter spacing, and Line height. Turn on Capitalize hero subtitle, sale tags, and vendor to display these elements in uppercase.
The body text settings apply to:
• Section text fields
• Product descriptions
• Buttons and announcement bar text
• Breadcrumbs, filters, and pagination
• Product labels
• Product grid text
• Header and footer menus
• Most text elements throughout the theme
Navigation
Use Text size to adjust the font size of the navigation links, and enable Use heading font to apply the heading font to them.
-
Icons
Use the Weight dropdown to adjust the thickness of the icons. The Edges setting lets you choose whether the icons have sharp or rounded edges.
-
Animations
Motion provides a selection of animation effects to enhance your store’s design.
Pages
Turn on Animate between pages to add an animation when navigating between pages. Use Style to choose the animation type from the following options:
• Fade
• Slow fade
• Slide reveal across
• Slide reveal down
In some cases, links inside app blocks can be affected by this animation. Turning this setting off should resolve the issue.
Sections
Turn on Animate sections to add an animation when a section loads. Use Background style to choose the animation type from the following options:
• Fade in
• Zoom and fade in
• Slide reveal
Use Text style to add an intro animation to text on overlaid image sections, such as slideshows and collection headers. Choose from the following options.
• Fade in
• Rise up
• Slide reveal
Images
Enable Animate images to apply a loading animation to images. Use Style to choose the animation type from the following options:
• Fade in
• Zoom and fade in
• Slide reveal
Other
Turn on Animate buttons or Animate underlines to add hover animations to buttons and links.
-
Products
Apply design changes to product-related elements across the theme.
Show vendor adds the vendor name below the product title in the product grid.
When a product has a compared-at price, enabling Show saved amount displays a savings label in the product grid. You can choose to show the savings as either a price or dollar amount or a percentage.
-
Product tiles
Product tiles, also referred to as the product grid, display products in a structured layout that highlights key details such as the product image, title, price, and labels. They appear in any section that features products, including collection pages and search results.
Force image size sets how product images are sized and shaped within the product grid. Select from the following options:
• Natural
• Square (1:1)
• Landscape (4:3)
• Portrait (2:3)
When Zoom image to fill space is enabled and the grid image size isn’t set to Natural, product images are zoomed in to fill the available space.
Hover to reveal second image enables a hover effect that displays the second product image when customers hover over the product tile.
When Enable quick shop feature is enabled, the quick shop or quick view button appears at the top right of the product image when you hover over it on desktop. Clicking this button opens a pop-up window displaying the product details, without navigating to the product page.
This feature isn’t available on mobile devices, as hover interactions aren’t supported. More details here.
Quick shop button text controls the text that appears on the quick shop button.
Color swatches
Enable color swatches adds color swatches to product tiles when available. Learn how to set up color swatches here.
-
Cart
Refer to this article for more information: Motion: Cart types
-
Social media
Account links
Enter your social media URLs here to show social media buttons across supported sections.
The theme supports these social media icons:
• Facebook
• X
• Pinterest
• Instagram
• Snapchat
• TikTok
• Tumblr
• LinkedIn
• YouTube
• Vimeo
Social icons below the logo in the footer section Sharing options
Choose which sharing options are displayed on product pages and blog posts.
You can enable the following:
• Share on Facebook
• Tweet on X
• Pin on Pinterest
Social sharing buttons displayed at the bottom of the blog post -
Favicon
Use this setting to upload a favicon image, which appears in the browser tab and search results to represent your website.
For best results, upload a PNG favicon sized at 32 × 32 pixels.
-
Search
Enable Search to display the search icon in the header. Enable Predictive search to show suggestions and autocomplete results as customers enter a text in the search bar.
Use Shopify’s Search & Discovery app to manage advanced search settings and unlock additional features for your store’s search experience.
-
Extras
Turn on Show breadcrumbs to display a breadcrumb trail above your page content.
Enabling Show collections page in breadcrumb list adds the collections list page link to the breadcrumb trail on collection pages and product pages viewed from a collection.
Text direction allows you to set the overall text flow of your site to either left to right or right to left.
-
Custom CSS
Add your own CSS in the Custom CSS section to make small design adjustments without directly editing the theme code.
Please keep in mind that this section is intended for users with basic HTML and CSS knowledge. If you’re not comfortable with coding, we recommend working with a Shopify Expert for assistance.
-
Theme style
Each theme provides pre-designed style presets that combine fonts, colors, and other design settings to help you customize your store.
Motion offers three theme styles: Motion, Satchel, and Memo. Learn more about theme styles here.