Move Add to Cart/Buy It Now Buttons under Price on Product Pages

Highlighted
Tourist
9 0 4

I am currently using the Artisan theme.  My products have exceptionally long descriptions so a user has a lot of scrolling to do in order to get to the Add to Cart/Buy It Now buttons and product selection options.  I would like to move that section somewhere above the product descriptions (like under the price).  Can someone help me with how to alter code to do so?

 

Thanks a ton.

 

Shay

0 Likes
Shopify Partner
88 4 14

Hey there,

 

Are you comfortable editing the code?

Jay Friedmann | Developer @ Swiss Media
- Was my reply helpful? Click Like to let me know!
0 Likes
Pathfinder
98 12 28

Another way would be to fix the header so that people can always see the navigation and cart no matter where they are on the screen, if you have long descriptions it's probably a good idea to do that, then you can fix the add to cart button to the bottom of the page so that it's always visible on the page no matter where a customer is,

 

Find theme.scss.liquid and paste this at the bottom of the page:

/* Fixed Header */

#shopify-section-header { position: fixed; width: 100%; z-index: 1000; background-color: rgba(255,255,255,0.99); border-bottom: 1px solid rgba(0,0,0,0.1); } @media only screen and (max-width: 750px) { .shapesOverflow { padding-top: 0; } } .shapesOverflow { padding-top: 100px; }

/* Fixed Add to Cart */
.smart-payment-button--false .add_to_cart { width: calc(50% - 5px); position: fixed; bottom: 50px; right: 0; left: 0; margin: auto; z-index: 1000; }

You can find theme.scss.liquid if you click home in shopify's menu then customize code then click the dropdown box in the bottom left of the screen and select edit code

0 Likes