Featured Collection - product title and price same line with a coloured box around it (dawn theme)

Solved
bhristopher
Tourist
20 0 1

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:

current-design.png

 

This is what I want it to look like:

revised-design.png

 

Url: https://flaud.world/

Password: 202135283

Thanks,

B

Accepted Solution (1)

Accepted Solutions
PaulNewton
Shopify Partner
3370 216 645

This is an accepted solution.

Float the title to the left and the price to the right

    .card-information__wrapper .price { float:right; }
Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com

View solution in original post

Replies 5 (5)
PaulNewton
Shopify Partner
3370 216 645

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

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
bhristopher
Tourist
20 0 1

After adding custom html/liquid, it looked like this:

Screen Shot 2021-11-13 at 6.20.59 PM.png

 

I tried changing the float to right, which is where I want the price to be and it looked like this:

Screen Shot 2021-11-13 at 6.21.18 PM.png

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.

PaulNewton
Shopify Partner
3370 216 645

This is an accepted solution.

Float the title to the left and the price to the right

    .card-information__wrapper .price { float:right; }
Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com

View solution in original post