How to add a color title to product title on homepage

[liveinpeace2]

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…

 

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

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

[CodingFifty]

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;
}

[liveinpeace2]

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!