Center Product Title and Price Under Product Image in Collections

Solved

Center Product Title and Price Under Product Image in Collections

kailasachse
Shopify Partner
89 0 33

Hello,

 

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

Screen Shot 2020-03-28 at 1.42.18 PM.png

 

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?

 

Working with small businesses to establish branding, online presence, and strategy for marketing and operations.
Accepted Solutions (2)
suyash1
Shopify Partner
10721 1324 1700

This is an 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?

 

Screen Shot 2020-03-28 at 2.25.03 PM.png

 

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

Thoughts?

Screen Shot 2020-03-28 at 2.22.07 PM.png

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;}

Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

View solution in original post

suyash1
Shopify Partner
10721 1324 1700

This is an 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;}
Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

View solution in original post

Replies 59 (59)

Guleria
Shopify Partner
4074 801 1148

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

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
kailasachse
Shopify Partner
89 0 33

Almost! Now prices just need to be aligned.

 

This is the website, hover for password.

Screen Shot 2020-03-28 at 2.08.54 PM.png

 

Working with small businesses to establish branding, online presence, and strategy for marketing and operations.
Guleria
Shopify Partner
4074 801 1148

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

dl.price {
    align-items: center;
}
- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
kailasachse
Shopify Partner
89 0 33

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?

 

Screen Shot 2020-03-28 at 2.25.03 PM.png

 

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

Thoughts?

Screen Shot 2020-03-28 at 2.22.07 PM.png

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;

}
Working with small businesses to establish branding, online presence, and strategy for marketing and operations.
suyash1
Shopify Partner
10721 1324 1700

This is an 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?

 

Screen Shot 2020-03-28 at 2.25.03 PM.png

 

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

Thoughts?

Screen Shot 2020-03-28 at 2.22.07 PM.png

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;}

Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
kailasachse
Shopify Partner
89 0 33

@suyash1 that worked for alignment! Thank you.

 

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

Screen Shot 2020-03-30 at 5.50.46 PM.png

 

Working with small businesses to establish branding, online presence, and strategy for marketing and operations.
suyash1
Shopify Partner
10721 1324 1700

@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;}
Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
kailasachse
Shopify Partner
89 0 33

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 hoverUnderlines still occur upon hoverPrices still left-alignedPrices 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;}
Working with small businesses to establish branding, online presence, and strategy for marketing and operations.
kailasachse
Shopify Partner
89 0 33

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?

Working with small businesses to establish branding, online presence, and strategy for marketing and operations.
suyash1
Shopify Partner
10721 1324 1700

This is an 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;}
Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
kailasachse
Shopify Partner
89 0 33

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;
}

 

Working with small businesses to establish branding, online presence, and strategy for marketing and operations.
gkhau
New Member
4 0 0

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

suyash1
Shopify Partner
10721 1324 1700

share your site URL

Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Seppe
Visitor
2 0 0

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! 

 

Screenshot collectionpage.png

Guleria
Shopify Partner
4074 801 1148

Add this css too 

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

 

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
Seppe
Visitor
2 0 0

That worked! Thank you very much! 

Kr7
New Member
4 0 0

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

 

Capture d’écran 2020-09-20 à 07.16.04.png

 

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
New Member
4 0 0

I found it, thanks anyway !

kailasachse
Shopify Partner
89 0 33

@Kr7 Great! What ended up being your fix?

Working with small businesses to establish branding, online presence, and strategy for marketing and operations.
suyash1
Shopify Partner
10721 1324 1700

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

Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
-Skyfall-
Visitor
2 0 0

Hi, 

This works with my store as well!

-Skyfall-_0-1610302517187.png

 

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

-Skyfall-_0-1610302300227.png

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

I'm using the same DEBUT theme. 

Thank you! 

-Skyfall-
Visitor
2 0 0

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:

-Skyfall-_1-1610303105066.png

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

-Skyfall-_0-1610302982994.png

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

Thanks! 

 

knuths
Visitor
2 0 0

knuths_0-1610989806383.png

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

 

Jackie_Morales
Tourist
6 0 1

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.
Screenshot (77).pngScreenshot (78)_LI.jpg

suyash1
Shopify Partner
10721 1324 1700

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

dl.price {width: 100%;}
Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Jackie_Morales
Tourist
6 0 1

it worked, thank you so much!

suyash1
Shopify Partner
10721 1324 1700

@Jackie_Morales - welcome

Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Guleria
Shopify Partner
4074 801 1148
.template-product .price__regular {
    align-self: flex-start;
}

Please add this 

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
info_ZSD
Visitor
2 0 0

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
Tourist
4 0 1

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

Ljkeos
Excursionist
31 0 13

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

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

gracema
Tourist
12 0 1

 

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 😞

 

 

Screen Shot 2021-08-08 at 8.59.17 PM.png

suyash1
Shopify Partner
10721 1324 1700

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

Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
suyash1
Shopify Partner
10721 1324 1700

@gracema - please add this css and check 

.filters-toolbar-wrapper {
    border-bottom: none;
    border-top: none;
}
Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
gracema
Tourist
12 0 1

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

 

Screen Shot 2021-08-08 at 10.20.01 PM.png

suyash1
Shopify Partner
10721 1324 1700

@gracema - add this and check 

#AccessibleNav{
border-bottom: none;
}
Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
gracema
Tourist
12 0 1

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

gracema
Tourist
12 0 1

@suyash1  Sorry one more question I noticed the price does not look centered correctly, could you help me please?Screen Shot 2021-08-08 at 11.51.26 PM.png

suyash1
Shopify Partner
10721 1324 1700

@gracema - please add this css and check

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

.price dd {
    margin: 0;
}
Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
gracema
Tourist
12 0 1

it worked thank you!

 

Also my product page currently looks like this:

Screen Shot 2021-08-09 at 12.18.49 AM.png

 

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

Screen Shot 2021-08-09 at 1.02.39 AM.png

suyash1
Shopify Partner
10721 1324 1700

@gracema - please add this and check 

.collection-header h1 {
    background-color: #000;
    color: #fff;
    padding: 5px;
}
Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
gracema
Tourist
12 0 1

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

suyash1
Shopify Partner
10721 1324 1700

@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;
}

 

Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
gracema
Tourist
12 0 1

@suyash1 

it worked thank you!

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

Screen Shot 2021-08-09 at 1.23.01 AM.png

gracema
Tourist
12 0 1

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

suyash1
Shopify Partner
10721 1324 1700

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

Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
gracema
Tourist
12 0 1

no worries, thank you for all your help!~

suyash1
Shopify Partner
10721 1324 1700

@gracema - welcome.

Support me | To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.