Customizing Your Store Fonts in Shopper App

The Fonts module in Shopper App allows you to customize typography across your store’s app pages, helping you maintain brand consistency and improve content readability.

In the App Design Editor, you can define primary and secondary fonts and fine-tune font styles for key content areas, including titles, product names, prices, and body text. All supported fonts are sourced from Google Fonts, ensuring broad compatibility and reliable display across devices.

In this article, you’ll learn where to find font settings in Shopper App and how to configure fonts for different content types. You’ll also understand how to preview, save, and publish your changes so they take effect across your store’s app.

Fonts Settings Overview and Access

All font-related settings for your store’s app are managed in the Fonts section of the App Design Editor. To access font settings:

1. From your SHOPLINE admin panel, go to Channels > Shopper App > App Design, then click Design.

2. In the left-side panel of the App Design Editor, click Fonts.

   

In this section, you can configure typography for different content areas across your app. The available settings are organized into the following categories:

• Fonts: Set the primary and secondary fonts used throughout your app.
• Title: Customize font styles for headings at different levels.
• Product title: Adjust typography for product names.
• Price: Define how product prices are displayed.
• Body: Configure font styles for general text content.

Shopper App uses a primary font and a secondary font as the base typography for your app. These font families are selected and managed exclusively in the Fonts section.

In other categories, such as Title, Product title, Price, and Body, you can choose whether to apply the primary or secondary font defined in the Fonts section and fine-tune how it appears. Available adjustments include font style, font size, uppercase settings, and line height.

Setting Up Primary and Secondary Fonts

In the Fonts section, you define the base typography used across your store’s app by setting a primary font and a secondary font. These fonts serve as the foundation for other font settings in Shopper App.

Each font includes two parts:

• Preferred font: The font applied first 
• Fallback font: A backup font used automatically when the preferred font doesn’t support certain characters

Configuring Primary and Secondary Fonts

To configure the primary or secondary font:

1. In the Fonts section, locate Primary font or Secondary font.

2. Under Preferred font, click Reselect, then choose a font from Google Fonts.

   

3. Under Fallback font, click Reselect, then select a fallback font to ensure text remains readable when unsupported characters appear.

   

4. (Optional) Click Reset to default to restore the default font settings.

5. Preview the effect of the font changes in the preview panel on the right. Then, click Save to keep the settings or Publish to apply them immediately.

    

How These Fonts Are Used

The primary and secondary fonts defined here do not apply styles on their own. Instead, they are referenced in other font categories—such as Title, Product title, Price, and Body—where you can choose which font to use and adjust details like font size, weight, casing, and line height.

Setting Up Title Fonts Across Store Pages

The Title section allows you to customize typography for headings displayed across your store’s app, such as page titles and section titles. You can configure font styles separately for different heading levels.

Available Heading Levels

Shopper App supports the following heading levels across different pages:

• Heading 1: Component titles on the Home page and Custom pages
• Heading 2: Component titles on the Product details page and Cart page
• Heading 3: Section titles and review titles on the Product details page
• Heading 4: Attribute titles on the Product details page

Each heading level can be customized independently.

Setting Up Title Fonts

To configure title fonts:

1. In the Fonts section of the App Design Editor, click Title.

2. Under Fonts, select whether to use the Primary font or Secondary font.

   

3. Locate the heading level you want to customize (Heading 1–Heading 4).

4. Adjust the following settings as needed:

   • Style: Choose the font weight (for example, Regular 400).
   • Uppercase: Enable this option to display text in uppercase.
   • Font size: Drag the slider or enter a value to set the font size.
   • Default line height: Enable to use the default line height, or disable to customize it.

   

5. Repeat the steps above for other heading levels if needed.
6. Preview the effect of the changes in the preview panel on the right.
7. Click Save to keep the settings or Publish to apply them immediately.

Setting Up Product Title Fonts for the Product List Page

The Product title section lets you customize how product names are displayed in your store’s app. These settings apply to product titles shown on the product list page.

To configure product title fonts:

1. In the Fonts panel of the App Design Editor, click Product title.

2. Under Fonts, choose whether to apply the Primary font or Secondary font.

   

3. Under Product title (Product list page), adjust the following settings:

   • Style: Select the font weight (for example, Regular 400).
   • Font size: Drag the slider or enter a value to set the font size.
   • Default line height: Enable to use the default line height, or disable to customize it.

   

4. Preview the effect of the font changes in the preview panel on the right.
5. Click Save to keep the settings or Publish to apply them immediately.

Setting Up Price Fonts for the Product List Page

The Price section allows you to customize how product prices are displayed in your store’s app. These settings apply to prices shown on the product list page, including the original price, sale price, and member price.

To configure price fonts:

1. In the Fonts panel of the App Design Editor, click Price.

2. Under Fonts, choose whether to apply the Primary font or Secondary font.

   

3. Under List price (Product list page), adjust the following settings:

   • Style: Select the font weight (for example, Regular 400).
   • Font size: Drag the slider or enter a value to set the font size.

   

4. Under Strikethrough price (Product list page), adjust:

   • Style: Select the font weight.
   • Font size: Set the font size for the strikethrough price.

   

5. Preview the effect of the price font changes in the preview panel on the right.
6. Click Save to keep the settings or Publish to apply them immediately.

Setting Up Body Text Fonts

The Body section lets you customize typography for general text content across your store’s app, such as item names, descriptions, announcements, and supporting information.

Available Body Text Types

Shopper App supports three body text sizes:

• Body – large: Item names and category titles
• Body – regular: Descriptive text, including announcements, summaries, promotions, and reviews
• Body – small: Meta information, time, status, and related notes

Each body text type can be configured independently.

Configuring Body Text Styles

To configure body text fonts:

1. In the Fonts panel of the App Design Editor, click Body.

2. Under Fonts, choose whether to apply the Primary font or Secondary font.

   

3. For each body text type (Body – large, Body – regular, or Body – small), adjust the following settings:

   • Style: Select the font weight (for example, Regular 400).
   • Font size: Drag the slider or enter a value to set the font size.
   • Default line height: Enable to use the default line height, or disable to customize it.

   

4. Repeat the steps above for other body text types as needed.
5. Preview the effect of the changes in the preview panel on the right.
6. Click Save to keep the settings or Publish to apply them immediately.

Notes and Best Practices

• Define fonts before styling text: Set your primary and secondary fonts in the Fonts section first, then adjust styles in Title, Product title, Price, and Body to ensure consistent typography.
• Use primary and secondary fonts intentionally: Apply the primary font to main content and the secondary font to supporting text to create a clear visual hierarchy.
• Preview changes before publishing: Always review the visual effect in the preview panel to make sure text remains readable and consistent across different pages.
• Choose appropriate font sizes and line height: Avoid overly small font sizes or tight line spacing, especially for body text, to maintain readability on mobile devices.
• Enable fallback fonts for multilingual content: Keep fallback fonts enabled to ensure characters not supported by the preferred font (such as Chinese, Japanese, or Arabic) are displayed correctly.
• Remember to publish your changes: Changes are not visible to customers until you click Publish.