How can I adjust the top padding of the product listing?

Topic summary

Goal: Reduce the top padding above product info so breadcrumbs sit closer to the product image in Dawn.

What changed:

  • CSS was added (via base.css or theme.liquid) targeting the product section’s main-padding class to set padding-top: 0 on desktop (min-width: 750px). The store owner confirmed it worked.

Follow-ups:

  • Remove the thin line above the breadcrumb. After a screenshot, a responder said this underline/divider is a Shopify default and cannot be removed. No workaround was provided.
  • Prevent product titles from wrapping on mobile. The breadcrumb.liquid was shared, and a responder suggested using the Liquid filter “truncatewords” (e.g., product.title | truncatewords: 6) to shorten long titles so they fit on one line. “truncatewords” shortens text to a set number of words and adds an ellipsis if trimmed.

New request (unanswered):

  • Preserve the collection scroll position when returning from a product page (including browser/gesture back), ideally resuming where the customer left off. The user asked if this can be handled via breadcrumbs or another method. No response yet.

Notes: Screenshots were used to illustrate spacing and the line above the breadcrumbs.

Summarized with AI on December 21. AI used: gpt-5.

Its pretty hard to see

1 Like