Shella Shopify Theme
  • User Manual
  • Shopify help
  • Get Started
    • How to create a new Template
    • How to add and edit a Page
    • How to build Metaobjects
    • How to find a handle
    • Filters logic
    • Pre-Order
  • Product variants
  • Header
    • Theme Blocks
  • Footer
    • Theme Blocks
  • Metafields
    • How to create custom filters
  • Theme Sections
    • Builder
      • Promo box (Banner)
      • Slick Slider
      • Revolution Slider
      • Instagram
      • Product column
      • Custom HTML
      • Space for vertical menu
    • Spacer
    • Article carousel
    • Brand carousel
    • Product carousel
    • Review carousel
    • Contact form
    • FAQs
    • Gallery
    • Information line
    • Search form
    • Subscription form
    • Brands
    • Collections
    • Lookbook
    • One product
    • Collection page heading
      • Theme Blocks
    • Collection banner builder
      • Theme Blocks
    • Ticker
  • Products
    • Product page
      • Theme blocks
    • Related product carousel
    • Usage information sidebar
  • Collections
    • Product grid
      • Current filters
      • Collections
      • Filters
      • Filter settings
      • Tags
      • Products
      • Custom HTML
      • Subscription
      • Promo box (Banner)
  • Collections list
  • Page categories
    • Policy page
    • Lookbook
      • Page
    • Gallery
      • Page
    • FAQs
      • Page
    • Contact
      • Page
    • Brands
      • Page
    • Password
      • Social media
    • Search
      • Current filters
      • Filters
      • Filter settings
      • Products
      • Custom HTML
      • Subscription
      • Promo box (Banner)
    • Quick view
  • Blogs
    • Theme Blocks
  • Blog posts
    • Theme Blocks
  • Theme settings
    • Quick Start
    • License
    • Logo and Favicon
    • Layout
    • Colors
    • Typography
    • Collection and Search page
    • Product -> General
    • Product -> Variants
    • Product -> Collection Page
    • Product Page and Quick View
    • Search
    • Currency
    • Cart
    • Wishlist and Compare
    • Payments
    • Social Media
    • News Subscription
    • Blog and Article Pages
    • Account
    • Reviews
    • Services
    • Apps and Language
    • Button, Input and Promo Box
    • Notifications
    • Pre-loader
    • Animations
    • Developer
    • Custom CSS
  • Theme features
  • Back to Help Center
Powered by GitBook
On this page
  • Body
  • Heading
  • Button & Input
  • Menu
  • Alternative font family

Was this helpful?

  1. Theme settings

Typography

In this section, you can change the font separately for Body, Heading, Button & Input, and Menu.

PreviousColorsNextCollection and Search page

Last updated 1 year ago

Was this helpful?

Theme settings -> Typography

Body

In this section, you can change the font of the body’s content by choosing the one you like from the “Base font family” list:

If you want to choose a different font for headings, buttons, inputs, or menu, disable the option “Apply font to all elements ignoring everything except alternate font”:

In the dropdown list “Load additional style”, you can choose an additional style for the font family: Bold, Italic, Bold & italic, Bold italic. Choose “None” if you do not want to apply any style.

On the “Base font size” scale from 10 to 60 px, you can choose the size of the base font.

Heading

Here you can customize the font for the headings in your store. In the “Font family”, you can change the font of all your headings:

In the dropdown list “Load additional style”, you can choose an additional style for the font family: Bold, Italic, Bold & italic, Bold italic. Choose “None” if you do not want to apply any style.

On the “Promo box large text size, h1” and “Promo box text size, h2” scales from 10 to 100 px you can change the size of the text in banners.

We chose the Type #1 v1 (Text over the image) for the Promo box (Banner) in the "Layout" block. And changed the h1 to 44 px. And this is what we have got:

And for this example, we chose the Type #1 v17 for the Promo box (Banner) in the "Layout" block:

On the “Page title size, h3” scale from 10 to 60 px, you can change the size of the title on pages:

On the “Section title size, h4” scale from 10 to 60 px, you can change the size of the section’s title on any page:

On the “Menus title size, h5” scale from 10 to 60 px you can change the size of the menu’s title on any page:

On the “Highlighted text size, h6” scale from 10 to 60 px you can change the size of the product title and product type in collections:

Button & Input

In the “Button font family”, you can change the font of the buttons:

On the “Button font size” scale from 10 to 60 px, you can change the size of the button text. On the “Input font size” scale from 10 to 60 px, you can change the size of the input, e.g.: placeholder’s text:

Menu

In this section, you can change the font of the menu by simply selecting the proper one from the list in the “Font family”:

On the “First level font size” scale from 10 to 60 px, you can change the size of the menu text on the first level:

On the “List font size” scale from 10 to 60 px, you can change the size of the font in the menu list:

On the “Title font size” scale from 10 to 60 px, you can change the size of the font in the titles of the menu:

On the “Mobile menu font size” scale from 10 to 60 px, you can change the menu font size for the mobile version.

Alternative font family

In this section, you can add the class 'ff-alternative' to any element to apply this font family.

You can change the font of the element by choosing the one you like from the “Font family” list.

In the dropdown list “Load additional style”, you can choose an additional style for the font family: Bold, Italic, Bold & italic, Bold italic. Choose “None” if you do not want to apply any style.