Debut theme - product title and the pop-up cart..

18 0 4

HI All, 

I've seen this discussed before but am sorry to say that I couldn't quite work out the answer for myself here. hence my post.

First point is that my product titles are 'mostly' to be split across two lines. Something like;



To do this I quickly went to the idea of putting a <br> in the title eg: 


Which worked great on the product page, the collection view etc. It even works fine in the customer email notifications etc. 

The only place I could see it being problematic was on the Cart Pop-over where you can clearly see the <br>

Before I get flamed: I did review some suggestions about the length of the product titles and how banging in <br> is bad practice and that it would break on some pages etc. No disputing any of those suggestions - it does break in some places.. Hence the post. 

I also read some suggestions about using a 'special' character and modifying the theme to perform a replace on the product.title

{{ product.title | replace:'~','<br>' }}

I did try this on the product.template and it worked OK but I couldn't figure out how to make it work on a collection view (I am a novice) OR the cart pop-up.

In the end, I went back to using <br> in the product title and trying to fix it on the cart pop-up - which seemed to be the only place where it was problematic. 

So with that in mind - HELP.

I think I worked out that I need to modify the cart-popup.liquid (also recognised that I could be wrong on this point too). 

and based on that - identified the following code

    <h3 class="cart-popup-item__title" data-cart-popup-title></h3>
    <ul class="product-details" aria-label="{{ 'cart.popup.product_details' | t }}" data-cart-popup-product-details></ul>

But that is where I hit my knowledge wall.. How do I use the replace in the h3 line in order to swap out the <br> temporarily with a simple space character?

I don't understand this line so I can't really work out how it works.. All I (think) I've worked out is that that is the line that populates the newly added product to the cart-popup. 


Any help appreciated and gratefully received. 



New Member
1 0 0

Our Customize Debut shopify theme will enhance your store. ... Just as the title suggests, Debut's topic is an awesome choice for stores and entrepreneurs ... With Debut Shopify Theme you can showcase your products in a ... You made an incredible choice by setting up Debut as your Shopify store theme, and ... Add to Cart.

18 0 4

I worked it out.. 

I had to make some changes to the theme.js in a couple of places and also in the cart-template.liquid file

I used some javascript replace functions and also a liquid replace


So far - so good

Shopify Partner
5 0 1

@David_Renwick Could you share your solution? I am trying to accomplish this exact same thing with the debut theme.

18 0 4


I actually switched techniques and have since moved away from the multi-line titles. I use tags now to supplement the title with extra details that I render only on the product page.. 

However, I didn't back out all the changes from the theme.js file here is some of the places I added code to handle <br>... I can't recall exactly which function renders the title in the pop-up cart but you have to the same 'replace' function in multiple places to make it all work. 


(approximately line: 6854) _createLineItemList

var cartItemTitle = itemNode.querySelector(selectors.cartItemTitle);

cartItemTitle.textContent = item.product_title.replace("<br>", " ");;


(approximately line: 7388) _formatRemoveMessage

var title = lineItem.getAttribute(attributes.cartItemTitle);
 title = title.replace("<br>", " ");
(approximately line: 8202) _updateCartPopupContent

this.cartPopupTitle.textContent = item.product_title.replace("<br>", " ");


You might still need to do some of the same 'replacing' in the templates also.  The title is rendered in the template initially and then sometimes the pages is rebuilt via the theme.js when items are removed or modified in the cart.  Wasn't totally easy to nail down.