Jump to content

Move the Add to Cart Button above the product descriptions (CSS ineffective so far)

Recommended Posts

Site URL: https://www.railwaymania.net/shop/sudrian-decals

Hello, I'm a bit of a novice with using Squarespace so I apologise if there is an obvious answer to this.

I would like to do the same as 'Arch' in this thread, which is to move the 'Type', 'Quantity' and 'Purchase' to the top rather than the user having to scroll all the way to the bottom.

jpeter suggested adding this custom CSS:


@media screen and (min-width: 768px ) {
  .ProductItem-details .ProductItem-details-checkout {
    display: flex;

Which I have copied and pasted into the custom CSS editor, then clicked 'save', but nothing happens, the page remains the same, even after refreshing. Have I missed a step or done something wrong?

Many thanks in advance


Link to comment
  • Replies 5
  • Views 813
  • Created
  • Last Reply

Add the following to Page Settings > Advanced > PAGE HEADER CODE INJECTION for the Product page.


  #productDetails {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  #productDetails .product-quantity-input {
    -webkit-box-ordinal-group: -2;
    -ms-flex-order: -3;
    order: -3;
  #productDetails .product-sharing {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  #productDetails .product-title {
    padding-top: 4vh;
  #productDetails .product-variants {
    -webkit-box-ordinal-group: -3;  
    -ms-flex-order: -4;
    order: -4;
  #productDetails .sqs-add-to-cart-button-wrapper {
    -webkit-box-ordinal-group: -1;
    -ms-flex-order: -2;
    order: -2;

The previous is for a v7.0 site using Avenue template.

Let us know how it goes.


Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.