How to make Compare at price and sales price appear on same line on collection pages mobile

Topic summary

Goal: On mobile collection and featured collection, display compare-at price and sale price on the same line, with matching font sizes; optionally remove the “AUD” label to save space.

Key points:

  • Initial problem: Prices stacked on separate lines and in different sizes on mobile.
  • Constraints: Solution depends on theme; may require custom CSS/HTML changes.

Actions taken:

  • Site URL was shared for review.
  • A CSS-based approach was provided to place both prices on a single line and standardize font size on mobile. Guidance included where to add it (between tags or into the theme’s custom CSS) and to clear caches.
  • Note: Removing the “AUD” label conflicted with existing setup but is feasible with additional effort.

Outcome:

  • The original poster confirmed success after adding the provided CSS in the theme’s custom CSS section.

Open items:

  • Another user reported the CSS did not work on their site (likely theme-specific differences). No follow-up solution yet.

Status: Resolved for the original store; unresolved for others who may need theme-specific adjustments or further customization.

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

you are welcome :slightly_smiling_face: