Jump to content

variant select dropdown style

Recommended Posts

Hey guys, 

I just connected my Printful account with Squarespace.
Everything looks fine but I don't like my variant select dropdown menu and I can't figure out how to change it.

It looks like this:

571352826_Bildschirmfoto2020-12-15um22_40_33.png.00f34fe8b762bdff80a9c96ef2aba7d7.png

 

But I want it to look like this:


8af23959d73003b91a1c0e7e59bff7e5.jpg.dde20ae493a2cd70a1e3743ef64e0cf0.jpg

 

I hope you can help me.

 

 

Link to comment
  • Replies 7
  • Views 976
  • Created
  • Last Reply

Please post a URL to a page with the variant selections.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

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

Add the following CSS to Store Settings > Advanced > Page Header Code Injection for the Store page.

<style>

  .variant-option {
  
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
    }
    
  .variant-option .variant-option-title {
  
    -ms-flex-preferred-size: 4rem;
    flex-basis: 4rem;
    
    }
    
  </style>

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
7 minutes ago, creedon said:

Add the following CSS to Store Settings > Advanced > Page Header Code Injection for the Store page.


<style>

  .variant-option {
  
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
    }
    
  .variant-option .variant-option-title {
  
    -ms-flex-preferred-size: 4rem;
    flex-basis: 4rem;
    
    }
    
  </style>

Let us know how it goes.

Thank you.

This is how it looks now:

1034978608_Bildschirmfoto2020-12-16um21_43_30.png.703f43dedabaf353934687feb964f7d5.png


So we're on the right track.
Now I only need to customise the product variant selector. 

 

 

Link to comment
1 hour ago, Tschodr said:

Now I only need to customise the product variant selector. 

That will be a bit more of a challenge I think. It would require some amount of manipulation of the structure of the selectors with Javascript and CSS.

Please see How TO - Custom Select Box for a general idea of what is involved.

Perhaps someone has already done something like this and can help you the rest of the way to achieve your effect.

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

 

45 minutes ago, creedon said:

That will be a bit more of a challenge I think. It would require a some amount of manipulation of the structure of the selectors with Javascript and CSS.

Please see How TO - Custom Select Box for a general idea of what is involved.

Perhaps someone has already done something like this and can help you the rest of the way to achieve your effect.

I'll follow the instruction.
Thank you so much!

 

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.