How to Change Capital Letters on Featured Collection and Collection List Headings in Shopify

By Tony Ng.
December 1st, 2024

How to Change Capital Letters on Featured Collection and Collection List Headings in Shopify?

In the vibrant world of eCommerce, first impressions are everything. One aspect that significantly contributes to this initial impact is the way your Shopify store displays its headings, especially on the 'Featured Collection' and 'Collection List'. A common issue many Shopify users face is wanting to change the capitalized text of these headings to better match their chosen font style. This guide will walk you through identifying and solving this challenge.

Understanding the Problem: Capitalization in Headings

When setting up your Shopify store, you may find that your theme automatically transforms the text of certain headings to uppercase. While this can create a bold and uniform look, it may not complement specific fonts, such as decorative scripts, which may appear unwieldy when fully capitalized.

Why Do Themes Use Capital Letters?

Many Shopify themes employ uppercase styling for headings to enhance visibility and consistency across the site. The choice of typography can affect readability and aesthetics, making a store's design look either polished or awkward.

The Root of the Capitalization Issue

The issue often arises from a pre-set CSS rule in your theme. Specifically, a text-transform: uppercase; directive is applied to certain heading styles, overriding any manually-entered text casing.

Why Fonts Matter: The Case for Lowercase

Choosing a font is more than just a design decision; it's a branding statement. A font like "Pinyon Script" reflects elegance and classic style, which may lose its charm when forced into capital letters.

Solutions: How to Customize Your Shopify Headings

Now, let’s dive into solving the uppercase issue. The solution involves tweaking CSS within your theme's code. Follow these steps to regain control over your heading text styling.

Step 1: Access Your Theme Code

Log into Shopify Admin: Navigate to your Shopify admin page.
Go to Themes: On the left sidebar, select Online Store > Themes.
Customize Your Theme: Click on the Customize button next to the desired theme.

Step 2: Edit the SCSS or CSS

Edit Code: Within the customization screen, locate and click the Actions dropdown, then select Edit Code.
Find the CSS File: Look for theme.scss.liquid or a similarly named CSS file under the Assets directory.

Step 3: Modify the CSS

Locate the Style Rule: Use the search function (often CTRL+F) within the file to find the h2 or specific classes controlling your collection headings.
Change the Text Transform: Locate the rule text-transform: uppercase; and change it to text-transform: none; or text-transform: lowercase; depending on your preference.
Save Changes: Ensure to save your changes and preview your store.

Step 4: Overcome Additional Constraints

If the changes don't apply, some heading styles might be hardcoded. Return to the customizable Home Page sections, and manually input your desired text in the intended casing.

Alternate Methods to Update Headings

Using Custom CSS

You can add custom CSS to override theme settings:

Use Advanced Options: Navigate to the Theme Editor and inject custom CSS.
Apply New Styles: Add a new CSS rule for headings:
```
.your-class {
  text-transform: lowercase !important;
}
```
Ensure you use the correct class or element identifier.

Consider New Fonts or Styles

If persistence fails, consider testing alternative fonts within the theme that better handle capitalization.

Conclusion: Your Store, Your Style

Store aesthetics are crucial for branding, and having the freedom to present your typography as you envision can enhance your store's appeal. With the steps provided, transforming your Shopify collection headings is achievable, granting you more stylistic control.