(Split Theme) Product hover reduced price

Store Design

Topic summary

Ă„nderung der Farbe fĂĽr den reduzierten Preis im Shopify-(Split-)Theme auf der Produktkachel/bei Hover.

  • Anliegen: Der reduzierte Preis ist standardmäßig grau; gewĂĽnscht ist eine andere Farbe (Screenshot/Shop-URL wurde geteilt).
  • Vorgehen: Im Theme-Code unter Online Store → Theme → Edit code die Datei Assets/css_main.scss.css bearbeiten und CSS am Ende einfĂĽgen.
  • Lösungsschritte:
    • Zunächst wurde ein CSS-Selektor fĂĽr die Preis-Darstellung bereitgestellt (ursprĂĽnglich zur Schriftgröße).
    • Der Fragesteller hat statt font-size die color-Eigenschaft genutzt; dadurch funktionierte die Farbänderung, jedoch wurde auch der normale Preis rot.
    • Ergänzende Anpassung: Per CSS wird die durchgestrichene (alte) Preisangabe ĂĽber .price del wieder auf grau gesetzt.

Status: Problem weitgehend gelöst durch gezielte CSS-Regeln für reduzierte vs. normale Preisanzeige.

Summarized with AI on February 25. AI used: gpt-5.2.
1

Hello,

I would like to change the reduced price from grey in another color (see the screenshot). Is this possible?

Thank you!

Felix

1 Like
2

@flexsabo

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

1 Like
3

Thank you.

This is the shop URL: https://camino71.com/collections/business-shoes

1 Like
4

@flexsabo

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/css_main.scss.css->paste below code at the bottom of the file.
.site-box.box__collection .product-item .caption .price .overflowed {
    font-size: 14px;
}
1 Like
5

Thanks for your help, with color instead of font-size it is working. The problem is just that the normal price is now red too. I would like to have this still in gray is it possible?

Thanks

Felix

6

@flexsabo

yes, please add this code

.site-box.box__collection .product-item .caption .price del {
    color: gray;
}
1 Like