Solved

Center-aligning the placement of price on specific product pages

fredheimK
Excursionist
16 0 4

Hi,

I am on my way to opening an online store and have worked on the layout for a while. After reading through this forum, I managed to adjust the placement of both the title of the product(s) as well as the price(s). You can see this below in picture number 1. I did it all after copy-pasting some html code into the theme.css template.

What I now struggle with is two things: The first I can always work around. For the second, I've tried everything and am in need of help:

First: All text is automatically placed in the center now. (picture 1)
- I have to choose "left alignment" every time I create a new space, page, or text.
- It is a bit annoying, but works fine since I know how to "fix" the error.

Second: On each products' own page, the text is center-aligned but the price left-aligned. (picture 2)
- I have tried numerous ways of fixing this, but have not come to a conclusion. 
- Does anyone know how?  
- I want to know how to choose myself whether to have the text and price left aligned or center aligned.

Picture 1)

fredheimK_0-1614874903885.png

 

Picture 2)

fredheimK_2-1614875280824.png

 

In advance - thanks!

 

Kind regards,

Kristian

 

 

Accepted Solution (1)
Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

please Go to Online Store->Theme->Edit code and then go to  Asset->/theme.css ->paste below code at the bottom of the file.

#shopify-section-product-template .product-template__container .grid .grid__item .product__price .price{
  align-items: center !important;
}

 

View solution in original post

Replies 7 (7)

Kinjaldavra
Shopify Partner
2302 570 1422

Please provide website url  and if your store is password protected then also provide password So I will check and provide a solution here.

fredheimK
Excursionist
16 0 4

Sure, thanks!

www.wabba.no

Password: W2021

Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

please Go to Online Store->Theme->Edit code and then go to  Asset->/theme.css ->paste below code at the bottom of the file.

#shopify-section-product-template .product-template__container .grid .grid__item .product__price .price{
  align-items: center !important;
}

 

fredheimK
Excursionist
16 0 4

Thank you so much, Natztech! Worked out great. Impressed by how fast you helped me out. 

But, as normally happens, some parts are now not as I hoped. I hope you have the patience and skill to help me out a bit more : ).
If you see in the picture below, you'll see that the buttons are placed left and not aligned as the text. Do you know how to fix this? (Picture 3)

Also, the code I pasted is seen at the bottom of each product page (picture 4)

 

Picture 3:

fredheimK_0-1614880673516.png

 

Picture 4:

fredheimK_1-1614880785387.png

 

 

Kinjaldavra
Shopify Partner
2302 570 1422
#shopify-section-product-template .product-template__container .grid product-single .grid__item {
	text-align: -webkit-center !important;
}
fredheimK
Excursionist
16 0 4

Hi Natztech:

Where do I post this code?
I tried to post it in the theme.css code, but it did not have any effect.

Kind regards,

K

Kinjaldavra
Shopify Partner
2302 570 1422

please Go to Online Store->Theme->Edit code then go to Asset->/theme.css ->paste below code at the bottom of the file.

#shopify-section-product-template .product-template__container .grid product-single .grid__item {
	text-align: -webkit-center !important;
}