Solved

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

Benjer187
Visitor
3 0 0

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.

Benjer187_0-1714512236516.png

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!

 

Accepted Solution (1)

BSSTech-Venture
Shopify Expert
514 140 164

This is an 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:

image.png
 

Hope this can help you.

Kind regards

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

View solution in original post

Replies 5 (5)

sahilsharma9515
Shopify Partner
1010 124 189

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

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


Benjer187
Visitor
3 0 0

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

Benjer187
Visitor
3 0 0

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

sahilsharma9515
Shopify Partner
1010 124 189

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

 

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


BSSTech-Venture
Shopify Expert
514 140 164

This is an 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:

image.png
 

Hope this can help you.

Kind regards

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