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

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.


Edited by creedon
version 2 of CSS, use negative ordering and added vendor prefixes

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • 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.