← All examples

Etsy: price-focused card layout

Moves the price above the title on listing cards so you see the cost first.

Code to copy

/* Price-focused layout: move price above the title */
.listing-card .v2-listing-card__info {
  display: flex !important;
  flex-direction: column !important;
}
.listing-card .v2-listing-card__price,
[data-listing-id] .lc-price {
  order: -1 !important;
  margin-bottom: 2px !important;
}

How to use this example

1. Copy the code with the button above.
2. Install JustZix (2 minutes) and open the extension on the target page.
3. Add a new rule matching that page.
4. Paste the code into the rule's CSS panel and save — the effect appears instantly.