Change the format of elements on product page

[brandnkay]

Hi I am struggling to locate the html within my theme to achieve the layout I am looking for.  I have managed to use my browsers inspect tool to do this but i cannot seem to find the code in shopify to change this, also even though i have managed to move the ATC button it now does not work as i don't think i have brought all the functionality with it.

Please see screenshots attatched.

preview link - https://y8eup0v6uqso6dwf-86586196317.shopifypreview.com

Your help is appreciated, thanks in advance!

[brandnkay]

The first ss is the current layout the second ss is the desired layout.

[Anshul_arora · Accepted solution]

Hello @brandnkay ,

I understand you are looking to change the format of the product detail page or change the positioning 'Add To Cart' CTA

Please add the code at the bottom of the theme.liquid file before </body> tag and save

<style>

product-form.product-form {
position: absolute !important;
top: 125px !important;
left: 225px !important;
width: 40%;
}

.button--full-width {
background: black;
color: white;
}

button.shopify-payment-button__button.shopify-payment-button__button--unbranded.BUz42FHpSPncCPJ4Pr_f.jjzYeefyWpPZLH9pIgyw.RWJ0IfBjxIhflh4AIrUw {
display: none !important;
}

</style>

Output -: https://prnt.sc/GuJxXgR42yOA

I hope the code helps you.

Please share if you have any queries.

Thank you.

[brandnkay]

Thank you very much!

[Anshul_arora]

Hello @brandnkay ,

Thank you for accepting my solution.

Please also liked the solution.

Thank you.

[brandnkay]

although your code worked, this is the output -> as you can see the add to cart button is longer than the box above, i need this to be inline

[brandnkay]

i also need the gap from the quantity selector to the add to cart button to be 15px

[Anshul_arora]

You can adjust the button length by adjusting the width https://prnt.sc/UNFkkjCfS24s 

And to minimize the gap change left property px https://prnt.sc/Vw7-JSpdEdYA

Kindly minimize the width % and left px