How To Change The Order of Product Information, Variants, and Add to Cart Button | Squarespace Supply 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 Supply, which is a little more complicated than  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-title {
-webkit-box-ordinal-group: 1 !important;
-moz-box-ordinal-group: 1 !important;
-ms-flex-order: 1 !important;
-webkit-order: 1 !important;
order: 1 !important;}

.sqs-add-to-cart-button-wrapper {
-webkit-box-ordinal-group: 2 !important;
-moz-box-ordinal-group: 2 !important;
-ms-flex-order: 2 !important;
-webkit-order: 2 !important;
order: 2 !important;}

.product-variants {
-webkit-box-ordinal-group: 3 !important;
-moz-box-ordinal-group: 3 !important;
-ms-flex-order: 3 !important;
-webkit-order: 3 !important;
order: 3 !important;}

.product-quantity-input {
-webkit-box-ordinal-group: 4 !important;
-moz-box-ordinal-group: 4 !important;
-ms-flex-order: 4 !important;
-webkit-order: 4 !important;
order: 4 !important;}

.product-price {
-webkit-box-ordinal-group: 5 !important;
-moz-box-ordinal-group: 5 !important;
-ms-flex-order: 5 !important;
-webkit-order: 5 !important;
order: 5 !important;}

.product-excerpt {
-webkit-box-ordinal-group: 6 !important;
-moz-box-ordinal-group: 6 !important;
-ms-flex-order: 6 !important;
-webkit-order: 6 !important;
order: 6 !important;}

.squarespace-social-buttons.inline-style {-webkit-box-ordinal-group: 7 !important;
-moz-box-ordinal-group: 7 !important;
-ms-flex-order: 7 !important;
-webkit-order: 7 !important;
order: 7 !important;}

#flowContent {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
-ms-box-sizing: border-box !important;
box-sizing: border-box !important;
display: -moz-box !important;
display: -webkit-box !important;
display: -ms-flexbox !important;
display: -webkit-flex !important;
display: flex !important;
-webkit-box-orient: column !important;
-webkit-box-direction: column !important;
-moz-box-orient: column !important;
-moz-box-direction: column !important;
-webkit-box-orient: vertical !important;
-webkit-box-direction: normal !important;
-webkit-flex-direction: column !important;
-moz-box-orient: vertical !important;
-moz-box-direction: normal !important;
-moz-flex-direction: column !important;
-ms-flex-direction: column !important;
flex-direction: column !important;}

.collection-type-products.view-item .product-title, .collection-type-products.view-item .product-price-container, .collection-type-products.view-item .product-excerpt, .collection-type-products.view-item .product-variants, .collection-type-products.view-item .product-quantity-input, .collection-type-products.view-item .sqs-add-to-cart-button-wrapper
{margin: 15px 0}