Re: Product Title in two lines

How can I create a two-line product title without using br tag?

SeanAwethentic
Tourist
15 0 3

Hi,

 

Does anyone help me with 2 lines product title without giving a <br> tag?

<br> tag is not working for me as my breadcrumb shows in two lines when I am using the line break.

I am using a Themeforest theme.

 

Please help me.

 

Replies 6 (6)

KetanKumar
Shopify Partner
37585 3668 12152

@SeanAwethentic 

sorry for any issue please share store url so i will check and let you know 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
SeanAwethentic
Tourist
15 0 3

@KetanKumar 

Hi Ketan,

 

Thanks for your reply.

 

https://www.awethenticgallery.com/collections/paintings/products/a-man-with-two-swan-heads

 

As you can see in the above link, I have used a hyphen on the product page and then Artist's name comes below. If I remove this hyphen then the Artist's name will come along with the product name.

Also, in the breadcrumb right now everything is one line which is good.

 

 

https://www.awethenticgallery.com/collections/paintings/products/a-woman-away-with-fairies-by-cindy-...

 

If I give the <br> tag on the product title then the Artist's name will show in the second line but then the breadcrumb also shows two lines. Check the above link.

 

So what I need is product name and artist name in one line on breadcrumb and product name and artist name in two lines on the product page.

 

Can you help me please?

diego_ezfy
Shopify Partner
2971 571 922

@SeanAwethentic 

I'd need to see the actual issue to be able to offer help (if you could share an unpublished theme with the issue I can take a look), however I believe that this could help you.

Kind regards,
Diego

SeanAwethentic
Tourist
15 0 3

@diego_ezfy 

 

This is the issue, you can see the links

 

https://www.awethenticgallery.com/collections/paintings/products/a-man-with-two-swan-heads

 

As you can see in the above link, I have used a hyphen on the product page and then Artist's name comes below. If I remove this hyphen then the Artist's name will come along with the product name.

Also, in the breadcrumb right now everything is one line which is good.

 

 

https://www.awethenticgallery.com/collections/paintings/products/a-woman-away-with-fairies-by-cindy-...

 

If I give the <br> tag on the product title then the Artist's name will show in the second line but then the breadcrumb also shows two lines. Check the above link.

 

So what I need is product name and artist name in one line on breadcrumb and product name and artist name in two lines on the product page.

diego_ezfy
Shopify Partner
2971 571 922

@SeanAwethentic 

So what I need is product name and artist name in one line on breadcrumb and product name and artist name in two lines on the product page.

I am afraid there is not a simple way to achieve this. You can try replacing the - with a <br> via Javascript, something like:

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

 

 

<script>
function replaceDashForBrProducTitle(){

var $title = document.querySelector(`.template-product .product-single__title`)

if (!$title){
return;
}
var title = $title.textContent;

$title.innerHTML = title.replace("-", `<br />`);
}

replaceDashForBrProducTitle()
</script>

 

 


but it's important to keep in mind that, depending on the window's size, the text will always be pushed down, even if there is a line break.

Kind regards,
Diego

SeanAwethentic
Tourist
15 0 3

@diego_ezfy 

 

For the time being it is working but in the product title, it says sale. Don't know where it comes from

Please check the link:

https://www.awethenticgallery.com/collections/paintings/products/a-man-with-two-swan-heads

 

Can you please check.