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
9078 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
9078 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)
gracema
Tourist
12 0 1

@suyash1 would you happen to know if there is a way on the "product" page to hover over images, and then get another image to appear?

suyash1
Shopify Partner
9078 1129 1479
I do not know it much, 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

@suyash1 sorry for all the questions but on the main "homepage" how can I add another rectangle bar to "shop" tab please?

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

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

 

suyash1
Shopify Partner
9078 1129 1479

@gracema - please add this and check 

.filters-toolbar__product-count {
    display: none;
    visibility: hidden;
}
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
9078 1129 1479

@gracema - it is part of navigation bar, if you we make it like that then in future if you add more menu items then those too will be like that

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
AM13
Excursionist
11 0 6

Hello.

Thank you so much for this! Worked perfectly on my computer but it's a bit skewed still on mobile. Is there a fix for that?

Thanks!

KBookstore
Visitor
1 0 0

Hi, tried countless codes from the suggestions but nothing works. Here's our website: https://thekitchenbookstore.com/

Theme is Motion

We would want to center align the product name and cost plus if we can add an "add to cart" button.

Thank you in advance.

suyash1
Shopify Partner
9078 1129 1479

@KBookstore - you want link this?

also add to cart can be added but will need some coding changes

suyash1_0-1605764070565.png

 

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

Anyone know how to center my reviews under my title? The review is from an app called Judge.me.

Here's my website: pampasgal.com 

Bal
Visitor
1 0 0

Thanks for sharing the codes, I have tried a dozens and this is the only one works.

Bal_0-1602138918509.png

The title and price on collection page is finally center, but the code also center the price on product pages, is there any way to keep the price left on product page?

Bal_1-1602138956738.png

 

Thank you!!