Align price in the collection page at the same level (vs product in the same row=

[JaimePerez]

I would like to align the price of all products in a collection page

as you can see in image below each price (in yellow) are at a different high and esthetically it looks wrong

I am aware that probably this could be solved by using shorter product titles ocupaying only two lines of text but this is not the optimal solution because in some cases i need to have longer product titles 

happy to hear your recommendations. I already aligned all images by having same size images but this request is about the product titles

[GemPages]

Hello @JaimePerez 

Can you give me your Store URL( with pass if your store password is enabled) so I can check it for you?

Kind & Best regards,
GemPages Support Team

[JaimePerez]

www.encaja.mx

[PageFly-Victor]

Hi @JaimePerez 

This is Victor from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.single-product-wrap {
    display: flex;
    flex-direction: column;
}
</style>

It will look like this when you add the code : 

Hope this can help you solve the issue 

Best regards,

Victor | PageFly

[GemPages · Accepted solution]

Hello @JaimePerez 

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

2. Open your theme.liquid file, paste the below code before </body>

    <style>
        .template-collection .shop-product-wrap.grid-3 ul.product-view li.st-col-item {
            display: flex;
        }        
        .template-collection .shop-product-wrap.grid-3 ul.product-view li.st-col-item .single-product-wrap {
            flex: 1;
            display: flex;
            flex-direction: column;
        }        
        .template-collection .shop-product-wrap.grid-3 ul.product-view li.st-col-item .single-product-wrap .product-image {
            flex: 0;
        }        
        .template-collection .shop-product-wrap.grid-3 ul.product-view li.st-col-item .single-product-wrap .product-content {
            flex: 1;
        }        
        .template-collection .shop-product-wrap.grid-3 ul.product-view li.st-col-item .single-product-wrap .product-content .product-title {
            flex: 1;
        }
    </style>

I hope the above is useful to you.

Kind & Best regards, 
GemPages Support Team

[ErnestoPowers]

Hello,

I am trying to do the same and tried your code, but unfortunately nothing changes. maybe you could helm me out? InvertedPowers.com

[TOC-MR]

Hi @GemPages 

I am trying above solution, however it's not working for me. Next to above can you also help me with below
*I'm trying to get the font size of the lister page pricing and product page pricing smaller. Since i want to make the pricing bold, and it's looks very big when current font is bold.

Thanks!

[tapita]

@JaimePerez 

This is Tapita Team. I see that some images are still fixed. 

I am sending you a way to solve. This way works well if your product title is 1-3 lines ;). 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
.template-index .single-product-wrap .product-image a.pro-img .img1{
	height: 250px;
    object-fit: contain;
}
.template-index .swiper-wrapper.height {
    height: auto;
}
.template-index .single-product-wrap .product-content .product-title{
	height: 50px
}
.template-index .slider-simple--container{
	padding-bottom: 0px;
}
.template-index .product-area{
	padding-top: 70px;
}
</style>