Top Align Product Names without affected price line on Collection Product List? DawnTheme

[BrianAugustin]

How would I align all text to be aligned following the top margin/padding, without moving the prices on product collection list? 

www.extremekool.com

Password01

[BSS-TekLabs · Accepted solution]

Hi @BrianAugustin,

You can follow these steps to make the effect

1. Open Online Store > Theme > Edit Code

2. Find and open the base.css (or theme.css, custom.css) file

3. Paste the code snippet below at the bottom of the file and hit save

.card__content .card__information {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Here is the result

Hope this helps you solve the issue.

Please don't forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

[BrianAugustin]

for some reason its not applying? applied in base and custom.css

[BrianAugustin]

I know I applied code to the prices, I don't remember what file I did that in but I think its affected the titles too. 

If I use your code I need to override it. I use !important but still nothing changed.

[BrianAugustin]

fixed. has extra code effecting it under theme.liquid.

thanks for reply and help.

[BSS-TekLabs]

You're welcome!
And if you're looking to add custom free gift functionality to your store, you should definitely check out our app, Salepify! It's designed to enhance your sales strategy with features like tiered discounts, cart rewards, and seamless integration with Shopify! 🎁🚀

[rawmilkindubaio]

You're welcome! If you're looking to enhance your store's sales strategy, consider our app, Salepify. It offers custom free gift functionality, tiered discounts, and cart rewards, seamlessly integrating with Shopify. Salepify helps you give gifts to customers and upsell in the cart effectively. If you find our suggestions helpful, please like or mark it as a solution. For more information or assistance, contact our experts at community@bsscommerce.com. BSS Commerce is a full-service eCommerce agency dedicated to boosting your sales with innovative solutions.

[joanlee9494]

To top-align product names without affecting the price line on a collection product list in DawnTheme, you can adjust the CSS styles for the product list items.

[rawmilkindubaio]

To create the desired effect on your Shopify store, you can follow these simple steps provided by BSS-TekLabs, a Shopify Expert. First, navigate to your Shopify admin and go to Online Store > Themes > Edit Code. This will open the code editor for your current theme.

Next, locate the CSS file where you want to add the custom styles. This is typically named base.css, theme.css, or custom.css. Open this file to make the necessary changes.

Scroll to the bottom of the CSS file and paste the following code snippet:

css

.card__content .card__information { height: 100%; display: flex; flex-direction: column; justify-content: space-between; }

Once you've added the code, click Save to apply the changes. This CSS rule will ensure that the .card__content and .card__information elements within your theme are styled to fill the available height and arrange their content with space distributed evenly between elements.

If you find this solution helpful, please remember to like the post and mark it as an accepted solution. For additional support, you can reach out to BSS Commerce at community@bsscommerce.com. They also offer tools like Salepify for gifting and upselling in the cart, which you might find useful for enhancing your store.