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

Store Design
,

Topic summary

Aligning product prices across a collection page grid so all price text sits at the same vertical level, regardless of varying product title lengths. The requester already standardized image sizes and wants a solution that doesn’t force shorter titles.

Proposed approaches: two app teams suggested adding custom code in theme.liquid (one before , one before ). These aim to align layout elements on collection cards. Images show intended placement, but the actual code snippets are not visible in the thread, which is critical to execution.

Follow-ups: multiple users report the provided approach didn’t change anything and requested further assistance. Store URLs were shared to enable inspection (e.g., encaja.mx, InvertedPowers.com).

Additional request: reduce pricing font size on listing and product pages while keeping it bold, to improve visual balance.

Status: unresolved. Key blockers include missing/hidden code in posts and lack of verified theme-specific instructions. Next steps likely require sharing the exact CSS/JS, confirming theme name/version, and applying consistent title/price container heights. Attachments (screenshots) are central to visualize the misalignment.

Summarized with AI on December 26. AI used: gpt-5.
1

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
JaimePerez_0-1676424277124.png1361×535 339 KB

2

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

3

www.encaja.mx

4

Hi @JaimePerez

This is Victor from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the 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

It will look like this when you add the code :

PageFlyVictor_0-1676429707915.png
PageFlyVictor_0-1676429707915.png1920×937 247 KB

Hope this can help you solve the issue

Best regards,

Victor | PageFly

5

Hello @JaimePerez

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1676430499827.png
GemPages_0-1676430499827.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1676430518791.png
GemPages_1-1676430518791.png1605×840 64.8 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

6

Hello,

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

7

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!