Float the price to the right - Collection page | Prestige Theme

Store Design

Topic summary

Goal: Align the product price to the right of the product title on collection pages in the Prestige theme. Images provided show current vs desired layout.

Proposed solution:

  • Modify the product card HTML to wrap title and price in a shared flex container (e.g., a header wrapper).
  • Add CSS: make the wrapper display:flex with justify-content:space-between and align-items:center; set the title to flex:1; push the price to the right with margin-left:auto and right-aligned text. Classes referenced: .product-header-flex, .product-title, .price-list.

Implementation guidance:

  • Edit via Online Store > Themes > Edit Code.
  • Likely files: Snippets > product-card.liquid or product-grid-item.liquid; Sections > collection-template.liquid or featured-collection.liquid.
  • Search for product.title, price-list, product-card_info to locate the correct block, then apply the new structure/CSS.

Current status:

  • After attempting the steps, the requester reports it didn’t fully work.
  • The helper asked for store access and suggested custom code may be needed; requested to continue via email.
  • A later helper note says the solution worked, but there’s no confirmation from the requester. Resolution on-thread is unclear/ongoing.
Summarized with AI on December 16. AI used: gpt-5.
1

Hello!

I’m trying to make the price align with the title, but on the right. Using the Prestige theme

How I have:

How it is.png
How it is.png1899×732 55.6 KB

How I want:

33333.png
33333.png462×100 2.1 KB

2

Hey @leosef ,

Could you share your store URL so I can check?

3

https://carncier.com

4

@leosef ,

To Align the price to the right of the product title within the structure you provided, we’ll need to modify the HTML layout and apply some CSS adjustments.


  

    

      
        Boundless Case
      

      

      
iPhone 15

      Storm Black

CSS Adjustments:

Add the following CSS to your Assets > theme.css or theme.scss.liquid file:

.product-header-flex {
  display: flex;
  justify-content: space-between; /* Title on the left, price on the right */
  align-items: center; /* Vertically align content */
  gap: 10px;
  width: 100%; /* Ensure it spans the full width */
}

.product-title {
  flex: 1; /* Take up available space */
  margin: 0;
  white-space: nowrap; /* Prevent wrapping */
}

.price-list {
  margin-left: auto; /* Push price to the right */
  white-space: nowrap;
  text-align: right;
}

This layout will now align the price to the right of the title smoothly within your product card design.

If I was able to help you, please don’t forget to Like and mark it as the Solution!

Best Regard,

Rajat Sharma

5

Hello!

Thanks. But how should i edit the HTML? Where is that located.

Thanks!

6

Follow these steps:

  1. Go to Online Store > Themes > Edit Code.

  2. Look for the Product Card HTML:

In most cases, the product card layout will be inside one of these files:

  • Sections > collection-template.liquid (used on collection pages)
  • Snippets > product-card.liquid or product-grid-item.liquid (for product lists or featured products)
  • Sections > featured-collection.liquid (for homepage featured products)
  1. Open the File that matches your need.
    If you are working on product cards on collection pages, start by looking in product-card.liquid or collection-template.liquid.
  2. Search for the Product Title and Price Block : Use CTRL + F to search for keywords like:
  3. product.title
  4. price-list
  5. product-card_info

This will help you locate the specific part you need to modify.

Modify the HTML Structure:

Once you’ve found the relevant block, update it with the Flexbox HTML I shared earlier:

liquid:


  
    {{ product.title }}

Let me know if you encounter any issues while navigating through the files!

7

Hello!

I did everything as you wrote. But I think It didn’t fix it quite, please check and tell me if I did anything wrong.

8

To check this, I’ll need access to your store and review the theme to see if it includes this feature. If it doesn’t, custom code may be required. If you’re comfortable sharing access, I’d be happy to take a look and update you accordingly.

Could you please send me a message via email so we can discuss this further?

9

Hey @leosef ,

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.