customize font size in slideshow (CRAFT THEME)

[Apdesigns]

Hi, currently in my website on the home page I have a slideshow with three pictures on auto rotate, the problem is that when I want to write words on the slideshow picture my options are extremely limited, Shopify only allows a heading and a sub-heading and by both of them the font type and size is non customizable, I will attach a screenshot below where you can see that the words of the subheading are too small and very hard to read.

If someone can please provide me with a solution to this issue I would really appreciate it.

Thank you.

[Moeed]

Hey @Apdesigns 

Share your Store URL and Password if enabled.

Best,

Moeed

[Apdesigns]

I'd rather try to get a solution without sharing my personal store info

[Laza_Binaery]

Hi @Apdesigns 

You can edit the code and add a font size as a slider :

https://shopify.dev/docs/storefronts/themes/architecture/settings/input-settings#range

Also, you can just add some CSS to custom CSS settings for that section, just target the subheading and change the font size

https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

[GloboApps-Felix · Accepted solution]

Hi @Apdesigns,

Since the Craft theme doesn’t allow direct font-size customization for the slideshow text, you’ll need to add some custom CSS.
Step 1: Go to Customize in your Shopify admin and select the Slideshow section.
Step 2: Add the following CSS code to the Custom CSS area (Screenshot example: [link]), you can adjust the font size value as you like:

.banner__text.rte {
font-size: 20px;
}

After saving, your subheading font size should be larger and easier to read.

Let me know if you need help with adding the CSS or anything else!

Best,
Felix

[Apdesigns]

I inserted the custom css and it worked, and the font became bigger, the issue is that it's still very hard to read the sub-heading because I think it's a little opaque (see-through) I will attach a screenshot where you can see very clearly that the heading is very visible but the subheading is hard to read because it's a little see through even though it's the same font size.

If you can help me with this issue I would really appreciate it.

Thank you.

[GloboApps-Felix]

Glad to hear the font size update worked! To make the subheading easier to read, you just need to add the color property to your existing CSS.

Here’s the updated CSS you can use:

.banner__text.rte {
font-size: 20px;
color: #fff;
}

This will set the text color to white, improving the contrast and readability. You can adjust the color value if needed.

Let me know if you need any further help!

Best,
Felix

[Apdesigns]

Thank you it worked.

[Apdesigns]

Hi, I am attaching a image below of a design I created for a refer a friend program on my website, I am trying to find a way (probably has to be an app) to connect the refer a friend button to a link which will ask you for your email and your friend's email and then send a auto generated link to that person's inbox with a discount code for that person to use, can you please recommend the best and easiest way to do this.

Thank you.

[Apdesigns]

Just to clarify, I am looking for a program that doesn't need a widget, just that it gives me a link which I can connect to the button so that it asks the customer for the info it needs and then takes care of the rest