Skip to main content

An introduction to... Theme settings

Updated over a week ago

Theme settings can be used to make global adjustments to your storefront. Accessed from the left-side menu in the Theme Editor, you can easily configure various design elements. For example, theme colors, fonts, buttons, and layouts. Any changes you make will impact all templates.

Theme Settings.png

Additionally, this space is a central hub for managing a range of theme-specific features including gift wrapping, pop-ups, social media links, breadcrumbs, animations, and the favicon.

In this guide, we'll provide you with an overview of each setting category. This will assist you in customizing your theme to align with your brand's preferred styling.


Colors

Within your Colors settings, you have complete control over the color of various storefront elements. You can customize general text, badges, headers, mobile navigation, buttons, color schemes, popups, the cart drawer, backgrounds, the footer, and everything in between.

Whether you decide to handpick your preferred colors, stick with the default settings, or input specific Hex codes - with this level of flexibility at your fingertips - you won't have any trouble finding colors that align with your brand!


Typography

In the Typography settings, you can configure the style of headings, body text, navigation, buttons, labels, logo text, and the announcement bar.

Every section has its own dedicated settings, allowing you to fine-tune elements where applicable, such as font style, size, capitalization, borders, and letter spacing.

Note: If your preferred fonts are not available in the theme's library, you can add custom fonts.


Cart

In your Cart settings, you can change the look and feel of your storefront's shopping cart.

Select your preferred cart presentation style: Choose between opening a sliding drawer or directing customers to a new page. Furthermore, customize the display by including or excluding elements like product vendor details, cart notes, gift messaging, and dynamic checkout buttons.


Products

Under Products, you will find settings for managing gift wrapping. Simply choose your designated gift wrap product and enter an accompanying label to display next to it. If you don't offer gift wrapping, just leave these settings blank.

Theme Settings - Products.png

Don't have gift wrapping set up yet? Click here to read our guide.


Product card

Product card settings allow you to customize the appearance of products on collection pages and collection-specific sections.

Edit options such as image aspect ratio, typography, badges, star ratings, color swatches, Quick shop button, and display styles.


Swatches

You can customise the style of your swatches and control option names here. To read more on Swatches please view our full article here: How to add colour Swatches


Back-to-top button

The Back-to-top button is the handy button that appears at the bottom of the page when you're scrolling down. When clicked, it conveniently sends you back to the top. The settings here let you control which templates the button appears on.


Search

Search settings can be used to enable your store's predictive search function to help customers navigate to relevant pages more easily. Furthermore, you have the option to showcase the vendor and price directly within the search results.

Screen_Shot_2022-05-04_at_4.26.49_PM.png

Social media

Within Social media settings, you have the option to connect your social media accounts to your theme.

Doing so will make it possible to display social media icons in your Announcement bar and/or Footer sections. Account fields that are left blank will not display an icon.

After adding your account links, head back to Sections in the Theme Editor to enable your social media icons. Icons can be added to the Announcement bar by activating a checkbox, or to the Footer bottom via a content block.

Announcement bar example:

Theme Settings - Social Media Icons.png

You also have the option to enable Facebook, X (Twitter), and Pinterest icons on your Product pages via a Social media block. This will allow customers to share products through their personal accounts. For example:

Theme Settings - Sharing Social Media.png
Theme Settings - Share Icons.png

Price

Contains a selector giving you the control of showing currency codes, for example, GBP, USD, EUR, etc.


Breadcrumbs

Breadcrumbs settings give you the flexibility to toggle breadcrumb navigation on and off. As a quick reminder, breadcrumbs create a trail at the top of the page, providing your customers with a visual guide of the path they followed to arrive at their current page.

Breadcrumbs can be particularly beneficial for customers arriving at your site via search engines or social media. They act as a handy reference as to where the page is located, in case they want to find it again later!

Example:

Theme Settings - Breadcrumbs Example.png

Popup

Popup settings allow you to enable a popup message on your store and manage its contents.

With a popup, you can effectively convey marketing messages to all store visitors. It's a powerful tool for promoting your social media networks, building up mailing list subscribers, and driving sales.

The popup will appear upon entering your site. Customers will need to manually close it before proceeding - ensuring that your messaging won't go unseen!

Screen_Shot_2022-05-04_at_11.28.45_AM.png

Verification Pop Up

This setting allows you to enable and customise an age verification pop up. These may be needed for age sensitive content such as alcohol, tobacco, and other age restricted products.

Screenshot 2025-01-28 at 15.20.08.png

Full customisation available from changing the background image & logo to keep in with your branding. The wording of the Message, question, button text and a denial/refusal message.

Page & button colours are also both customisable.


Favicon

A favicon is a small icon that represents your website (and brand) inside internet browser tabs and bookmark lists.

Utilize the Favicon settings to upload your favicon. For best results, upload a square image. The theme will automatically scale it to the optimal size of 32x32px.

Screen_Shot_2022-05-04_at_4.28.40_PM.png

Animations

Within Animations, you have the option to add a touch of style by infusing your storefront with subtle animations.

You can enable or disable fade animations for template sections, causing them to seamlessly fade in from the bottom upwards as your customers scroll through. Additionally, you can implement an eye-catching zoom effect when an image is initially displayed.

Screen_Shot_2022-05-04_at_4.29.02_PM.png

Custom CSS

Custom CSS allows you to apply custom styling to your entire online store. To learn more, click here to read Shopify's help guide.

Theme Settings - Custom CSS.png
Did this answer your question?