Jump to content

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

Recommended Posts

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.1331275593_ScreenShot2020-06-08at2_19_32pm.png.84cd4efc0c47ee4eb361792c55e344e3.png

Link to comment
  • 5 months later...
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..

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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%;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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..

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 months later...

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.

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

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.