Change Slideshow Header Font Size - Prestige Theme

Solved
lauren40
Tourist
8 2 4

Hi,

I'm trying to change the font size & style of the slideshow header on the Prestige theme.

Store: sprucestreetdecor.com

PW: owhays

Thanks in advance!

Accepted Solutions (2)

Accepted Solutions
diego_ezfy
Shopify Partner
2744 513 695

This is an accepted solution.

@lauren40,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>
.SectionHeader__SubHeading{
    font-size: 10px !important;
    color: #000000 !important;
}

.SectionHeader__Heading{
    font-size: 20px !important;
    color: #cccccc !important;
}

@media (max-width: 749px){
    .SectionHeader__SubHeading{
    font-size: 8px !important;
}

.SectionHeader__Heading{
    font-size: 18px !important;
}

}
</style>


You can change the values as per your wish:

10px = font size of top text on desktop
20px = font size of title on desktop

8px = font size of top text on mobile
18px = font size of title on mobile

#000000 = top text color
#cccccc = title color


Kind regards,
Diego

View solution in original post

lauren40
Tourist
8 2 4

This is an accepted solution.

I ended up piecing together another solution that doesn't change all the headers, just the slideshow ones.  Posting to hopefully save others some time because I couldn't find a solution that worked anywhere.  Go to edit code > Assets >Theme.css file and paste this at the bottom to change the font size. Make sure to save before you preview. 🙂

/*Added to change slideshow header size desktop*/
.Slideshow__Content h2.SectionHeader__Heading.SectionHeader__Heading--emphasize.Heading.u-h1 {
font-size: 60px !important;
}
.Slideshow__Content h3.SectionHeader__SubHeading.Heading.u-h6{
font-size: 20px !important;
}
/*End added code*/

/*Added to change slideshow header size mobile*/
@media screen and (max-width: 425px) {
.Slideshow__Content h2.SectionHeader__Heading.SectionHeader__Heading--emphasize.Heading.u-h1 {
font-size: 30px !important;
}
.Slideshow__Content h3.SectionHeader__SubHeading.Heading.u-h6{
font-size: 12px !important;
}
}
/*End added code*/

View solution in original post

Replies 5 (5)
Nick
Community Moderator
Community Moderator
4510 433 981

Hi @lauren40,

Great pick for the Prestige theme, I also use it for my store and love it! In saying that though, I am by no means a theme or code expert and for fixes like this with my theme I've always referred to asking the Maestrooo team directly for help with it. They are very good, helpful and know their own theme since they created and developed it. 

You can contact Maestrooo directly via their website here

Nick | Community Moderator @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

diego_ezfy
Shopify Partner
2744 513 695

This is an accepted solution.

@lauren40,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>
.SectionHeader__SubHeading{
    font-size: 10px !important;
    color: #000000 !important;
}

.SectionHeader__Heading{
    font-size: 20px !important;
    color: #cccccc !important;
}

@media (max-width: 749px){
    .SectionHeader__SubHeading{
    font-size: 8px !important;
}

.SectionHeader__Heading{
    font-size: 18px !important;
}

}
</style>


You can change the values as per your wish:

10px = font size of top text on desktop
20px = font size of title on desktop

8px = font size of top text on mobile
18px = font size of title on mobile

#000000 = top text color
#cccccc = title color


Kind regards,
Diego

lauren40
Tourist
8 2 4

@diego_ezfy 

You rock, thank you so much! Worked perfectly. 🙂

lauren40
Tourist
8 2 4

This is an accepted solution.

I ended up piecing together another solution that doesn't change all the headers, just the slideshow ones.  Posting to hopefully save others some time because I couldn't find a solution that worked anywhere.  Go to edit code > Assets >Theme.css file and paste this at the bottom to change the font size. Make sure to save before you preview. 🙂

/*Added to change slideshow header size desktop*/
.Slideshow__Content h2.SectionHeader__Heading.SectionHeader__Heading--emphasize.Heading.u-h1 {
font-size: 60px !important;
}
.Slideshow__Content h3.SectionHeader__SubHeading.Heading.u-h6{
font-size: 20px !important;
}
/*End added code*/

/*Added to change slideshow header size mobile*/
@media screen and (max-width: 425px) {
.Slideshow__Content h2.SectionHeader__Heading.SectionHeader__Heading--emphasize.Heading.u-h1 {
font-size: 30px !important;
}
.Slideshow__Content h3.SectionHeader__SubHeading.Heading.u-h6{
font-size: 12px !important;
}
}
/*End added code*/

kdps4206
New Member
1 0 0

It works well! Thank you so much 🙂