Move quantity picker on the left of price - product page

Store Design
,
1

Hi all, i was trying to figure out how to move quantity picker on the left of the price and align them horizzontally.

www.danicoffeeshop.com

Theme: SENSE 2.0

2

@clavilla57
add below css into base.css file

@media (min-width:961px)  
{
div#Quantity-Form-template--15983867265215__main {
    margin-top: -15% !important;
}
.price__container {
    margin-left: 25%;
}
.product__text.caption-with-letter-spacing {
    text-transform: uppercase;
    margin-left: 26%;
}
}

Ujjaval_0-1679923433465.png
Ujjaval_0-1679923433465.png1581Ă—787 133 KB

1 Like
3

There’s a way to move also “Imposte incluse”? it’s related to the price, tax

4

@clavilla57
try below one

@media (min-width:961px)  
{
div#price-template--15983867265215__main {
    margin-left: 25%;
}
.product__tax.caption.rte {
    margin-left: 25%;
}
div#Quantity-Form-template--15983867265215__main {
    margin-top: -11%;
}
}

Ujjaval_0-1679991235501.png
Ujjaval_0-1679991235501.png1591Ă—800 90.3 KB

1 Like
5

Your code work as intended, but doesn’t look quite good.

May i ask you last things?

Move add to cart on the right side of quantity picker, and leave price where it was

6

@clavilla57

Add below one for that

@media (min-width:961px)  
{
button#ProductSubmitButton-template--15983867265215__main {
    margin-top: -17%;
    margin-left: 40%;
}
}

You want it look like this na ?

Ujjaval_0-1679996131590.png
Ujjaval_0-1679996131590.png1586Ă—792 94.6 KB

1 Like
7

yes this is what i was looking for.

It was really good if i can align the two boxes on the same line (quantity picker and add to cart) they are a little bit misaligned

theres a way to make dynamic button larger?

covering the space from quantity picker to add to cart button

8

@clavilla57
It’s already aligned you want somethings just like this ?

Ujjaval_0-1679997010092.png
Ujjaval_0-1679997010092.png1581Ă—797 94.6 KB

button#ProductSubmitButton-template--15983867265215__main {
    margin-top: -17%;
    margin-left: 40%;
    width: 60%;
}
2 Likes
9

You are the best, thanks a lot for all the things you guide me in to.

I’ll leave you thumbs up on every comment.

And if u care to help me with another things would be much appreciated

If u see i’ve done a compressed description, but it cover too much page on the right.

The margin i had on the left (image) and on the right (description) isn’t the same.

I would like to have the same margin i had on the left also on the right

and i have tried to change the interal background color of the tab, without results :rofl: