Help Center

Motion: Theme settings

Updated

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.

Motion theme settings.png

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

    color settings.png

    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.

    heading settings.png

    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.

    body text settings.png

    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

    navigation settings.png

    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

    Icons settings.png

    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

    Page animation.png

    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

    Section animation.png

    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

    Image animations.png

    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

    Other animations.png

    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.

    products settings.png

    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.

    Motion savings example.png

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

    product tiles or product grid.png

    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.

    quick view in Motion.gif

    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.

    social media links.png

    The theme supports these social media icons:

    • Facebook

    • X

    • Pinterest

    • Instagram

    • Snapchat

    • TikTok

    • Tumblr

    • LinkedIn

    • YouTube

    • Vimeo

    footer social icons.png
    Social icons below the logo in the footer section

    Sharing options

    Choose which sharing options are displayed on product pages and blog posts.

    sharing options.png

    You can enable the following:

    • Share on Facebook

    • Tweet on X

    • Pin on Pinterest

    social sharing icons example.png
    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.

    favicon.png

    For best results, upload a PNG favicon sized at 32 × 32 pixels.

  • Search

    search settings.png

    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

    extras settings.png

    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.

    breadcrumbs example.png

    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.

    custom css.png

    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 theme styles.png

    Motion offers three theme styles: Motion, Satchel, and Memo. Learn more about theme styles here.