Product Variant Drop-down Menus to sit side-by-side

Hi there, 

I am wanted to make the product variants sit side-by-side in the product description. At the moment I am only able to have them on top of each other. I am unsure if I am missing this option built into Squarespace 7.1 or will require custom css to do so.

I think you need custom code to do this. If you share link to product page, We can take a look.

Unfortunately the site is unpublished at the moment.

@tuanphan I hope you don't mind me bothering you here but I was hoping to do what OP is doing on this page: https://designbypran.com/semi-custom-invitations/p/botanicals

Any chance you can help with custom code to have those 3 options side by side? I'm also interested in removing the word "Select" but can't seem to do that from within the settings. Thank you!!

On 12/1/2020 at 1:24 AM, Praneetha said:

@tuanphan I hope you don't mind me bothering you here but I was hoping to do what OP is doing on this page: https://designbypran.com/semi-custom-invitations/p/botanicals

 

Any chance you can help with custom code to have those 3 options side by side? I'm also interested in removing the word "Select" but can't seem to do that from within the settings. Thank you!!

I don't see variant dropdown..

Hi @tuanphan looks like I didn't copy the right url - here is one: https://designbypran.com/services/p/botanicals-dmbgj

On 12/3/2020 at 11:06 PM, Praneetha said:

Hi @tuanphan looks like I didn't copy the right url - here is one: https://designbypran.com/services/p/botanicals-dmbgj

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
.ProductItem-details .product-variants {
    display: flex;
    width: 100%;
}
}

Hey @tuanphan thank you for this code! I modified it to this:

.ProductItem-details .product-variants {
    display: flex;
    width: 100%;
}

because I don't want them side by side on mobile, only on desktop. Is there a way to add padding between the product variants and remove the word "Select"? Thank you!

On 12/3/2020 at 11:06 PM, Praneetha said:

Hi @tuanphan looks like I didn't copy the right url - here is one: https://designbypran.com/services/p/botanicals-dmbgj

I don't see variatn dropdowns....Did you remove..

@tuanphan the product variants are for the products linked on this page: https://designbypran.com/semi-custom-invitations

The hyperlinks for the products seem to change every time I navigate to the page, I'm not sure why that is but that's why the URLs I pasted before have been wrong both times. Sorry about that!

On 12/6/2020 at 8:57 AM, Praneetha said:

Is there a way to add padding between the product variants

For the padding.

.ProductItem-details .product-variants {

  display: flex;

  grid-gap: 1em;
  gap: 1em;
  
  width: 100%;
  
  }

Thank you @creedon!!

@creedon @tuanphan I realized the product variants still show up side by side on mobile - is there a way to adjust the code to have product variants appear stacked on mobile only?

@Praneetha

Add the following CSS.

@media only screen and ( pointer: coarse ) and ( max-width: 1024px ), screen and ( max-width: 799px ) {

  .ProductItem-details .product-variants {
  
    display: block;
    
    }
  }

Let us know how it goes.

worked perfectly, thank you so much @creedon!!

Hi everyone, I would very much like a styled dropdown menu but from a product block, yet I don't need them to be side by side. Just a rectangle with an arrow inside on the right. Here's the link of my website: dachshund-crane-s64k.squarespace.com/nouvelle-page.
I would also like to move the price below and place is just above the add to cart button, but my ability to customize the form is limited to hiding words...
Password is... 'password'
Thanks in advance for any help.

21 hours ago, nicolusse88 said:

Hi everyone, I would very much like a styled dropdown menu but from a product block, yet I don't need them to be side by side. Just a rectangle with an arrow inside on the right. Here's the link of my website: dachshund-crane-s64k.squarespace.com/nouvelle-page.
I would also like to move the price below and place is just above the add to cart button, but my ability to customize the form is limited to hiding words...
Password is... 'password'
Thanks in advance for any help.

The url doesn't exist

@tuanphan I just copied and pasted on a browser where I'm not connected to Squarespace and I access the website without any problem

On 4/13/2021 at 5:43 AM, nicolusse88 said:

I would also like to move the price below and place is just above the add to cart button

Add the following to Design > Custom CSS.

/* begin move product block price above add to cart button */

  .product-block .productDetails {
  
    display : flex;
    flex-direction : column;
    
    }
    
  .product-block .product-price,
  .product-block .sqs-add-to-cart-button-wrapper
  
    {
    
      order : 1;
      
      }
      
  /* end move product block price above add to cart button */

This is for v7.1.

Let us know how it goes.

Thank you so much @creedon, this is perfect. I removed the padding that was automatically added below the block and it looks great. Can I contribute buying you a cup of coffee or something as a thank you?