Font size

Learn how to set the base font size for text rendered by the app on your storefront.

Bart Coppens avatar
Written by Bart Coppens
Updated over a week ago

Impact on Building blocks

Font sizes configured in Discount Ninja affect all building blocks. For example:

  • Strikethrough pricing

  • Product banner

  • Notification

  • Sticky bar

  • ...

Font size for strikethrough pricing

The font size for strikethrough pricing can be set in the menu Settings > Dynamic Pricing > Price format:

Discount Ninja allows you to manage the style (including font size) of the discounted price ($100 in the examples) and original price ($120 in the examples). You can manage the strikethrough pricing style separately for the price on the product page, collection page and (drawer) cart as shown on this overview page:

To change the font size of the product page, for example:

  • Go to the Product page tab

  • Use the override checkboxes to override the settings in the Shared settings tab

  • Set the font size you need:

Your theme's default font size

When Discount Ninja renders text on your storefront it assumes, by default, that the default font size of your storefront is 16px. All font sizes are relative to that default font size.

Change the default font size

If your theme uses a different default font size you'll find that, for example, when you configure a price to display with a font size of 18px, that it actually renders with a font size

that is smaller or larger than you expect.

If that is the case, you need to configure the default font size in the app. This can be done from the following menu: Settings > Dynamic Pricing > Theme configuration

Open the tab Font size:

To determine what the default font size is of your theme, you can:

  • open the home page of your storefront

  • right-click and choose Inspect

  • open the Elements section

  • select the <html> element

  • in the sidebar, find the Computed tab

  • Find the font-size property

Did this answer your question?