Help Center

Impulse: Theme settings

Updated

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

Impulse theme settings.png

  • Colors

    Impulse 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

    • Price

    • Save price

    • Lines and borders

    • Buttons

    • Button text

    • Sale tags

    • Sale tag text

    • Cart dot

    • Image background

    • Image section background

    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 slideshows, video heroes, promo grids, and collection headers.

    • Text

    • Overlay

    • Overlay opacity

    • Text shadow amount

  • 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 and turn on Center headings to align them to 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. You can also enable Center text to align them to the center.

    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

    Extras

    extras settings.png

    Use Navigation font to choose whether the main navigation links use the body or heading font. Use Navigation size to adjust the font size, and enable Capitalize navigation to display the links in uppercase.

    Use Product grid font to choose whether the product grid text uses the body or heading font, and enable Capitalize product grid to display it in uppercase.

    The Collection tiles font setting lets you choose between the body or heading font for collection tiles, while Collection tiles size controls the font size.

    Buttons

    buttons setting.png

    The Style dropdown lets you update the look of buttons throughout the theme. Select from the following options:

    • Square

    • Slightly round

    • Round 

    • Angled

    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.

  • Products

    Apply design changes to product-related elements across the theme.

    products settings.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 or dollar amount or a percentage.

    Impulse savings example.png

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

  • 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

    When Enable quick shop feature is turned on, the quick shop or quick view button appears at the bottom 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 Impulse.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.

    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.

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

    Style lets you change the design of the collection grid. Choose from the following options:

    • Overlay

    • Overlaid with box

    • Below

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

    • Square (1:1)

    • Landscape (4:3)

    • Portrait (4:3)

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

    Text alignment adjusts the placement of the collection title on each collection tile.

    The Tint option lets you adjust the overlay color applied to the collection tiles. Use Tint opacity to control how transparent the tint color appears.

    Enable Add spacing to insert space between each collection block.

  • Cart

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

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

    Turn on Show vendor or Show price to display the vendor and price in predictive search results.

    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.

    When Disable zoom animations is turned on, the zoom animation is removed from image sections like the collection header and slideshow.

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

    Impulse theme styles.png

    Impulse includes three theme styles: Impulse, Dune, and Terrain. Learn more about theme styles here.

Related articles