Be yours theme prices are not lining up on collection page

[Seoulful777]

Some of the product titles are longer than others on the collection page and it is causing the pricing not to be on the same line. Is there a way to make it so that the prices are all on the same line no matter how long the description is?

[DaisyVo]

Hi @Seoulful777 

Could you please share the store link with us?

Thank you!

Best,

Daisy - Avada Support Team. 

[Seoulful777]

the store is not live as yet, so I am not suer I can do that is there any other way to find a solution?

[DaisyVo]

Hi @Seoulful777 

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Here is the code for Step 3:

h3.card__heading {
    height: 50px;
}

Before: 

After:

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[Moeed]

Hey @Seoulful777 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[Vinsinfo]

@Seoulful777 We can use ellipsis to display the product title in single line to lining up the prices on collection page in Be yours theme. Please follow below steps and let us know whether it is helpful for you.

1. From admin go to "Online Store" -> "Themes".

2. Click "Edit code" button from the current theme.

3. Go to "base.css" file.

4. Then paste the below code at the bottom of the file and then save changes.

.template-collection .card-information .card-information__wrapper .card-information__text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
}

Result will be like,

Note: If it is not working properly, kindly share your store URL to check.

Please provide your support by click "like" and "accepted" if our solution works for you. Thanks for your support.

[Seoulful777]

that definitely worked better, but is there a way to keep the entire product title but just align the pricing?

[Seoulful777]

I saw this on another thread, would it work? and if so, where would I insert this code?

@media only screen and (min-width: 749px) {

.template-collection .product-card__title, .grid-view-item__title { height: 125px; }

}

[Vinsinfo]

@Seoulful777 We can display the entire product title, but it needs some additional coding. Can you please share the collaborator code of the store to check your theme code and provide solution based on it?

And to answer your question about the code you shared, it is not advisable to use the code since it uses static height.

[Seoulful777]

Thank you so much 9013

[Vinsinfo]

@Seoulful777 Thank you for sharing the code, we need your store URL as well to access the store. Can you please also share that?

[Seoulful777]

www.seoulfulskincare.co.za

Can i e-mail you the password privately?

[Vinsinfo]

@Seoulful777 Yes, please. We have also requested collaborator access to your store. Please approve it to let us view the theme code and store.

[Seoulful777]

I have accepted, thank you!

[Vinsinfo · Accepted solution]

@Seoulful777 We have implemented the solution on your store on the collection page to display the prices on the same line regardless of the product title length. Please let us know whether it is helpful for you.

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[Seoulful777]

Thank you so much! You guys are awesome! I really appreciate it!