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

Store Design
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