Prestige theme : how to place the "Add to cart" button next to the quantity selector ?

Store Design
, ,
1

Hi,

I’ve been struggling all day long with aligning two elements on the same line on my product page template as it seems to be about more than CSS.

Here’s the URL to my preview page : https://wpz3qzw0b6rlg3eb-73117630728.shopifypreview.com/products/lintriguant

You will find visuals below showcasing what I would like to do compared to what I currently have.

Thank you for helping !

add-to-cart-current.jpg
add-to-cart-current.jpg1953×800 94.9 KB

add-to-cart-wanted.jpg
add-to-cart-wanted.jpg1842×758 85.9 KB

2

Hello @ChrisRndr ,

To align two elements in the same line, follow the steps below:

  1. Navigate to Online Store → Themes → Edit Code.
  2. Find the file “theme.css”.
  3. Go to the bottom of the page and paste the code.
.product-info__block-item[data-block-type="quantity-selector"] {
    display: inline-block;
    width: 30%;
}

.product-info__block-item[data-block-type="buy-buttons"] {
    display: inline-block;
    width: 70%;
}
3

  1. Online Store → Themes → Edit Code.

  2. Find the file “theme.css”.

  3. Go to the bottom of the page and paste the code.

    put This Css In Yor theme.css

@media screen and (min-width:550px){
	.product-info__block-item[data-block-type="quantity-selector"] {
	    display: inline-block;
	    width: 30% !important;
            margin-right: 5%;
	}
	.product-info__block-item[data-block-type="buy-buttons"] {
	    display: inline-block;
	    width: 65% !important;
	}
}​
4

This worked perfectly, thank you so much !

5

Thanks for your reply, it works !

6

Hi, this works but i want to show the buy it now button in full length.
how can we do so??