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
  • Replies 19
  • Views 2.6k
  • Created
  • Last Reply
  • 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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Archived

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.