Center Product Title and Price Under Product Image in Collections

[kailasachse]

Hello,

Having a hard time centering product titles and prices underneath the product images on collection pages.

I've tried adding this code to theme.scss.liquid file with no luck.

.price {
 justify-content: center !important; 
}
.product-single__title {
    text-align: center!important;
}

Theme is Debut.

I also want to reduce the size of the price font and enlarge the size of the title font.

Have any suggestions?

[suyash1 · Accepted solution]

---

@kailasachse wrote:

Lol thanks!

Trying to eliminate any chance of SEO being picked up unnecessarily. 😉

Okay, replaced original price code with your suggested and it worked, but now price on product page is now centering.

How do we isolate to just the collections pages?

Also tried to add in code to eliminate underline upon hover but did not work.

Thoughts?

This is code as of now:

/*== Center Align Titles and Prices Under Product Images in Collections ==*/
dl.price {
    align-items: center;
}

.h4.grid-view-item__title.product-card__title {    
  text-align: center;    
  width: 100%;    
  display: inline-block;
  text-decoration: none;

}

---

to make prices left on only PRODUCT PAGE add following css

.template-product dl.price{align-items: flex-start;}

[Guleria]

Hello,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

dl.price.price--listing {    align-items: center;
}
.h4.grid-view-item__title.product-card__title {    text-align: center;    width: 100%;    display: inline-block;
}

If still not working, please share  store url

Thanks

[kailasachse]

Almost! Now prices just need to be aligned.

This is the website, hover for password.

[Guleria]

wow, what a idea 'hover to see password' hahaha

dl.price {
    align-items: center;
}

[kailasachse]

Lol thanks!

Trying to eliminate any chance of SEO being picked up unnecessarily. 😉

Okay, replaced original price code with your suggested and it worked, but now price on product page is now centering.

How do we isolate to just the collections pages?

Also tried to add in code to eliminate underline upon hover but did not work.

Thoughts?

This is code as of now:

/*== Center Align Titles and Prices Under Product Images in Collections ==*/
dl.price {
    align-items: center;
}

.h4.grid-view-item__title.product-card__title {    
  text-align: center;    
  width: 100%;    
  display: inline-block;
  text-decoration: none;

}

[suyash1 · Accepted solution]

---

@kailasachse wrote:

Lol thanks!

Trying to eliminate any chance of SEO being picked up unnecessarily. 😉

Okay, replaced original price code with your suggested and it worked, but now price on product page is now centering.

How do we isolate to just the collections pages?

Also tried to add in code to eliminate underline upon hover but did not work.

Thoughts?

This is code as of now:

/*== Center Align Titles and Prices Under Product Images in Collections ==*/
dl.price {
    align-items: center;
}

.h4.grid-view-item__title.product-card__title {    
  text-align: center;    
  width: 100%;    
  display: inline-block;
  text-decoration: none;

}

---

to make prices left on only PRODUCT PAGE add following css

.template-product dl.price{align-items: flex-start;}

[kailasachse]

@suyash1 that worked for alignment! Thank you.

Final question: you know how to remove the underlines from the Titles upon hover?

[suyash1]

---

@kailasachse wrote:

@suyash1 that worked for alignment! Thank you.

Final question: you know how to remove the underlines from the Titles upon hover?

---

add this css

.product-card__title {border-bottom: none;}

[kailasachse]

Hmm, code didn't seem to work for underline.

I also noticed that recommended products were left out from the center alignment:

Underlines still occur upon hoverPrices still left-aligned

This is the current code:

/*== Center Align Titles and Prices Under Product Images in Collections ==*/
dl.price {
    align-items: center;
}

.h4.grid-view-item__title.product-card__title {    
  text-align: center;    
  width: 100%;    
  display: inline-block;
  text-decoration: none;
}

.template-product dl.price{align-items: flex-start;}

.product-card__title {border-bottom: none;}

[kailasachse]

Update: I was able to center recommended products with this code:

.product-recommendations__inner dl.price {
    display: block!important;
    text-align: center;
}

Still not sure how to remove underlines upon hover. Any thoughts?

[suyash1 · Accepted solution]

---

@kailasachse wrote:

Update: I was able to center recommended products with this code:

.product-recommendations__inner dl.price {
    display: block!important;
    text-align: center;
}

Still not sure how to remove underlines upon hover. Any thoughts?

---

To remove border, try this CSS

.product-card:hover .product-card__title, .product-card:focus-within .product-card__title {border-bottom: none !important;}

[kailasachse]

That worked! Thank you!!

Final code to center-align product titles and prices in both collections and for product recommendations. Code also eliminates underlining upon hover. For Debut theme.

/*== Center Align Titles and Prices Under Product Images in Collections & Product Recommendations ==*/
dl.price {
    align-items: center;
}

.h4.grid-view-item__title.product-card__title {    
  text-align: center;    
  width: 100%;    
  display: inline-block;
  text-decoration: none;
}

.template-product dl.price{align-items: flex-start;}


.product-recommendations__inner dl.price {
    display: block!important;
    text-align: center;
}

/*== Removes Underline Upon Hover ==*/
.product-card:hover .product-card__title, 
.product-card:focus-within .product-card__title {
  border-bottom: none !important;
}

[gkhau]

