Solved

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

JaimePerez
Shopify Partner
16 1 2

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

JaimePerez_0-1676424277124.png

 

Accepted Solution (1)

GemPages
Shopify Partner
5588 1261 1206

This is an accepted solution.

Hello @JaimePerez 

 

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

GemPages_0-1676430499827.png

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

GemPages_1-1676430518791.png

    <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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 6 (6)

GemPages
Shopify Partner
5588 1261 1206

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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
JaimePerez
Shopify Partner
16 1 2

PageFly-Victor
Shopify Partner
7865 1785 3054

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 : 

PageFlyVictor_0-1676429707915.png

 

Hope this can help you solve the issue 

 

Best regards,

Victor | PageFly

GemPages
Shopify Partner
5588 1261 1206

This is an accepted solution.

Hello @JaimePerez 

 

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

GemPages_0-1676430499827.png

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

GemPages_1-1676430518791.png

    <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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
ErnestoPowers
Visitor
1 0 0

Hello,

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

tapita
Shopify Partner
19 0 1

@JaimePerez 

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

 

Screen Shot 2023-02-15 at 10.35.04.png

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>

 

If our answer is helpful, please give us a Like or mark it as a Solution.