Solved

Center Product Title and Price Under Product Image in Collections

kailasachse
Shopify Partner
85 0 32

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
9077 1129 1479

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI

View solution in original post

suyash1
Shopify Partner
9077 1129 1479

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;}
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI

View solution in original post

Replies 59 (59)

Developer-G
Shopify Partner
3032 593 846

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

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
kailasachse
Shopify Partner
85 0 32

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.
Developer-G
Shopify Partner
3032 593 846

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

dl.price {
    align-items: center;
}
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
kailasachse
Shopify Partner
85 0 32

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
9077 1129 1479

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
kailasachse
Shopify Partner
85 0 32

@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
9077 1129 1479

@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;}
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
kailasachse
Shopify Partner
85 0 32

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
85 0 32

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
9077 1129 1479

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;}
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
kailasachse
Shopify Partner
85 0 32

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
9077 1129 1479

share your site URL

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
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

Developer-G
Shopify Partner
3032 593 846

Add this css too 

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

 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
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
85 0 32

@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
9077 1129 1479

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
-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
9077 1129 1479

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

dl.price {width: 100%;}
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
Jackie_Morales
Tourist
6 0 1

it worked, thank you so much!

suyash1
Shopify Partner
9077 1129 1479

@Jackie_Morales - welcome

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
Developer-G
Shopify Partner
3032 593 846
.template-product .price__regular {
    align-self: flex-start;
}

Please add this 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
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
9077 1129 1479

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
suyash1
Shopify Partner
9077 1129 1479

@gracema - please add this css and check 

.filters-toolbar-wrapper {
    border-bottom: none;
    border-top: none;
}
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
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
9077 1129 1479

@gracema - add this and check 

#AccessibleNav{
border-bottom: none;
}
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
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
9077 1129 1479

@gracema - please add this css and check

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

.price dd {
    margin: 0;
}
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
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
9077 1129 1479

@gracema - please add this and check 

.collection-header h1 {
    background-color: #000;
    color: #fff;
    padding: 5px;
}
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
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
9077 1129 1479

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

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
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
9077 1129 1479

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
gracema
Tourist
12 0 1

no worries, thank you for all your help!~

suyash1
Shopify Partner
9077 1129 1479

@gracema - welcome.

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI