EXPO
  • Intro to EXPO
  • Setup Guide
    • Quick start guide
    • Option types
      • Text
      • Text area
      • Number
      • Choice list
      • Checkbox
      • Dropdown
      • Button
      • Swatches
      • Button (Multi selectable)
      • Swatches (Multi selectable)
      • Time picker
      • Date picker
      • File upload
    • Use cases
      • Setup extra product options
      • Gift wrapping options
      • Conditional product options
    • Customize
      • Drag and drop
      • Customize option types
      • Customize with CSS
    • Settings
      • Process flow
      • Multi-language
      • Multi-currency
    • Uninstallation
    • Integrations
      • PageFly
  • FAQ
    • Questions?
    • Compatibility
      • Known issues
      • Post-purchase
      • Expected behavior
    • Plans
  • Support
    • Troubleshooting
      • How to publish extra product options
      • Liquid error: could not find asset snippets/expo.liquid
      • How to approve our collaborator request
      • How to move EXPO section around
      • How to clear browser cookies
    • Contact
    • Changelog
Powered by GitBook
On this page
  • 1. Customize option’s content
  • 2. Customize option’s layout
  • 3. Customize option’s styles
  1. Setup Guide
  2. Customize

Customize option types

How to customize product options' content, order, styles, and display conditions

PreviousDrag and dropNextCustomize with CSS

Last updated 3 years ago

EXPO comes with 6 basic option types:

  • Text: a title and an input text field

  • Number: a title and an input text field

  • Choice list: single choice list with radio button

  • Checkbox: multiple choice checkboxes

  • Dropdown menu: single choice dropdown selector

  • Swatches: single choice color/image swatches with customizable shapes and stack styles

Also, it offers premium-only option types including:

  • Button

  • File upload

  • Time picker

  • Date picker

Within Text option, you can add certain criteria to validate the input text formatting for Email or URL type using .

Actual available options and features may differ based on your current subscription plan.

The content, layout, and styles of your option types can be customized within the EXPO app.

1. Customize option’s content

When expanding an option item, you are free to edit these details:

  • Option name

  • Title on Cart

  • Description

  • Option value description, etc.

How to add links to the option description?

When the additional description is enabled, you will have a new input field to enter further information. You can add an explainer to the item or useful resources like external links.

On product pages, links are displayed according to how your current theme designs it.

2. Customize option’s layout

You can easily drag and drop to change the order of option items. It won’t affect the conditional logic rules inside the options.

Note:

Conditional display rules work regardless of the options’ relative positions to one another.

3. Customize option’s styles

By default, your new options look and feel just like other elements designed by your current published theme.

Meaning when inserting new fields to the existing product pages, the field appearances will automatically take on the styles of the theme’s field element.

In some cases, your current theme has no styles for the input fields, as shown on the right of the above figure.

In order to customize the product form field styles, you can use custom CSS.

By defining the styles in theme.liquid or theme.scss.liquid, and enter the CSS class, you will be able to change the field styles accordingly.

Drag and drop, duplicate, delete option items
EXPO options inherit styles from your theme
Add CSS classes to product form custom options
Regex