Adjust Font Sizes – Label
Adjust Font Sizes – Label
Advanced
This is an advanced customization. It requires editing theme code and is not supported by Switch Themes or Shopify. We recommend hiring an expert if you’re not comfortable editing Liquid, HTML, CSS and Javascript. Always make backups before customizing the theme.
Label defines font sizes with SASS variables. Changing the value of a font-size variable will affect multiple elements, resulting in a more consistent look throughout the store.
Method 1 – Adjusting SASS variables
You will find these variables around line 525, in a section called “Default Settings.”
You can adjust font sizes by changing the pixel values of the variables. For example, to change all elements that use the $standardTitleFontSizeSingle element (including the “Featured Product” section on the home page) from 44px to 28px, change the variable on line 546:
Method 2 – Adjusting individual elements’ font sizes
You can also add adjust an individual element’s font size directly by over-riding its CSS rules. First find the element’s CSS selector using your browser’s development tools’ "Inspect Element" functionality. Then, find its CSS rule in the stylesheet.
Copy the CSS selector and paste it at the end of the theme.scss.liquid file, giving it a new font-size value.
For example, to change the font size of the title of the “Featured Product” homepage section to 36px, you would write:
template-index section.single-product .single-product-content h3.standard-single a,
.template-index section.single-product .single-product-content .standard-single.h3 a {
font-size: 36px;
}