Prestige theme - How do I place the Add to Cart button next to the Quantity Selector?

[Teddy9]

Hi,

I am struggling with two different question regarding the product detail page. I sincerely hope one of you can help me out because I have tried it all. 

Store url: https://another-labelstore.myshopify.com/

pw: another

Question no 1.:

I'd like to place the 'Add to Cart' button right next to the Quantity Selector. I'd tried suggestions I found from a previous thread back in 2020 but this did not work unfortunately.

I prepared a slide with a visual reference as seen below;

Question no 2.:

How do I  move the 'additional information' collapsible button to underneath the ' Add to Cart' button?

I prepared a slide with a visual reference as seen below;

Thanks in advance!

[Denishamakwana · Accepted solution]

Please add below css in bottom of assets/theme.css file

.ProductForm__QuantitySelector {
         display: inline-block;
         margin-right: 15px;
}
.ProductForm__BuyButtons {
            display: inline-block;
}
.Product__Aside {
          position: absolute;
          right: 0;
         bottom: -100px;
        max-width: 550px;
}

Thank you.

[Teddy9 · Accepted solution]

You rock! Big Time! Your code almost fixed both issues in one go! I made this print screen for your reference. It seems it needs a small change. Can you please take a look at the result?

Left mobile, middle desktop with me scrolling, right desktop with my scrolling. 

You see in all three the 'Ádd to Cart' is not yet next to the 'Quantity Selector' and the information collapsible content block seems to have a fixed position and is not reaction to scrolling as the other content blocks. 

Thank you very much for your help. I really appreciate it!

[Denishamakwana · Accepted solution]

Please add below css in bottom of assets/theme.css file

.ProductForm__QuantitySelector {
         display: inline-block;
         margin-right: 15px;
}
.ProductForm__BuyButtons {
            display: inline-block;
}
.Product__Aside {
          position: absolute;
          right: 0;
         bottom: -100px;
        max-width: 550px;
}

Thank you.

[Teddy9 · Accepted solution]

You rock! Big Time! Your code almost fixed both issues in one go! I made this print screen for your reference. It seems it needs a small change. Can you please take a look at the result?

Left mobile, middle desktop with me scrolling, right desktop with my scrolling. 

You see in all three the 'Ádd to Cart' is not yet next to the 'Quantity Selector' and the information collapsible content block seems to have a fixed position and is not reaction to scrolling as the other content blocks. 

Thank you very much for your help. I really appreciate it!

[Denishamakwana · Accepted solution]

Hi,

I check it again in all view up to mobile

Position of add to cart button is next to quantity selector.

thank you. 

[Teddy9]

Hi, 

Yes it was fixed and I let you know in a previous message. Thanks for your help!!

Marked as a great solution 🙂

[japchi]

Hi,

I'm having the same problem and and tried your code but didn't work for me. Any other work around?  

[Teddy9]

Hey,

Take a look at one of our stores and select a product all the way to the product page.

https://www.another-label.com/

To do this we used this code :

/**
* ----------------------------------------------------------------------------
* PRODUCT PAGE
* ----------------------------------------------------------------------------
*/

.ProductForm__QuantitySelector {
display: inline-block;
margin-right: 15px;
margin-bottom: 0px;}

.ProductForm__BuyButtons {
display: inline-block;}

.ProductForm_Inventory .js-qty {
margin-top: 10px;}

.Product__Tabs {
margin: 20px 0; }

Hope this helps!

Cheers,

Teddy

[LuxifyCosmetic]

I have the same problem, but none of the codes are working.