Product page layout code help

Store Design
,
1

i want the price and quantity selector to be side by side. how can i achieve this please?

snipp
snipp931×523 22.5 KB

2

Hey @Connor1836

I don’t recommend using this code but for temporary solution you can use this, it works either way.

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
@media screen and (max-width: 767px) { 
.product__tax.caption.rte {
    margin-top: 25px !important;
}
.product .price {
    margin-top: -55px !important;
    margin-left: 160px !important;
    position: relative !important;
}
}
</style>

RESULT:

image
image348×761 52 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

3

hi mate thank you. its the other way round please. price first

4

Got it,

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
@media screen and (max-width: 767px) { 
.product-form__input {
    margin-left: 150px !important;
}
.product .price {
    top: -55px !important;
    position: relative !important;
}
.product__tax.caption.rte {
    margin-top: -50px !important;
}
}
</style>

RESULT:

image
image351×751 49 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

5

Hi,

Hope this will help

Most Shopify themes (Dawn included) stack elements vertically because they use flex-direction: column by default. Changing that for just the price and quantity area usually does the trick.

The most common fix:

  • Locate your product form

  • Wrap price and quantity elements

<div class="price-qty-row">
  {{ product.price | money }}
  <div class="product-form__input product-form__quantity">
    <!-- quantity selector code -->
  </div>
</div>
  • Add CSS to place them side by side

CSS example

.price-qty-row {
  display: flex;
  align-items: center;
  gap: 1rem; /* space between price and quantity */
}

.price-qty-row .product-form__quantity {
  margin: 0; /* remove theme's default spacing */
}