Hover over title to view full product name

Store Design
1

Hello

Our website is threesirens.co.uk

We currently have the following code in component-card.css to make our title appear on one line:

.card__heading {
margin-top: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
max-width: 173px;

Is there a way to keep this format, but when a customer hovers over the title, the shortened title expands to show the full product title?

Many thanks

2

I should probably specify, we’re using the Dawn theme. Is this something that can be done with code, or maybe an app?

3

Try pasting this code into the end your theme.liquid file: