Center Product Title & Price - Debut Theme

Highlighted
Shopify Partner
152 14 18

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

Shopify Expert Support
denisaksutik@gmail.com
https://thewebave.com/
0 Likes
Highlighted
Tourist
5 1 1

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

0 Likes
Highlighted
Shopify Partner
152 14 18

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

Shopify Expert Support
denisaksutik@gmail.com
https://thewebave.com/
0 Likes
Highlighted
Tourist
5 1 1

Hello.

 

I already got the issue resolved as in this thread, thanks!

https://community.shopify.com/c/Shopify-Design/Debut-theme-product-title-on-collection-page-won-t-ce...

0 Likes
Highlighted
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?

0 Likes
Highlighted
Excursionist
11 0 5

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

 

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

0 Likes
Highlighted
Tourist
4 0 1

hello, 

 

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

 

Thanks

 
 
 
0 Likes
Highlighted
Excursionist
11 0 5

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

1 Like
Highlighted
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

0 Likes
Highlighted
Excursionist
11 0 5

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

0 Likes