Change the font size of one word in the header

[BSS-Commerce]

Hi @msjogren1

We would like to suggest to you how to break the line of the title and adjust the font without changing the width of the header. Please follow these steps:

• First, go to Themes → Edit code:


• Next, go to the Sections folder → select the header.liquid file. Here, you can replace the code:

{{ shop.name }}

into:

   LONG TIME
   FRIEND
   DISCOUNT

(Here, we code based on the name of your current store, you can change it later if you want)

After you replaced the code, go to the Assets folder → select the base.css file. Here, you add this code at the end of the file:

.header__heading-title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

.header__heading-link .h3 {
  font-size: calc(var(--font-heading-scale) * 1.4rem);
  line-height: 1;
  color: rgba(var(--color-foreground), 0.75);
}

• (To make the font size of the text smaller, adjust the number 1.4 in the line of code "font-size: calc(var(–font-heading-scale) * 1.4rem);").

• Your store will look like this:

We hope that it will work for you.