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;
}
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024