Center Product Title & Price - Debut Theme

Brian_Williams3
New Member
2 0 0

Hello,

I am trying to tweak the alignment of Product Titles and Price for a collection on my home page. I have gone through the forums and found that adding this solution to theme.scss.liquid worked for many:

.grid-view-item__title, .grid-view-item__meta {
  text-align: center;
}

This only centered my Product Titles, the Prices are still left aligned. Another thread had a response from someone dealing with the same issue. They were instructed to add the following code and it worked for them.

.product-card .product-price {
    justify-content: center;
}
 

I added this as well and it did not align my prices to the center. Does anyone have any other suggestions for getting both of these items center-aligned?

Thank you!

 

Replies 30 (30)
SDAgency1
Tourist
6 0 8

I have the same question. It's sort of driving me nuts. I can get the product title centered, but not the price.

SDAgency1
Tourist
6 0 8

Brian Williams, try this. It worked for me FINALLY!

 

.product-card .price {
    justify-content: center !important;
}

 

Brian_Williams3
New Member
2 0 0

THANK YOU SO MUCH! It worked! I was on the right trail but was calling out the wrong items. I really appreciate the help.

Rich14
New Member
1 0 0

OMG thank you for this.  I've spent an hour at least trying to figure this out... and trying many other suggestions.  Finally! 

SunnyBhoola
Tourist
3 0 1

Hi Guys 

 

I'm having the same issue. I have input the suggested code but on my product page the price is still aligned to the left. Appreciated if anyone has a solution out there. I have attached a copy of the page as well as the code. 

Denis_A
Shopify Partner
289 39 49

SunnyBhoola, could you send me a link to your product page?


@SunnyBhoola wrote:

Hi Guys 

 

I'm having the same issue. I have input the suggested code but on my product page the price is still aligned to the left. Appreciated if anyone has a solution out there. I have attached a copy of the page as well as the code. 


 

Get help with your Shopify store that you are looking for.
Shoot me an email: denis@thewebave.com
https://thewebave.com/
Denis_A
Shopify Partner
289 39 49

@SunnyBhoola wrote:

https://teal-brown.myshopify.com/admin/themes/64377815104/editor#/products/banana-leaf-on-cream-canv...


@SunnyBhoola that's the admin link. I can't get an access to it.

Get help with your Shopify store that you are looking for.
Shoot me an email: denis@thewebave.com
https://thewebave.com/
SunnyBhoola
Tourist
3 0 1
Denis_A
Shopify Partner
289 39 49

@SunnyBhoola I still need a password
Screen Shot 2019-03-06 at 1.07.50 PM.png

Get help with your Shopify store that you are looking for.
Shoot me an email: denis@thewebave.com
https://thewebave.com/
PaewArun
Tourist
5 1 3

Hello.

 

Can you also help me please? I tried adding the code for both title and price, but only price came to the center T_T

Denis_A
Shopify Partner
289 39 49

@PaewArun Could you send me a link to your product page?

Get help with your Shopify store that you are looking for.
Shoot me an email: denis@thewebave.com
https://thewebave.com/
PaewArun
Tourist
5 1 3
versarecreation
New Member
4 0 0

What line are you adding this in at? Are you replacing any existing code with it or just inserting it?

Mcon
Excursionist
12 0 12

for price centering try this if all else fails.... put at bottom of theme.css

 

.price{
display: block;
text-align:center !important;
}

Maximama
Tourist
4 0 1

hello, 

 

is it possible to just only align products titles & price on Home Page but not the Product Page ?

 

Thanks

 
 
 
Mcon
Excursionist
12 0 12

Hello Maximama, So ive noticed it centers the title and price on the other page to. Ive done a a heap of fkn around and a managed to solve the problem. If you can take those things back to the way they were i can show you a step by step to center position the title and price on the collection page and not in the actual product page itself;

 

Step 1: goto theme.scss.liquid
Find the below section, it should be around line 7122 or down a little further

.product-card__title {

  border-bottom: 1px solid transparent;

  display: inline;

}

--------------------------------------------------------------

Step 2: make it look like this. you will have to add text-align:center !important and replace the world "inline" to "block"

 

.product-card__title {

  border-bottom: 1px solid transparent;

  display: block;

  text-align:center !important

}
---------------------------------------------------------------------

Step 3: Press save, that should center your product TITLE on your collection page.......NOW for the next step the price

---------

Step 4: add this bottom code to the bottom of your theme.scss.liquid

 

.product-card .price {
display:block;
text-align: center;
}

__________________________________________________

Step 5 Save: that should of centered the price on your collection page and if you look at your product page the title and price should still be on the left (NOTE im doing this in debut theme)

 

Let me know if that worked cause Im a Novice Beginner Rookie on editing and i was amazed i figured that one out on my own and would like to see if it worked for anyone else

Maximama
Tourist
4 0 1

Hello Mcom,

 

I Just tried and follow your steps, its worked, thank sooo much 🙂

but when I move the cursor to the item and there is an underline below the picture, please see attached screenshot photos, is it possible to remove it ? Heaps Thanks 

Screen Shot 2020-01-11 at 10.55.41 pm.png

Mcon
Excursionist
12 0 12

Thats standard with the Debut thing isn't???

really easy to remove

 

Go back to what you edited before in theme.sccs.liquid  

This is what your looking for:

.product-card__title {

  border-bottom: 1px solid transparent;

  display: block;

  text-align: center !important

}

-------------------------------

What you want to do is where is says
border-bottom: 1px solid transparent;

 

CHANGE TO

 

border-bottom: none; 

 

that should remove it completely, you can make it larger by upping the PX which is what i did on my site.

https://chllen.com/collections/all-product

 

Hope this help 🙂

 

Mark