How can I modify CSS elements in the spotlight theme?

Store Design
, , ,
1

Hello,

can someone help me in a way i dont bother people anymore with the spotlight theme, i want to modify many elements of the theme and everytime its such a battle to find a way to to apply css to a precise element or a group of elements, i do use the inspector but it dont help a lot to find clearly what I need or I do not anderstand what to look for.

This time the exemple is for my sold out items i want the sold out badge (once click) on the product to be a certain way.

Thanks in advence for your concern and help.

2

  1. In the theme editor, locate and open the relevant file that controls the product display on the storefront. Typically, this file is named product-card.liquid, product-grid-item.liquid, or similar.

  2. Within this file, look for the code that generates the sold out badge or handles the product status.

  3. Once you’ve identified the code related to the sold out badge, you can apply custom CSS to modify its appearance. You can either add inline CSS directly to the code or create a new CSS rule in the theme’s CSS file.

For example, if you want to change the background color of the sold out badge, you can add the following CSS code:

.sold-out-badge {
  background-color: red;
}