How to add a color title to product title on homepage

How to add a color title to product title on homepage

liveinpeace2
New Member
11 0 0

Hello everyone, I’m running into a huge problem, and I just can’t seem to fix it. As you can see in the attached photos, my site currently displays the product titles with the color of the product listed alongside them. I would like the layout to match the example photo of the Represent brand’s website. Specifically, I want the title in black at the top, with the product color displayed below it in light gray. Additionally, I’d like the price to appear in black at the bottom right corner of the product.

On top of that, I want the titles positioned closer to the image and the color displayed just below the name.

Does anyone have any idea how I can achieve this? I’d really appreciate your help; I’ve been trying for days…

 

Scherm­afbeelding 2025-01-17 om 11.10.05.png

Scherm­afbeelding 2025-01-17 om 11.12.42.png

 

Link to my site: https://live-in-peace.com/

Link to reference site (Represent): https://eu.representclo.com/collections/discover-all-products

 

Replies 2 (2)

CodingFifty
Shopify Partner
525 80 98

Hi @liveinpeace2,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css file Add the provided code at the end of the file.

.contains-card--product .full-unstyled-link {
    font-size: 12px !important;
    max-width: 100% !important;
}

.contains-card--product .card-information {
    width: 30% !important;
    text-align: end !important;
}

.contains-card--product .card--standard>.card__content .card__information {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
       padding-top: 1px !important;
}

 

CodingFifty_0-1737136055119.pngCodingFifty_1-1737136074032.png

 

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
liveinpeace2
New Member
11 0 0
Hi, Thank you very much for your response. I followed the steps as you described, but unfortunately, nothing changes on the site. Do you have any idea where the issue might be? Kind regards!