Solved

Remove "cut and wrap" for product titles on my site

FedericaFD
Tourist
8 0 1

HI,
I'm using the Impulse theme, I should make a change for the product titles.
They are automatically cut and sent at the end, they are not very understandable and aesthetically horrible.

FedericaFD_0-1713475720112.pngFedericaFD_1-1713475738747.png

 

FedericaFD_2-1713475769506.png

 

https://effediboutique.com


I hope someone can help me.

Thank you!

Accepted Solution (1)
Jack_Khan_Baba
Shopify Partner
90 8 14

This is an accepted solution.

add the following code in theme.js
// Wait for the document to be fully loaded
document.addEventListener("DOMContentLoaded", function() {
// Check if the screen width is below a certain threshold (e.g., 768px, typical for tablets)
if (window.innerWidth <= 768) {
// Get all elements with the class 'grid-product__title--heading'
var productTitles = document.querySelectorAll('.grid-product__title.grid-product__title--heading');

// Loop through each product title
productTitles.forEach(function(title) {
// Split the title into individual words
var words = title.textContent.split(' ');

// Replace the original title with individual words wrapped in <span> elements
title.innerHTML = words.map(function(word) {
return '<span>' + word + '</span>';
}).join('<br>');
});
}
});

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Chat on WhatsApp: +923143054166
Need a Shopify developer? Hire us at naimatullahts335@gmail.com
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.

View solution in original post

Replies 4 (4)
FedericaFD
Tourist
8 0 1

Hi Alice,

 

Yes, I need assistance. What information do you need to solve my problem?

 

Thanks

Jack_Khan_Baba
Shopify Partner
90 8 14

could you explain what you actually want

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Chat on WhatsApp: +923143054166
Need a Shopify developer? Hire us at naimatullahts335@gmail.com
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
FedericaFD
Tourist
8 0 1

Hi Jack,

I wish the headlines weren't cut. As you can see in the screens, the text goes through on its own, I'd rather that if a word was too long, it goes straight to the head as you can see in the "desktop" view.

 

Tell me if I explained myself well. 

 

Thanks

Jack_Khan_Baba
Shopify Partner
90 8 14

This is an accepted solution.

add the following code in theme.js
// Wait for the document to be fully loaded
document.addEventListener("DOMContentLoaded", function() {
// Check if the screen width is below a certain threshold (e.g., 768px, typical for tablets)
if (window.innerWidth <= 768) {
// Get all elements with the class 'grid-product__title--heading'
var productTitles = document.querySelectorAll('.grid-product__title.grid-product__title--heading');

// Loop through each product title
productTitles.forEach(function(title) {
// Split the title into individual words
var words = title.textContent.split(' ');

// Replace the original title with individual words wrapped in <span> elements
title.innerHTML = words.map(function(word) {
return '<span>' + word + '</span>';
}).join('<br>');
});
}
});

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Chat on WhatsApp: +923143054166
Need a Shopify developer? Hire us at naimatullahts335@gmail.com
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.