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

[leosef]

Hello!

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

 How I have:

How I want:

 

[rajweb · Accepted solution]

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:

<div class="product-header-flex">
  <a href="{{ product.url }}" 
     class="product-title h6 line-clamp" 
     style="--line-clamp-count: 2">
    {{ product.title }}
  </a>

  <price-list class="price-list">
    <sale-price class="h6 text-subdued">
      <span class="sr-only">Sale price</span>
      <span class="etrans-money">{{ product.price | money }}</span>
    </sale-price>
  </price-list>
</div>

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

[rajweb]

Hey @leosef ,

Could you share your store URL so I can check?

[leosef]

https://carncier.com

[rajweb]

@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.

<div class="product-card__info empty:hidden">
  <div class="v-stack justify-items-center gap-2">
    <div class="v-stack justify-items-center gap-1 product-header-flex">
      <a href="/products/boundless-case-iphone-15" 
         class="product-title h6 line-clamp" 
         style="--line-clamp-count: 2" 
         data-instant="">
        <font style="vertical-align: inherit;">Boundless Case</font>
      </a>

      <price-list class="price-list">
        <sale-price class="h6 text-subdued">
          <span class="sr-only">SALE price</span>
          <span class="etrans-money">SEK 349</span>
        </sale-price>
      </price-list>

      <div>iPhone 15</div>
      <div>Storm Black</div>
    </div>
  </div>
</div>

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

[leosef]

Hello!

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

Thanks!

[rajweb · Accepted solution]

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:

<div class="product-header-flex">
  <a href="{{ product.url }}" 
     class="product-title h6 line-clamp" 
     style="--line-clamp-count: 2">
    {{ product.title }}
  </a>

  <price-list class="price-list">
    <sale-price class="h6 text-subdued">
      <span class="sr-only">Sale price</span>
      <span class="etrans-money">{{ product.price | money }}</span>
    </sale-price>
  </price-list>
</div>

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

[leosef]

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.

[rajweb · Accepted solution]

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?

[rajweb]

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.