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

Solved

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

ChrisRndr
Shopify Partner
5 0 0

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.jpgadd-to-cart-wanted.jpg

Accepted Solution (1)
Raj-webdesigner
Shopify Partner
326 77 78

This is an accepted solution.

  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;
	}
}​

 

Are you looking for Shopify Developer then your search is over I will help you


If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


View solution in original post

Replies 4 (4)

devmont-digital
Shopify Partner
132 31 34

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%;
}
Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
Raj-webdesigner
Shopify Partner
326 77 78

This is an accepted solution.

  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;
	}
}​

 

Are you looking for Shopify Developer then your search is over I will help you


If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-Mail@gmail.com


ChrisRndr
Shopify Partner
5 0 0

This worked perfectly, thank you so much !

ChrisRndr
Shopify Partner
5 0 0

Thanks for your reply, it works !