TASTE THEME: Product title and price inline MOBILE ONLY!

Store Design
, , , ,

Topic summary

A user seeks to display product titles and prices inline on collection pages for the Taste Shopify theme, specifically for mobile devices only. They shared a reference image showing the desired layout.

Solution Provided:
A contributor offered CSS-based solutions with two approaches:

  • Adding a custom class (inline-items) to the card__information element in card-product.liquid
  • Using CSS targeting .product-card-wrapper .card__content > .card__information without modifying template files

Both methods use flexbox (display: flex and justify-content: space-between) to achieve the inline layout.

Mobile-Only Implementation:
When the original poster confirmed the solution worked but wanted it mobile-only (not desktop), the contributor provided a media query wrapper using @media screen and (min-width: 1025px) to restrict the styling to larger screens.

Status: The discussion appears resolved with working CSS code provided for both general implementation and device-specific targeting.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

Hey, I have been trying everything to make this work but nothing did! Could anyone help me with this? The product title needs to be inline with the product price on the collection page as shown below. My theme is Taste

LINK:https://e8aaa0-3.myshopify.com/collections/best-selling-products

PASSWORD: mohwhi

Image 13-12-2023 at 08.17.jpeg
Image 13-12-2023 at 08.17.jpeg3420Ă—2214 331 KB

2

I need help with that too

fethiye activities

3

Hey @PRETTYFRIDAYS

You can achieve this using CSS. Follow the steps below:

  1. Add an extra class (inline-items) to “card__information,” as shown in the screenshot.

    e543c2a1-a5b2-4138-bde7-ffc17cf58d8c.png
    e543c2a1-a5b2-4138-bde7-ffc17cf58d8c.png669Ă—428 19.4 KB

  2. After that add below rule within current CSS (component-card.css) file.

.inline-items {
    display: flex;
    justify-content: space-between;
    padding-right: 0;
}​

You can add this at the end of stylesheet.

Thanks!

1 Like
4

Hey, thanks for replying but I don’t see the line where I am supposed to be putting the inline code, could you help me with finding this?

5

you can find the file within snippets section with name “card-product.liquid”

a059f0f6-4326-4def-9b91-b88fdade61b4.png
a059f0f6-4326-4def-9b91-b88fdade61b4.png1348Ă—785 78.9 KB

Add the class here near “card__information”.

Or You can use this CSS without adding class.

.product-card-wrapper .card__content > .card__information {
    display: flex;
    justify-content: space-between;
    padding-right: 0;
}
.product-card-wrapper .card__content > .card__information .card-information {
    width: auto;
}
.product-card-wrapper .card__content > .card__information .price__regular {
    white-space: nowrap;
}

Please add this CSS at the end of component-card.css file.

6

Hey! really appreciate your help and it did in fact work, but I only want it for desktop, how do I do this?

7

Just wrap above CSS within media queries, like this

@media screen and (min-width: 1025px) {
.product-card-wrapper .card__content > .card__information {
    display: flex;
    justify-content: space-between;
    padding-right: 0;
}
.product-card-wrapper .card__content > .card__information .card-information {
    width: auto;
}
.product-card-wrapper .card__content > .card__information .price__regular {
    white-space: nowrap;
}
}