Solved

Change the format of elements on product page

brandnkay
Tourist
19 0 0

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.

 

Screenshot 2024-05-23 at 10.05.55.pngScreenshot 2024-05-23 at 10.05.45.png

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

 

Your help is appreciated, thanks in advance!

Accepted Solution (1)

Anshul_arora
Navigator
408 115 80

This is an 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

Anshul_arora_0-1716465337248.png

I hope the code helps you.

Please share if you have any queries.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Replies 7 (7)

brandnkay
Tourist
19 0 0

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

Anshul_arora
Navigator
408 115 80

This is an 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

Anshul_arora_0-1716465337248.png

I hope the code helps you.

Please share if you have any queries.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
brandnkay
Tourist
19 0 0

Thank you very much!

Anshul_arora
Navigator
408 115 80

Hello @brandnkay ,

Thank you for accepting my solution.

Please also liked the solution.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
brandnkay
Tourist
19 0 0

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

Screenshot 2024-05-23 at 12.58.21.png

brandnkay
Tourist
19 0 0

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

Anshul_arora
Navigator
408 115 80

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

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here