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

Store Design
, ,

Topic summary

A user is attempting to add line breaks after checkmark symbols (:check_mark:) in the subtitle of their website’s video banner header using the Refresh Theme 13.0.1. The checkmarks currently appear squished on one line instead of separated.

Site Details:

  • Store URL: Www.IsoAlpha.com (not password protected)
  • Theme: Refresh Theme 13.0.1
  • Issue location: Main header subtitle in video banner section

Proposed Solutions:

  1. Non-breaking spaces workaround - Add multiple " " entities after specific text (“function” and “focus”) until desired spacing is achieved. This is described as not clean but functional since the rich text element doesn’t accept standard <br> tags or custom classes/IDs.

  2. JavaScript solution - Add custom code to global.js that splits the subtitle text at checkmarks and rejoins with line breaks (\n). A code snippet was provided that targets the specific banner element and processes the text programmatically.

Status: The discussion remains open with two different technical approaches offered but no confirmation of implementation or resolution from the original poster.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

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
Benjer187_0-1714512236516.png961×260 287 KB

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!

2

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

3

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

4

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

5

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
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 " " after “function” text and again after “focus” and add as many " " 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

tag so that we can achieve this with css, or you can directly add the
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

6

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
image.png1919×861 306 KB

Hope this can help you.

Kind regards

1 Like