Noob question - Refresh Theme 13.0.1 - Line Breaks - SS Video Banner

[Benjer187]

Hello!

I'm trying to add a line break after each check mark in the main header sub title of my website. However, it's not letting me add a line break after each product benefit in the subtitle.

As you can see it's all squished on one line. 

I've looked at a few other similar threads but the suggested code implementations seem specific to their shopify sites. 

Any help offered would be wonderful!

[sahilsharma9515]

Hi @Benjer187 

Can you please provide your store URL and password as well if applicable, so that I can provide you solution that can work for your store.

Best regards

Sahil

[Benjer187]

Hey @sahilsharma9515, the url is Www.IsoAlpha.com and it’s not password protected. 

[Benjer187]

Hey @sahilsharma9515 are you still able to assist? Is there anything else you need?

[sahilsharma9515]

Hi @Benjer187 Actually it's the rich text that you are using, and we can't add any class or id to it and normal <br> tag will not work, but I have a work around if you are willing to use it. It's not clean, but right now it's the only way to do it, or else the another way is to do it with JS code.

Add "&nbsp;" after "function" text and again after "focus" and add as many "&nbsp;" until you will get the require result.

If you want a cleaner way to do it, then you need to copy the code of entire section and then add class, or id to the <p> tag so that we can achieve this with css, or you can directly add the <br> in the new section and show that section in the homepage.

Hopefully it makes sense to you, as it may sound confusing if you don't have the idea of coding.

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[BSSCommerce-HDL · Accepted solution]

Hi @Benjer187 

Please follow the instructions below.

Add the following JavaScript snippet to the global.js file in your theme:

const elementBssCustom = document.querySelector('.ab-banner-subtitle-template--17354548936935__ss_video_banner_aEg446');

const linesBssCustom = elementBssCustom.innerText.split('✔');

const processedLines = [];
linesBssCustom.forEach(function (line) {
	const trimmedLine = line.trim();
	if (trimmedLine !== '') {
		processedLines.push('✔' + trimmedLine);
	}
});

elementBssCustom.innerText = processedLines.join('\n');

Here is the result:

Hope this can help you.

Kind regards