Customize Fonts & Text in Shopify Debut Theme

Table of Contents

1. Introduction
2. Limitations of the Shopify Debut Theme
   1. Fonts and Text Transforms
3. Changing Fonts and Text Transforms
   1. Accessing the Admin Dashboard
   2. Editing the Code
   3. Modifying the Config Setting Schema
   4. Adjusting Fonts in SCSS Liquid
   5. Customizing Header Tags
   6. Editing the Site Navigation
4. Testing and Finalizing the Changes
5. Conclusion

How to Customize Fonts and Text Transforms in the Shopify Debut Theme

The Shopify Debut theme offers a great starting point for creating an online store. However, it does come with some limitations, especially when it comes to fonts and text transforms. In this tutorial, we will walk you through the steps to change the font for headers, menus, and buttons, as well as remove the text transform settings that can be annoying for some design choices.

Introduction

The Shopify Debut theme is a popular choice for many online store owners due to its simplicity and versatility. However, it does have certain limitations when it comes to customizing fonts and text transforms. This can be frustrating for users who want more control over the appearance of their online store. In this tutorial, we will guide you through the process of changing fonts for headers, menus, and buttons, as well as removing the text transform settings.

Limitations of the Shopify Debut Theme

Fonts and Text Transforms

When using the Shopify Debut theme, you may come across limitations when it comes to selecting fonts for headers, menus, and buttons. Additionally, the theme applies a text transform style of uppercase to buttons and h2 headers by default. While this may work for some designs, it can be frustrating if you prefer a different style or want to match your brand's typography.

Changing Fonts and Text Transforms

To overcome the limitations of the Shopify Debut theme and customize fonts and text transforms, follow the steps outlined below.

Accessing the Admin Dashboard

First, log in to your Shopify account and access the admin dashboard for your online store. From the admin dashboard, navigate to the "Themes" section, where you can edit the code of your theme.

Editing the Code

Once you are in the "Themes" section of the admin dashboard, select the "Actions" dropdown menu for your live theme and choose the "Edit code" option. This will take you to the code editor where you can make changes to the theme files.

Modifying the Config Setting Schema

To change the fonts for headers, menus, and buttons, locate the file named "config/settings_schema.json" in the code editor. This file separates font settings for different elements of the theme.

Scroll down to find the section that specifies the font settings for headings and buttons. Copy the entire font setting for the desired font, such as "Pacifico," and paste it below. Make sure to adjust the font weight and variants based on the available options for the chosen font.

Save the changes and proceed to the next step.

Adjusting Fonts in SCSS Liquid

Next, navigate to the "assets" folder in the code editor and open the "theme.scss.liquid" file. This is where you can make modifications to the SCSS code that controls the theme's styles.

To remove text transform settings and change the font family for buttons, search for the class "BTN" and locate the lines where "text-transform: uppercase" and "font-family" are defined. Delete the "text-transform" line and change the "font-family" to "font stack body" for a consistent appearance throughout the theme.

To customize header tags, locate the "h2" section and remove the "text-transform: uppercase" line from the code. If desired, you can make further modifications to the font size or other properties for headers.

Editing the Site Navigation

To modify the font size and font family for the site navigation, search for the class "site-nav" in the code editor. Locate the line that defines the "font-size," and change it to "0.75" or adjust it as desired to achieve the desired size.

Additionally, change the "font-family" to "font stack header" to maintain a consistent typography style.

Testing and Finalizing the Changes

Once you have made the necessary modifications to the code, save the files and check your online store to see the changes in action. Navigate to the "Theme Settings" section in the admin dashboard and go to the "Typography" settings for headings and buttons. At the bottom of the settings, you should find the newly installed font and observe the desired appearance.

Ensure all the fonts and text transforms appear as expected on different pages and devices. Make any further adjustments as needed to achieve the desired result.

Conclusion

The Shopify Debut theme offers a solid foundation for creating an online store, but it does have some limitations when it comes to customization options for fonts and text transforms. By following the steps outlined in this tutorial, you can overcome these limitations and create a unique and appealing online store that aligns with your brand's typography preferences. Remember to test the changes thoroughly and make any necessary adjustments to achieve the desired look and feel.