Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

variant select dropdown style


Tschodr

Question

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 post
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

Posted Images

7 answers to this question

Recommended Posts

  • 0

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.

Hello I'm Thomas. I've been getting websites up and running for 27 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0

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.

Hello I'm Thomas. I've been getting websites up and running for 27 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
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 post
  • 0

I want the selectors look more like the ADD TO CART button – but white with a dark stroke.
And I would like to have a single grey arrow instead of the blue square with two arrows.

Link to post
  • 0
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.

Edited by creedon

Hello I'm Thomas. I've been getting websites up and running for 27 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0

 

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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...