How to reduce space between price and product title?

Store Design
, , , ,

Topic summary

Goal: Reduce the large vertical gap between product title and price on collection pages in the Trade theme.

Context: OP shared a preview link and screenshots to show the spacing issue and subsequent attempts.

Steps suggested:

  • Edit theme code: Online Store > Themes > (… ) > Edit code > Assets > component-card.css.
  • Attempt 1: Add .card-information { padding-top: -10px; } — did not work.
  • Attempt 2: Add .card__information { padding-top: -10px; } — still not working.
  • Corrected guidance: Use .card-information { margin-top: -10px; } and adjust the value to preference.

Current status: No confirmation that the final CSS (negative margin-top on .card-information) resolved the issue. Discussion remains open/uncertain.

Key notes:

  • Selector corrected from .card__information back to .card-information.
  • The final approach switches from padding-top to margin-top with a negative value to reduce spacing.
  • Screenshots were used to document the problem and unsuccessful attempts.
Summarized with AI on December 24. AI used: gpt-5.
8

Sorry for the confusion. This is the corrected version

.card-information{
   margin-top: -10px;
}
1 Like