Liquid, JavaScript, themes, sales channels
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)
Picture 2)
In advance - thanks!
Kind regards,
Kristian
Solved! Go to the solution
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;
}
Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.
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;
}
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:
Picture 4:
#shopify-section-product-template .product-template__container .grid product-single .grid__item {
text-align: -webkit-center !important;
}
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
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;
}
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024