Shopify themes, liquid, logos, and UX
Want to know how I can make the product title and price on the same with. With a coloured box around it.
Here is how the current design looks:
This is what I want it to look like:
Url: https://flaud.world/
Password: 202135283
Thanks,
B
Solved! Go to the solution
This is an accepted solution.
Float the title to the left and the price to the right
.card-information__wrapper .price { float:right; }
Quickfix
Add a custom html/liquid section with the following style rule
<style>.card-information__text { float: left; } </style>
Note the float version does not account for long titles or bigger price areas.
Alternative:
<style>
.card-information__text { display: inline; }
.card-information__wrapper .price { display: flex-inline; }
</style>
Test both throughly with long content, sale prices, etc
Beyond that you would need to combine the product cards title header with the price block which is set to flex by default so they wont mesh together very well without work.
Contact me if you need this type of customization, paull.newton+shopifyforums@gmail.com
FYI: assuming your still developing but just in case "copy" in product names is something to be really avoided i.e. /products/copy-of-copy-of-copy-of-copy-of-copy-of-sweatsuit-pullover
After adding custom html/liquid, it looked like this:
I tried changing the float to right, which is where I want the price to be and it looked like this:
What do I do to make the title on the left, and price on the right?
Thank you for the heads up, just added copies quickly to work on the look.
This is an accepted solution.
Float the title to the left and the price to the right
.card-information__wrapper .price { float:right; }
It looks even now:
uneven**
User | RANK |
---|---|
72 | |
65 | |
55 | |
54 | |
42 |
As a business owner, have you ever wondered when your customer's first impression of yo...
By Skye Jun 6, 2023We're excited to announce improvements to the threaded messaging experience in our communi...
By TyW May 31, 2023Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...
By Jacqui May 30, 2023