How To Change The Order of Product Information, Variants, and Add to Cart Button | Squarespace Rally Template

If you have a long product description on Squarespace, having the Add To Cart button at the bottom can be such a drag. But it only takes a few lines of CSS to completely switch the order of your product information up, and make a custom product page. This is the code for Rally (and any other Brine family) but it should be easy to modify for any other Squarespace template. If you want to change this order, just play with the numbers to make them higher or lower.

In this example we also displayed text in the swatches using this amazing plugin by Sqsp Themes which allows you to show color swatches, texture swatches or text instead of a dropdown menu. You can use promo code BBABES15 for 15% off your plugin purchase.


//Product Pages - Variants/Swatches//
.ProductItem-details .product-variants
{order: 3;}
.ProductItem-details .product-quantity-input
{order:  4;}
.ProductItem-details .sqs-add-to-cart-button-wrapper {order: 5;}
{order: 7 !important;}