How to centre align product name and price on debut

Store Design
, , ,
1

Hello does anyone know how to centre align my product name and price under each image on homepage AND collection. I have tried various codes people have suggested without success. They currently sit left of the image.

Url https://www.flowerswithdevotion.com.au/

2

Hey!

Go to Online store > theme > actions > edit code.

Click assets folder > theme.scss.css or theme.css file.

Copy and paste at the bottom of the file this code.

.product-card__title {
  display: flex;
  justify-content: center;
}

.price {
  align-items: center;
}

.price__regular, .price__sale {
  margin-right: 0;
}

Result:

dannyelo_0-1690137082267.png
dannyelo_0-1690137082267.png2000×1528 473 KB

Hope this helps,

3

Hi @Mally88

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Theme.scss.css

.h4.grid-view-item__title.product-card__title {
    display: flex;
    justify-content: center;
}
.price {
    display: flex;
    flex-direction: column;
    align-items: center !important;
}

Hope you find my answer helpful!

Best regards,

Richard | PageFly

4

Thankyou!! this worked!

5

Hello, Do you know how to align the product names so they are all aligned in the same straight line, not up and down as seen in you screenshot?

6

You are welcome!

7

I see them aligned, did you change anything?

dannyelo_0-1690170696629.png
dannyelo_0-1690170696629.png2494×1522 541 KB

8

Hello, yes they are aligned perfectly on my homepage, but not in my collections. For example - in the below url, you can see Valentina & presentation box are higher positioned than the other product names. the only thing i changed was the font style and it distorted the heights. appreciate your help

https://www.flowerswithdevotion.com.au/collections/romance-1

9

Oh I see.

I recommend to make the featured image for all your products the same width and height. Because every image is different aspect ratio, this end up bring you problems. In your case I recommend to make a square template and then you adapt the image in there.

If you align the titles, will be more space between the images in some cases.

Try this for a quick fix.

.product-card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 200px 46px 21px;
}

.h4.grid-view-item__title.product-card__title {
  align-self: center;
}

.price__regular,
.price__sale {
  margin-right: 0;
}

Let me know!

10

OH yep, i see, thank you for the advice. your quick fix worked! i will work on fixing the image ratios next many thanks!

11

You are welcome!

Also try to remove the background of the images, set a transparent or white background to the images, will look more profesional.

There are online background removers, or better, hire a designer to do that for you.