Center Product Title and Price Under Product Image in Collections

Solved

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
Guleria
Shopify Partner
1305 269 361

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.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.

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
Guleria
Shopify Partner
1305 269 361

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

dl.price {
    align-items: center;
}
Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.

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
suyash1
Shopify Partner
2735 290 452

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
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
Guleria
Shopify Partner
1305 269 361
.template-product .price__regular {
    align-self: flex-start;
}

Please add this 

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.

@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
suyash1
Shopify Partner
2735 290 452

@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
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes

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