How to Change CSS Text Size in Shopify

What is CSS Text Size in Shopify?

In CSS, the property that controls text size is font-size.

You can apply it sitewide (all headings or body text) through Shopify’s Theme Editor. Alternatively, just apply it to specific elements (like product titles or menu items) with custom CSS.

If you use a third-party page builder like GemPages, you can control text size visually without coding in the app’s editor.

How to Change a Text Size for Your Shopify Pages?

Method 1: Using Shopify Theme Editor (No Code)

The simplest way to adjust font sizes across your store is through the Theme Editor.

Follow these steps:

• From your Shopify Admin, go to Online Store > Themes.
• Find your active theme and click Customize.

• In the left sidebar, select Theme settings > Typography.
• Adjust the Font size scale for headings and body text.

This change applies sitewide and is typically represented as a percentage (100% = default).

Method 2: Using CSS (Custom Code)

For more granular control over specific elements, you can edit your theme’s CSS.

Follow these steps:

• From Shopify Admin, go to Online Store > Themes.
• Find your active theme, and click the three-dot icon > Edit Code.

• In the Assets folder, locate your CSS file (e.g., theme.css, base.css, or theme.liquid). 

• Scroll to the bottom and add your custom CSS rules.

Examples:

• Save changes and clear your cache to view the updates live.

Change Your Text Size Using GemPages

If you prefer a visual, no-code solution, GemPages makes it easy to adjust text size directly in the editor.

Step 1: From your Shopify Admin, navigate to the GemPages Builder app > Pages. Click on your page on which you want to change the text size to open the GemPages Editor.

Step 2: Once you locate the editor, click on the text to reveal its settings panel.

Step 3: Under the Settings tab, scroll down to the Text style section.

Step 4: Locate the Size field and adjust the text size as you prefer. Also, you can change the text to bold, italic, or underlined and further customize it.

Step 5: Save your updates and preview the page before publishing to check the result.

Best Practices for Setting CSS Text Size

• Use responsive units: Prefer rem or em over px for scalable text across devices.
• Maintain hierarchy: Ensure headings are larger than body text for clarity.
• Check readability: Test your changes on both desktop and mobile.

FAQs

1. Should I use px, em, or rem for text size?

The em and rem text sizes are recommended for better responsiveness.

2. Will changing text size affect SEO?

Not directly. But better readability improves user experience, which can positively influence SEO.

3. Can I preview changes before publishing?

Yes. Both Shopify Theme Editor and GemPages allow live previews before publishing the changes in your storefront.