How to style your product picker?

  1. Head over to the picker styles section.
  2. At the top you will see tabs for each option type Buttons, Color Swatch, or Image Swatch. On the right you will see a preview of those items when you make changes.
  3. The following options can be configured:
    1. Size - How big the element is with options for small, medium, and large.
    2. Border Radius - This is how round or square your elements corners are. A 100px border radius will make a circle, a 0px radius will make a square.
    3. Border Width - the size of your border.
    4. Border color default / active - The color of the border when it is not selected on the frontend versus when it is selected. 
    5. Background color default / active - The color of the background when it is not selected on the frontend versus when it is selected. 
    6. Text color default / active - The color of the text when it is not selected on the frontend versus when it is selected. 
  4. When you click save, the style change will be applied to your picker immediately. 
  5. For those with the skill to modify CSS you can head into the settings section of the app and modify the CSS to customize it to your needs. The custom CSS field is shared with the picker styles shield to avoid conflicts so any changes made using that UI will overwrite custom CSS. It’s best to start with the UI and then further tweak the look and field in the custom CSS section. Warning if you delete the custom CSS and click save it will strip all CSS from your picker. 

Getting started

Submit a ticket