Help Center

Expanse: Theme settings

Updated

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

theme settings.png

  • Colors

    In Expanse, many theme sections include a Color scheme setting that lets you control text and background colors. Color schemes help maintain a consistent, polished look across your storefront. You can customize each scheme and apply it anywhere a color scheme selector is available in the theme editor.

    Expanse includes nine preset color schemes that you can customize, and you can create additional schemes for a total of up to 21.

    Expanse color schemes.png

    Selecting a color scheme opens its editing options, where you can adjust the following:

    editing color scheme in Expanse.png

    Primary color controls the color of text and icons.

    Secondary color controls the background color used in the color scheme.

    Color defaults

    Use this section to manage color scheme settings for the following:

    color defaults.png

    Body sets the primary text color and background color applied throughout the theme.

    Buttons controls the text and background colors used for buttons.

    Sale tags lets you set the color of the sale labels displayed in the product grid for products with a compare-at price.

    Product tags allows you to control the color of the product tags or labels shown in the product grid. Learn how to set up product tags here.

    Price sets the primary color used for product prices.

    Save price sets the primary color used for the displayed savings amount.

    Textures

    Textures can be selected for the first three color schemes and will appear in the background of some sections.

    textures.png

  • 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. You can also enable Capitalize to display headings in uppercase.

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

    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 tags and labels

    • Product grid text

    • Header and footer menus

    • Most text elements throughout the theme

    Text direction allows you to set the overall text flow of your site to either left to right or right to left.

    text direction.png

  • Design

    General 

    These settings allow you to change the edge style of theme elements to either Square or Round.

    General.png

    The Edges setting applies to the following elements:

    • Collection filters

    • Product labels

    • Form fields

    • Some non–full-width sections

    Icons

    These settings adjust the style and appearance of icons used throughout the theme.

    icons settings.png

    Cart icon allows you to select the icon style displayed for the cart icon in the header. You can select between Bag, Minimal bag, or Cart.

    Weight controls the line thickness of the icons, allowing you to make them appear lighter or bolder.

    Edges lets you choose whether the icons use square or rounded edges.

  • Products

    Apply design adjustments related to products throughout the theme.

    product settings.png

    Enable Show cents as superscript to display the cents portion of product prices in a superscript format.

    superscript price example.png

    When a product has a compared-at price, enabling Show saved amount displays the savings next to the product price on both the product grid and the product page. You can choose to show the savings as either a price amount or a percentage.

    savings amount example.png

    Show vendor adds the vendor name below the product title in the product grid.

    vendor name example.png

    The Swatch size setting lets you control how large color swatches appear, from 30 to 80 px.

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

    When Enable quick view is turned on, the quick view (magnifying glass) button appears in the upper-right corner of the product image on hover in desktop view. Clicking this button opens a pop-up window displaying the product details, without navigating to the product page.

    Quick view in Expanse.gif

    This feature isn’t available on mobile devices, as hover interactions aren’t supported. More details here.

    When Enable quick add is activated, the quick add (plus) button appears in the upper-right corner of the product image on hover in desktop view. If the product has no variants, clicking the button adds the item directly to the cart.

    Quick add in Expanse.gif

    If a product has multiple variants, clicking the quick add button opens a modal where customers can choose their preferred variant before adding the item to the cart.

    Quick add with variants in Expanse.gif

    On mobile devices, the quick add button is always visible, allowing customers to easily add products to the cart.

    Mobile quick add button in Expanse.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.

    Color swatches

    Enable color swatches adds color swatches to the product grid, with the option to display them as Round or Square. Learn how to set up color swatches here.

    Design

    Product tile style allows you to adjust the overall look and style of product tiles. You can choose from the following options:

    • Simple

    • Grey round

    • Grey square

    • Thick grid

    • Thin grid

    Image breathing room controls the amount of space around the product image within the grid. You can choose a value from 0 to 20%.

    Recently viewed

    These settings apply to the Recently viewed section.

    Desktop products per row controls how many products appear in each row on desktop. You can choose between 2 and 5.

    Maximum products to show sets the total number of products displayed in the Recently viewed section. You can choose between 2 and 10.

  • Collection tiles

    The collection tile settings apply to the Collection list section, Collection list page, and Subcollections block in the collection page.

    Collection tiles settings in Expanse.png

    Collection tile style determines the size and shape of collection images displayed in the grid. You can choose between the following options: 

    • Circle (1:1)

    • Square (1:1)

    • Landscape (4:3)

    • Portrait (4:3)

    When Zoom image to fill space is enabled, collection images are zoomed in to fill the available space.

    The Image setting lets you choose whether the collection tile displays the collection’s featured image or the first product image from the collection.

    Image breathing room controls the amount of space around the collection image within the grid. You can choose a value from 0 to 20%.

  • Cart

    Refer to this article for more information: Expanse: 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

    social icons in footer.png
    Social icons 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

    sharing buttons example.png
    Sharing buttons displayed in the blog post sidebar

  • 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

    Enable Predictive search to show suggestions and autocomplete results as customers enter a text in the search bar.

    search.png

    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.

    breadcrumbs.png

    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

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

    theme styles in Expanse.png

    Expanse includes three theme styles: Expanse, Revive, and Spritz. Learn more about theme styles here.

Related articles