Product page layout code help

Store Design
,

Topic summary

Main issue: Arrange the product price and quantity selector side by side on the product page.

Proposed workaround (temporary): Add a CSS snippet to theme.liquid just above the tag. It targets mobile screens (max-width: 767px) to adjust spacing:

  • .product__tax .caption.rte { margin-top: 25px !important; }
  • .product .price { margin-top: -55px !important; margin-left: 160px !important; position: relative !important; }

Effect: On mobile, the price is shifted to sit beside the quantity selector. Screenshots were provided to show the result.

Notes:

  • The responder explicitly does not recommend this as a permanent solution and frames it as a temporary fix.
  • The approach relies on CSS overrides and applies only to mobile breakpoints.

Status: No permanent/theme-structured solution was provided. The request appears partially addressed with a temporary CSS adjustment; the discussion remains open for a more robust approach.

Summarized with AI on January 1. AI used: gpt-5.
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 Likes
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 */
}