Make price appear on the same line as the title in a product block

Hallowxx · February 4

https://www.hallowapotheca.com

I’d like to make the price appear on the same line as the title of product blocks as shown in attached pic. Any way to do that? I’ve tried various codes from similar questions on the forum but they haven’t worked. TIA

Edited February 4 by Hallowxx
Added site url

Ziggy · February 6

Can you share your website URL and this page? Thanks!

Hallowxx · February 7

The website is https://www.hallowapotheca.com/

and the url for the page shown is https://www.hallowapotheca.com/shop

Ziggy · February 7

Try this Custom CSS:

section[data-section-id="63cc7ae8b155d84db08b356f"] {
  #productDetails {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .product-price {
    margin-top: 1.5em;
  }
}

Edited February 7 by Ziggy

Hallowxx · February 7

I plugged that into Custom CSS but nothing changed

Hallowxx · February 8

This is what ended up working for me:

div.productDetails {
    display: flex;
    align-items: top;
    justify-content: space-between;
}
div.productDetails>* {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

Make price appear on the same line as the title in a product block

Recommended Posts

Hallowxx

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

Ziggy

Link to comment

Hallowxx

Link to comment

Ziggy

Link to comment

Hallowxx

Link to comment

Hallowxx

Link to comment

Create an account or sign in to comment

News

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources