Centering Title of Product - DEBUT THEME

Astronaut
952 116 219

Glad you got it figured out. Anytime you can use existing classes is better, I'm sure your solution will help Jennifer as well. Good job  : D

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
New Member
1 0 0

@frankie-rae Thanks for posting your solution! I have been scouring blogs for this solution and after trying a dozen different "solutions" - this code finally did what I needed done. Cheers!

0 Likes
New Member
1 0 0

@frankie-rae thank you so much for sharing. This was exactly what I needed to complete my store set-up. Question, do you know how I can center my price too? 

0 Likes
New Member
2 0 0

I'm wondering the same thing! I just went through all the steps and centered my product titles so thank you everyone! Just need to fix the price :)


@jcbrekka wrote:

@frankie-rae thank you so much for sharing. This was exactly what I needed to complete my store set-up. Question, do you know how I can center my price too? 


 

0 Likes
New Member
2 0 0


@jcbrekka  I just found this on another post and it worked for me (I added it at the bottom of theme.scss.liquid in assets):

 

.grid-view-item .price{justify-content: center; }   

 

Hope that works for you!

0 Likes
New Member
5 0 0

Hi everyone,

 

I am new on here and have spent two days trying to center my product titles on my collection page.  I have the JUMP START theme and have tried all of the suggestions for dozens of other common themes and nothing works for me. 

 

Image attached if anyone can help me please :( Capture33.JPG

0 Likes
New Member
1 0 0

Try this: 

1. go to css liquid theme 

2. ctrl+f  ".price_regular"

3. Scroll up until you find ".price { "

4. The display field will say "flex", replace that with the following: 
"display: block;
text-align: center; "

 

5. Final code under .price should look like this:

.price {
display: block;
text-align: center;

0 Likes
New Member
5 0 0

Hi @Vox_Leo ! Thank you so much for your help!

 

It doesn't work on my variants (I display all my variants).  www.capukids.com

 

I found the code, mine did not include "regular" in it but it worked when I added the code on my test page where it only showed the collection images. On the test page it centered the titles.  But then when I added it to my live page, where I show my all my variants in the store, the code did not work...

Do I need to do something specific for it to work on the variants?

 

I really appreciate your help.

0 Likes
New Member
2 0 0

@Ninthony  Thank you! It worked for me. I was able to align my Product Title back to the left on the Product Page by replacing

<div class="product-single__meta">

with

<div class="product-single__meta align-left">

 and adding 

 

.align-left{
text-align: left;
}

 

to to the bottom of theme.scss.liquid file in your Assets folder as you suggested.

 

Can you recommend a code to do same with my product description (to align it to the left), as it still stays centered.

 

Here is the link to my web-site product page:

https://wonderobjectsshop.com/collections/necklaces/products/pink-tourmaline-drop-briolette-freshwat...

 

 

Thanks!
Vira

0 Likes
Highlighted
Astronaut
952 116 219

You can add this to the bottom of your theme.scss.liquid:

 

.product-single__description.rte {
    text-align: left;
}
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes