Center Product Title and Price Under Product Image in Collections

Solved
Highlighted

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.
0 Likes
Highlighted
Shopify Partner
1016 210 254

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

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
1 Like
Highlighted

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.
0 Likes
Highlighted
Shopify Partner
1016 210 254

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

dl.price {
    align-items: center;
}
Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
1 Like
Highlighted

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.
0 Likes
Highlighted
Astronaut
789 70 98

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

you are welcome to contact me.
My email - suyash.patankar@gmail.com
1 Like
Highlighted
Shopify Partner
1016 210 254
.template-product .price__regular {
    align-self: flex-start;
}

Please add this 

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
1 Like
Highlighted

@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.
0 Likes
Highlighted
Astronaut
789 70 98

@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;}
you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
Highlighted

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.
0 Likes