Solved

How to change "add to cart" button location on product page

laserbeampq
Excursionist
38 0 1

My current product page (when looking at the "add to cart" area) looks like this:

Screenshot 2024-05-10 at 6.02.53 PM.png

  

However, I want it to look like this:

Screenshot 2024-05-10 at 6.02.53 PM copy.png

 

How can I make this happen?

 

Shopify theme: Ride

URL: wigmadcosplay.com (password: yellow)

Accepted Solution (1)

HDL-Shin
Shopify Partner
80 20 15

This is an accepted solution.

Hi @laserbeampq

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

HDLShin_0-1715387963782.png

Step 2: Search file base.css or theme.css 

Step 3: Insert the below code at the bottom of the file -> Save

.product__info-container .product-form {
   margin: 0 10px !important;
}

.product-form__buttons .product-form__submit {
   margin-bottom: 0 !important;
}

Step 4: Search file theme.liquid and Insert the below code at the bottom of the file -> Save

HDLShin_1-1715388123444.png

 

{% if template.name == 'product' %}
    <script>
        window.onload = () => { 
           let price_per_item = document.querySelector('.price-per-item__container');
           let add_to_cart = document.querySelector('.product-form:has(form[data-type="add-to-cart-form"])');
           price_per_item.insertAdjacentElement('beforeend', add_to_cart);
           price_per_item.style.display = "flex";
        }
    </script>
{% endif %}

Final Result: 

HDLShin_2-1715388273816.png

Hope this can help you

Kind regards,

HDL-Shin

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
♥️♥️♥️ HDL-Shin || Shopify Partner ♥️♥️♥️

View solution in original post

Reply 1 (1)

HDL-Shin
Shopify Partner
80 20 15

This is an accepted solution.

Hi @laserbeampq

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

HDLShin_0-1715387963782.png

Step 2: Search file base.css or theme.css 

Step 3: Insert the below code at the bottom of the file -> Save

.product__info-container .product-form {
   margin: 0 10px !important;
}

.product-form__buttons .product-form__submit {
   margin-bottom: 0 !important;
}

Step 4: Search file theme.liquid and Insert the below code at the bottom of the file -> Save

HDLShin_1-1715388123444.png

 

{% if template.name == 'product' %}
    <script>
        window.onload = () => { 
           let price_per_item = document.querySelector('.price-per-item__container');
           let add_to_cart = document.querySelector('.product-form:has(form[data-type="add-to-cart-form"])');
           price_per_item.insertAdjacentElement('beforeend', add_to_cart);
           price_per_item.style.display = "flex";
        }
    </script>
{% endif %}

Final Result: 

HDLShin_2-1715388273816.png

Hope this can help you

Kind regards,

HDL-Shin

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
♥️♥️♥️ HDL-Shin || Shopify Partner ♥️♥️♥️