Change Slideshow Text Size - Broadcast Theme

Technical Q&A
1

Hello!

Hoping someone can help me with the relevant code to enable sizing of both header and subtitle text on the hero slideshow (Broadcast Theme)

I am currently using this:

h1.hero__title.aos-init.aos-animate {

font-size: 24px !important;

font-weight: bolder !important;

which enables me to change only the header font across both platforms.

I want to be able to set separate font size values for desktop and on mobile, and for both the header and the subtitle.

Many thanks in advance,

Hannah

2

Hello @HannahK ,

Please share:

  • your store URL;
  • page URL with the issue you mention;
  • storefront password (if your store has one).

If the store is not online yet, please follow this quick tutorial to learn how to safely and temporarily share an offline/unpublished theme URL.

Kind regards,
Diego

1 Like
3

Hi @diego_ezfy

Many thanks for such a quick reply.

I am currently working in a draft version here: https://17kn1vr1bp9jira6-40524808341.shopifypreview.com

(looking to update the live site www.omnitau.co.uk)

The issue is on the homepage (slideshow banner at the top).

Many thanks

Hannah

4

@HannahK ,

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

You can change the values as per your wish:

30px = title size desktop
20px = subtitle size desktop

19px = title size mobile
18px = subtitle size mobile

Depending on your needs, if you require more freedom to customize your slideshow (font sizes, colors, etc), there are also alternative for slideshows sections like this.

Kind regards,
Diego

1 Like
5

Thank you @diego_ezfy !

Did exactly what I needed it to do. Very much appreciated.

Best wishes

Hannah