Shopify themes, liquid, logos, and UX
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.
sorry for any issue please share store url so i will check and let you know
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.
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?
@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
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.
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.
@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
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.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025