Price and description of products in my collection on homepage are not aligned. The price is at the left and the description slightly more right.
password: saghoo
Topic summary
A Shopify store owner is experiencing misalignment between product prices and descriptions in their homepage collection—prices appear on the left while descriptions are slightly more to the right.
Proposed Solutions:
Multiple developers offered CSS-based fixes:
-
BSSCommerce-B2B & BSS-TekLabs: Suggested adding custom CSS code to the theme.liquid file before the
</head>or</body>tag to align elements -
Tech_Coding: Recommended inserting CSS targeting
.full-unstyled-linkwithtext-align: justifybefore</body>in theme.liquid -
Made4uo-Ribe: Provided two alignment options:
- Center alignment: Add CSS to main.css/base.css targeting
.card__content .card-informationwithtext-align: center - Left alignment: Target both
.card__heading aand price elements withtext-align: left
- Center alignment: Add CSS to main.css/base.css targeting
All solutions involve editing theme files (theme.liquid or CSS files) through Admin → Online Store → Themes → Edit code. Screenshots were shared showing expected results. The issue remains unresolved as the original poster has not confirmed which solution worked.
2 Likes
@blublu ,
Step 1. Go to Admin → Online store → Theme > Edit code
Step 2. Find the file theme.liquid.
Step 3. Add this code above
Result:
- Here is the solution for you @blublu
- Please follow these steps:
- Then find the theme.liquid file.
- Then add the following code at the before tag and press ‘Save’ to save it.
- Here is the result you will achieve:
- Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you @blublu .
Hello @blublu
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Hi @blublu
Do you want it center? or left?
Check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
.card__content .card-information {
text-align: center;
}
And Save. To center the price.
Result:
.card__heading a {
text-align: left !important;
}
And Save. Both in the left.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
1 Like