Jump to content

Need code for side by side variants and add to cart (in a grid of 4).

Recommended Posts

  • Replies 5
  • Views 499
  • Created
  • Last Reply
46 minutes ago, Peter550 said:

Site URL: https://www.saccostyle.com/

I would like to have the variants 'Size' & 'colour' side by side, and below it have the 'quantity' and 'add to cart' side by side. so its like in a grid of 4? What is the custom CSS for this? 



Screen Shot 2021-05-19 at 22.59.57.png

Hi. you can use below code for it. copy/paste code into CSS editor

@media (min-width: 768px) {
    .ProductItemVariants {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;

        .ProductItem-product-price {
            flex-basis: 100% !important;
        .ProductItem-details-excerpt {
            flex-basis: 100% !important;
            order: 2;
        .product-variants {
            flex-basis: 100% !important;
            .variant-option {
                margin: 0 10px 0 0;
        .product-quantity-input {
            flex-basis: 49% !important;
            margin-right: 10px !important;
        .sqs-add-to-cart-button-wrapper {
            flex-basis: 48% !important;

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.