Center-aligning the placement of price on specific product pages

Solved
fredheimK
New Member
4 0 0

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

 

 

0 Likes
Natztech
Shopify Partner
344 87 160

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

Want to theme customize Hire us.
If helpful then please Like and Accept Solution

E-mail :natztech2312@gmail.com
Shopify Design Changes | Shopify Custom Theme Design and Development

Whatsapp :
0 Likes
fredheimK
New Member
4 0 0

Sure, thanks!

www.wabba.no

Password: W2021

0 Likes
Natztech
Shopify Partner
344 87 160

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;
}

 

Want to theme customize Hire us.
If helpful then please Like and Accept Solution

E-mail :natztech2312@gmail.com
Shopify Design Changes | Shopify Custom Theme Design and Development

Whatsapp :
0 Likes
fredheimK
New Member
4 0 0

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

 

 

0 Likes
Natztech
Shopify Partner
344 87 160
#shopify-section-product-template .product-template__container .grid product-single .grid__item {
	text-align: -webkit-center !important;
}
Want to theme customize Hire us.
If helpful then please Like and Accept Solution

E-mail :natztech2312@gmail.com
Shopify Design Changes | Shopify Custom Theme Design and Development

Whatsapp :
0 Likes
fredheimK
New Member
4 0 0

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

0 Likes
Natztech
Shopify Partner
344 87 160

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;
}

 

Want to theme customize Hire us.
If helpful then please Like and Accept Solution

E-mail :natztech2312@gmail.com
Shopify Design Changes | Shopify Custom Theme Design and Development

Whatsapp :
0 Likes