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

Solved
bhristopher
Excursionist
28 0 5

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)
PaulNewton
Shopify Partner
5516 500 1132

This is an accepted solution.

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

    .card-information__wrapper .price { float:right; }

New Feature: Automatic free shipping discounts


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


Defeat problems ,Learn To Ask Questions The Smart Way

View solution in original post

Replies 5 (5)
PaulNewton
Shopify Partner
5516 500 1132

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

 

New Feature: Automatic free shipping discounts


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


Defeat problems ,Learn To Ask Questions The Smart Way

bhristopher
Excursionist
28 0 5

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
5516 500 1132

This is an accepted solution.

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

    .card-information__wrapper .price { float:right; }

New Feature: Automatic free shipping discounts


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


Defeat problems ,Learn To Ask Questions The Smart Way

bhristopher
Excursionist
28 0 5

It looks even now:

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

bhristopher
Excursionist
28 0 5

uneven**