Customize with CSS

Customize options with CSS

Customizing the appearance of the product options takes 4 steps:

1. Open theme.liquid: navigate to before the closing </head> tag.

2. Edit code: insert your CSS snippets between <style> and </style>.

3. Save changes.

4. Copy the CSS class name and paste into EXPO's CSS Classes field.

Editing Shopify theme code

Please refer to the screenshot above, in this example, the CSS Class name that you need to copy is "expo-choice-list-horizonal":

CSS Classes field in EXPO app

Below you will find some CSS snippets that could come in handy.

Align choice list options horizontally:

  .expo-choice-list-horizontal {
display: flex;
flex-wrap: wrap;
  }
  .expo-choice-list-horizontal > label {
margin-right: 10px;
  }

Make swatches bigger:

#expo-section .expo-swatches-wrapper .expo-swatches-box{
    width: 40px !important;
    height: 40px !important;
}

.expo-swatches-box{ width:40px !important; height: 40px !important}

Change spacing between swatches:

.expo-swatches-box{margin-right: 10px !important;}

Set dropdown to full width:

#expo-section select {
    padding: 15px;
    border: 1px solid #e6e6e6;
}

.expo-dropdown-amigos select{
  width: 100%;
  padding: 1rem;
  border: 1px solid var(--border-color);
  color: var(--text-color-light);
}

Set text box to full width:

#expo-section input[type="text"]{
    width: 100%;
    padding: 15px;
    border: 1px solid #e6e6e6;
}

Customize surrounding box of an option set:

#expo-section .expo-optionset-wrapper{
}

Customize checkbox:

#expo-section [data-expo-type="checkbox"] input[type="checkbox"] {
        width: 12px !important;
        height: 12px !important;
        margin: 0px;
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        appearance: none;
        outline: 1px solid lightblue;
        box-shadow: none;
        font-size: 2em;
        text-align: center;
        line-height: 1em;
        position: relative;
      }
#expo-section [data-expo-type="checkbox"] input[type="checkbox"]:checked:after {
        content: "";
        position: absolute;
        left: 4px;
        transform: rotate(45deg);
        height: 10px;
        width: 3px;
        border-bottom: 2px solid blue;
        border-right: 2px solid blue;
      }