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

New Member
15 0 0

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.

New Member
15 0 0

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