Beloria Documentation
  • Welcome
  • Installation
  • Header
  • Footer
  • Shopify apps
    • Boostheme Toolkit app
    • Metafields Guru
  • Static sections
    • Powerful Megamenu
      • Powerful Megamenu(version tf-3.5 or older )
    • Powerful Mobile Megamenu
      • Powerful Mobile Megamenu ( version tf-3.5 or older )
    • Product pages
      • Main product section
      • Main product - Reviews
      • Main product - Tabs
      • Main product - Upsell
      • Main product - Cross-sell
      • Old version ( tf-3.5 or older )
    • Collection pages
      • Version tf-3.5 or older
    • Blog pages
    • Posts
    • Cart page
      • Cross-sell products Section
    • Search result page
    • FAQ
  • Dynamic sections
    • Collection and product
      • Collection filter
      • Collection list
      • Flexible collection list
      • Powerful product block
      • Powerful product block 2
      • Powerful product columns
      • Product single deal
      • Simple product slider
      • Vedette product ( single product )
    • Banner & image
      • Banner creator pro
      • Layer banner
      • Information list
      • Instagram slider
      • Logo list
      • Banner & quotes
    • Text
      • Custom HTML
      • Testimonials
      • Text list
    • Marketing & others
      • Featured blog posts
      • Newsletter
      • Contact us
      • Map
      • Loox widget
      • About us 1
      • About us 2
      • About us 3
  • Theme settings
    • General
    • Collections list page
    • Typography
    • Breadcrumbs
    • Multiple languages
    • Colors & Font sizes
    • Social media
    • Favicon
    • Product settings
    • Product labels
    • Currency
    • Cart
    • Shipping rates calculator
    • Upsell products
    • Cross-sell ( recommendation ) products
    • Recently viewed products
    • Progressive web app
    • Sales notification
    • Search suggestion
    • Newsletter
    • Promotion bar
    • Cookie consent
  • For developer
  • Tips
  • Manage blocks in a section
  • Cross-sell ( recommendation ) rules
  • Change log
  • Upgrade to a new version
    • From versions older than tf-4.0
Powered by GitBook
On this page
  • Open Color & Font size settings.
  • Body
  • Rich text editor
  • Links
  • A. General style:
  • B. Alternative style:
  • Main navigation
  • A. Top item:
  • B. Dropdown Title:
  • C. Dropdown Content:
  • Vertical navigation
  • Section title
  • Section subtitle
  • Product title
  • Price
  • Compare price
  • Color swatch
  • Item vendor
  • Cart button
  • Style 1 button
  • Style 2 button
  • Style 3 button
  • Tab title
  • Product page and Quick view popup
  • Input fields

Was this helpful?

  1. Theme settings

Colors & Font sizes

Open Color & Font size settings.

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme that you want to edit and click Customize.

  3. In the left-hand toolbar, click Theme settings.

  4. Click Color & Font sizes.

Body

  • Background color: set the page background for all pages.

  • Text color: pick a color for all texts on all pages.

  • Font size: adjust the color for all texts on all pages.

Some texts in some sections or special elements(price, section title,...) have their own color, font size settings.

Rich text editor

Configure font size for the text in the product description, article content, static page content. You can adjust the font size for general text, H1, H2, H3, H4, H5, H6 tags.

Links

Configure color for anchors tags.

A. General style:

  • Text color: pick a color for anchor tags in the general state.

  • Text color hover: pick a color for anchor tags when users hover the mouse or click on it.

B. Alternative style:

Configure color for anchor tags that have the HTML class: alternative.

  • Text color: pick a color for anchor tags in the general state.

  • Text color hover: pick a color for anchor tags when users hover the mouse or click on it.

Main navigation

Configure color and font size for the horizontal navigation.

A. Top item:

By default, the top item color is configured at header style settings ( depend on the header style you are using ). The below content will show details of header style settings.

  • Color hover: pick a color for anchor tags when users hover the mouse on it.

  • Font size: adjust the size of the text.

B. Dropdown Title:

A dropdown title is the title of a dropdown column.

  • Font size: adjust the size of the text.

C. Dropdown Content:

  • Font size: adjust the size of the texts in the dropdown content.

  • Background color: pick a color for the dropdown content.

Vertical navigation

Configure color for the trigger bar, top-level item, background color of the dropdown content.

You can go to the Colors & Font sizes > Header Style 1 to config:

You can go to the Colors & Font sizes > Header Style 2 to config:

There are 3 areas in header style 2: top, middle, and bottom.

You can go to the Colors & Font sizes > Header Style 3 to config:

You can go to the Colors & Font sizes > Header Style 4 to config:

There are 2 areas on header style 4: top, and bottom.

You can go to the Colors & Font sizes > Header Style 5 to config:

There are 2 areas: top, bottom & middle.

You can go to the Colors & Font sizes > Header Style 6 to config:

You can go to the Colors & Font sizes > Header Style 7 to config:

You can go to the Colors & Font sizes > Header Style 8 to config:

There are 3 areas on header style 8: top, bottom, and search.

You can go to the Colors & Font sizes > Header Style 9 to config:

There are 2 areas on header style 9: top, and bottom.

You can go to the Colors & Font sizes > Header Style 10 to config:

You can go to the Colors & Font sizes > Mobile Header to config:

Section title

You can go to the Colors & Font sizes > Section title to config:

Section subtitle

You can go to the Colors & Font sizes > Section subtitle to config:

Product title

You can go to the Colors & Font sizes > Product title to config:

Price

You can go to the Colors & Font sizes > Price to config:

Compare price

You can go to the Colors & Font sizes > Compare price to config:

Color swatch

You can go to the Colors & Font sizes > Color swatch to config:

Item vendor

You can go to the Colors & Font sizes > Item vendor to config:

Cart button

You can go to the Colors & Font sizes > Cart button to config:

Style 1 button

This config is used in the Product grid (Add to cart button), Banner Creator Pro, Flexible collection list, Contact page, and some of the static pages which the same structure. You can go to the Colors & Font sizes > Style 1 button to config:

Style 2 button

This config is used in the Banner Creator Pro, Flexible collection list, and some of the static pages which the same structure. You can go to the Colors & Font sizes > Style 2 button to config:

Style 3 button

This config is used in the Product Grid (Compare, Wishlist, Quickview buttons), Banner Creator Pro, Flexible collection list, and some of the static pages which the same structure. You can go to the Colors & Font sizes > Style 3 button to config:

Tab title

You can go to the Colors & Font sizes > Tab title to config:

This config is used in the cart sidebar, mobile menu, and filter sidebar background. You can go to the Colors & Font sizes > Sidebar canvas to config:

Product page and Quick view popup

You can go to the Colors & Font sizes > Product page and Quick view popup to config:

You can go to the Colors & Font sizes > Footer to config:

Input fields

This config is used in all input fields. You can go to the Colors & Font sizes > Input Fields to config:

PreviousMultiple languagesNextSocial media

Last updated 4 years ago

Was this helpful?