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

[bhristopher]

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

[PaulNewton]

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, [email protected] 

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

[bhristopher]

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.

[PaulNewton · Accepted solution]

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

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

[bhristopher]

It looks even now:

[bhristopher]

uneven**