Does anyone know how I can use this code, but also have the text of the product title change color upon hovering?

[suyash1]

share your site URL

[Seppe]

Hi, 

Thank you so much for this code, it's just what I was looking for. 

Only there is still one problem... My prices aren't fully centered. I mean, they seem to be centered, but when you look closer it doesn't correctly align with the product name. 
( -> See the attached screenshot please, don't mind the weird photos, I'm still practicing ;)) 

Anyone that can help me with this issue? I Would really appreciate it! 

Btw: I'm using Debut theme and if you need to be on my website, the password is: skufoh and this is my url: www.bonita-avenue.com 

Thanks in advance! 

[Guleria]

Add this css too 

.price dd {
    margin: 0 -0.5em 0 0 !important;
}

[Seppe]

That worked! Thank you very much! 

[Kr7]

Thanks for this code that 8 looking for a long time. However, I still have a problem with the price that I cannot center.

Here is te chope that I put : 

/*== Center Align Titles and Prices Under Product Images in Collections & Product Recommendations ==*/
dl.price {
align-items: center;
}

.h4.grid-view-item__title.product-card__title {
text-align: center;
width: 100%;
display: inline-block;
text-decoration: none;
}

.template-product dl.price{align-items: flex-start;}

.product-recommendations__inner dl.price {
display: block!important;
text-align: center;
}

/*== Removes Underline Upon Hover ==*/
.product-card:hover .product-card__title,
.product-card:focus-within .product-card__title {
border-bottom: none !important;
}

Can someone help me ?

Thank you so much !!

[Kr7]

I found it, thanks anyway !

[kailasachse]

@Kr7 Great! What ended up being your fix?

[suyash1]

@kailasachse I can help you with css, feel free to reply/contact.

[-Skyfall-]

Hi, 

This works with my store as well!

Now there's another item and that is how to push back the Original Price? 

Also, how do we remove the SALE symbol throughout the site? 

I'm using the same DEBUT theme. 

Thank you! 

[-Skyfall-]

Thanks for your post @suyash1 . They really help. The code that suppose to center price (recommended products) didn't work for me. It turns out to be like this:

Only the sale symbol got larger but I want to delete that anyway. 

How can I center the price and remove the SALE symbol?

Thanks! 

[knuths]

The code won't move my brand name to the center.. how do I fix this 

[Jackie_Morales]

Hi, I wanted to know if anyone would be able to help me. I've been looking through the thread and tried all the recommended codes, but to no avail. I am trying to get the product title and price centered. The closest I got was the one with red underlining.

Here is the link to the website: https://monkpunk.com/

Thank you in advance.

[suyash1]

@Jackie_Morales - add this to the very end of theme.scss file and check

dl.price {width: 100%;}

[Jackie_Morales]

it worked, thank you so much!

[suyash1]

@Jackie_Morales - welcome

[Guleria]

.template-product .price__regular {
    align-self: flex-start;
}

Please add this 

[info_ZSD]

Can I please get some help with my URL? Let me know what you need but I cannot get my product titles and pricing to be centred?

[Emmalouise]

this code worked but it also centered the price on the product page which i do not want, can someone help me?

[Ljkeos]

This was on page one of the thread--add this:

.template-product dl.price{align-items: flex-start;}

[gracema]

Hello,

Could you please let me know if there is a code to eliminate the faint grey lines? After I added the new codes for center alignment these lines appeared 😞

[suyash1]

@gracema - those need to be removed with css, can you please share your website page link where you have these lines?

[gracema]

@suyash1  please see below (its basically every page)

https://gracema.studio

https://gracema.studio/collections/all

https://gracema.studio/products/utility-half-zip-sweatshirt

[suyash1]

@gracema - please add this css and check 

.filters-toolbar-wrapper {
    border-bottom: none;
    border-top: none;
}

[gracema]

@suyash1 some of the lines disappeared but there is still one line on all pages, thanks again for your help in this!

[suyash1]

@gracema - add this and check 

#AccessibleNav{
border-bottom: none;
}

[gracema]

@suyash1  WOW thank you so much!!! You are amazing 🙂 it worked!

[gracema]

@suyash1  Sorry one more question I noticed the price does not look centered correctly, could you help me please?

[suyash1]

@gracema - please add this css and check

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

.price dd {
    margin: 0;
}

[gracema]

it worked thank you!

Also my product page currently looks like this:

Is there a way to change how the title "products" looks, and make it look like the below?

 

 

[suyash1]

@gracema - please add this and check 

.collection-header h1 {
    background-color: #000;
    color: #fff;
    padding: 5px;
}

[gracema]

the black box worked! is there a way to change the font or to make the "products" title all caps please?

[suyash1]

@gracema add this  text-transform: uppercase;  line to css so it becomes

.collection-header h1 {
    background-color: #000;
    color: #fff;
    padding: 5px;
    text-transform: uppercase;
}

[gracema]

@suyash1 

it worked thank you!

could you also let me know if there is a way to delete the number of products please?

[gracema]

Also is there a way I can edit the order my product images are displayed without adding to the "collections" tab please?

[suyash1]

@gracema - do not know about ordering product images, sorry

[gracema]

no worries, thank you for all your help!~

[suyash1]

@gracema - welcome.