Change the font size of one word in the header

msjogren1
New Member
10 0 0

hi - i am wondering if it's possible to make a part of the store name that appears in the header a different size font than the rest. 

 

for example 

 

christmas

sweater (smaller)

party 

 

 

i already used the following code to break up the title onto different lines

 

.page-width {max-width: 600px;}

Replies 6 (6)

PageFly-Victor
Shopify Partner
7865 1785 3066

Hi @msjogren1 ,

Yes, it is possible to use different font sizes for different parts of a store name that appears in the header. One way to achieve this is by using HTML and CSS.

To make it easier, Could you please share URL and your store password if it enabled? So that we can help you.
Thank you.

msjogren1
New Member
10 0 0

https://longtimefrienddiscount.myshopify.com/

pw: sahmoh

 

i actually can see that the code i thought was working to break the title up onto different lines is making it so the home/catalog/contact links on the left and the cart/search icons on the right are coming into the center of the screen as opposed to staying at the edge of the screen left and right.  so if you have code that creates a line break between the words in the store name and also code that allows me to make a specific word in the store name a smaller size, that is what im looking for. 

 

thanks for your help!

BSS-Commerce
Shopify Expert
3477 461 519

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:

view (54).png

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

<span class="h2">{{ shop.name }}</span>

into:

<div class="header__heading-title">
   <span class="h2">LONG TIME</span>
   <span class="h2 h3">FRIEND</span>
   <span class="h2">DISCOUNT</span>
</div>

(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:

view (55).png

We hope that it will work for you.

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

msjogren1
New Member
10 0 0

hi there!  sorry i dropped off, but now i'm back to getting our site up. thanks so much for these instructions they were very easy to follow. i did each step but i'm not getting the same results unfortunately.  are you able to take a look and see why? 

 

https://73ueyzv25rqiyeb6-72955101459.shopifypreview.com

GemPages
Shopify Partner
5589 1261 1218

Hello @goldschdr 

 

To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?

 

Thank you and hope to hear from you.
Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

BSS-Commerce
Shopify Expert
3477 461 519

Hi @msjogren1 

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development