EZ Preorder help

EZ Preorder badge compatibility

By default, our collection badges are set to work with the free Shopify themes listed first below. If you are using one of the newer free themes or a paid theme, the CSS selector settings will need to be changed. Find your theme for the right values.

A few themes are not compatible with our badges, specifically themes that do not provide the product ID in the code on collection pages. Known incompatible themes are listed at the bottom of this page.

Free themes that need no settings changes

  • Dawn
  • Refresh
  • Sense
  • Ride
  • Taste
  • Origin
  • Spotlight
  • Craft
  • Studio
  • Crave
  • Colorblock
  • Publisher

All of the themes above use the default selector settings:

Product wrapper selector
.product-card-wrapper
Product id selector
h3
Product id attribute selector
id
Product image selector
.card__media

New free themes that need changes

  • Horizon
  • Savor
  • Atelier
  • Vessel
  • Heritage
  • Tinker
  • Fabric
  • Dwell
  • Pitch
  • Ritual

All of the new free themes above use these selector settings:

Product wrapper selector
.product-card
Product id selector
.card-gallery
Product id attribute selector
data-product-id
Product image selector
.product-media

Premium themes that need settings changes

Change your badge CSS selector settings to the values for the theme you are using. If your theme is not on this page, we have not tested it yet. Contact support@casualecommerce.com to see if it is compatible.

  • Avenue

    Product wrapper selector
    .product-rows
    Product id selector
    input
    Product id attribute selector
    value
    Product image selector
    a
  • Symmetry

    Product wrapper selector
    .product-block
    Product id selector
    .product-block
    Product id attribute selector
    data-product-id
    Product image selector
    .image-cont
  • Praise

    Product wrapper selector
    .product-card
    Product id selector
    .product-card__title + div
    Product id attribute selector
    id
    Product image selector
    a
  • Enterprise

    Product wrapper selector
    .card--product
    Product id selector
    .checkbox--compare
    Product id attribute selector
    id
    Product image selector
    .card__media
  • Boost

    Product wrapper selector
    .product-block
    Product id selector
    script
    Product id attribute selector
    class
    Product image selector
    .rimage-wrapper
  • Honey

    Product wrapper selector
    .product-card-wrapper
    Product id selector
    .product-card
    Product id attribute selector
    id
    Product image selector
    a
  • Impact

    Product wrapper selector
    .product-card
    Product id selector
    .quick-buy-drawer
    Product id attribute selector
    id
    Product image selector
    a
  • Local

    Product wrapper selector
    .product-item
    Product id selector
    .product-item
    Product id attribute selector
    id
    Product image selector
    a
  • Impulse

    Product wrapper selector
    .grid__item
    Product id selector
    .grid__item
    Product id attribute selector
    data-product-id
    Product image selector
    .image-wrap
  • Pursuit

    Product wrapper selector
    .product-card
    Product id selector
    .product-card__image-wrapper
    Product id attribute selector
    id
    Product image selector
    .product-card__image-wrapper
  • Mode

    Product wrapper selector
    .product-block
    Product id selector
    .product-block
    Product id attribute selector
    data-product-id
    Product image selector
    .inline-image__pad
  • Yuva

    Product wrapper selector
    .animated-grid
    Product id selector
    form
    Product id attribute selector
    id
    Product image selector
    .image-wrapper
  • Spark

    Product wrapper selector
    .product-item
    Product id selector
    form
    Product id attribute selector
    id
    Product image selector
    .product-item__image
  • Prestige

    Product wrapper selector
    .product-card
    Product id selector
    .quick-buy-modal
    Product id attribute selector
    id
    Product image selector
    a
  • Modular

    Product wrapper selector
    .product-block
    Product id selector
    .product-block
    Product id attribute selector
    data-quickview-element
    Product image selector
    .image-wrapper
  • Taiga

    Product wrapper selector
    .card--product
    Product id selector
    quick-buy
    Product id attribute selector
    data-product
    Product image selector
    .card-media-overlay
  • Champion

    Product wrapper selector
    loess-product-card
    Product id selector
    loess-modal-product
    Product id attribute selector
    id
    Product image selector
    a
  • Palo Alto

    Product wrapper selector
    .product-grid-item
    Product id selector
    a
    Product id attribute selector
    data-aos-anchor
    Product image selector
    .product-grid-item__image
  • Aurora

    Product wrapper selector
    .product-card
    Product id selector
    .product-card
    Product id attribute selector
    data-id
    Product image selector
    .product-card__inner
  • Bullet

    Product wrapper selector
    x-cell
    Product id selector
    input[name="product-id"]
    Product id attribute selector
    value
    Product image selector
    .card-image
  • Vantage

    Product wrapper selector
    .product-index
    Product id selector
    .product-index
    Product id attribute selector
    data-product-id
    Product image selector
    .box-ratio
  • Expanse

    Product wrapper selector
    .product-grid-item
    Product id selector
    .product-grid-item
    Product id attribute selector
    data-product-id
    Product image selector
    .grid__image-ratio
  • Venue

    Product wrapper selector
    .product-card
    Product id selector
    .product-card
    Product id attribute selector
    data-product-id
    Product image selector
    a
  • Icon

    Product wrapper selector
    .span-4
    Product id selector
    .span-4
    Product id attribute selector
    id
    Product image selector
    .prod-image
  • Motion

    Product wrapper selector
    .grid__item
    Product id selector
    .grid__item
    Product id attribute selector
    data-product-id
    Product image selector
    .image-wrap
  • Whisk

    Product wrapper selector
    .product-card
    Product id selector
    .product-card
    Product id attribute selector
    data-product-card
    Product image selector
    .image-container
  • Influence

    Product wrapper selector
    product-card
    Product id selector
    color-swatch
    Product id attribute selector
    product-id
    Product image selector
    a
  • Align

    Product wrapper selector
    .card
    Product id selector
    input[name="product-id"]
    Product id attribute selector
    value
    Product image selector
    .figure--square
  • Responsive

    Product wrapper selector
    a
    Product id selector
    .quick_shop
    Product id attribute selector
    data-src
    Product image selector
    .image-element__wrap
  • Mr Parker

    Product wrapper selector
    .product-index
    Product id selector
    .product-index
    Product id attribute selector
    data-product-id
    Product image selector
    .box-ratio
  • Broadcast

    Product wrapper selector
    .grid-item
    Product id selector
    .grid-item
    Product id attribute selector
    id
    Product image selector
    .product-item__image
  • Grid

    Product wrapper selector
    .product-list-item
    Product id selector
    .product-list-item
    Product id attribute selector
    data-product-id
    Product image selector
    a
  • Area

    Product wrapper selector
    .product-card
    Product id selector
    modal-opener
    Product id attribute selector
    data-modal
    Product image selector
    .product-card__image-holder
  • Kingdom

    Product wrapper selector
    .product-item
    Product id selector
    form
    Product id attribute selector
    id
    Product image selector
    .product-item__thumbnail
  • Fetch

    Product wrapper selector
    .grid-item
    Product id selector
    .grid-item
    Product id attribute selector
    data-product-id
    Product image selector
    .grid-product__image-wrap
  • Forge

    Product wrapper selector
    .product-loop__item
    Product id selector
    button
    Product id attribute selector
    class
    Product image selector
    .product-loop__img-wrapper
  • Zest

    Product wrapper selector
    .product-card
    Product id selector
    input[name="product-id"]
    Product id attribute selector
    value
    Product image selector
    .product-card__image-wrapper
  • Minion

    Product wrapper selector
    .product-card
    Product id selector
    form
    Product id attribute selector
    id
    Product image selector
    .product-card__image-holder
  • Canopy

    Product wrapper selector
    .product-block
    Product id selector
    script
    Product id attribute selector
    data-product-id
    Product image selector
    .rimage-wrapper
  • Streamline

    Product wrapper selector
    .grid__item
    Product id selector
    .grid__item
    Product id attribute selector
    data-id
    Product image selector
    .image-wrap
  • Split

    Product wrapper selector
    .site-box-content
    Product id selector
    form
    Product id attribute selector
    id
    Product image selector
    .box--product-image
  • Loft

    Product wrapper selector
    .card-background
    Product id selector
    .product-loop-element
    Product id attribute selector
    id
    Product image selector
    .product-loop__image-container
  • Portland

    Product wrapper selector
    .collection-product-card
    Product id selector
    modal-opener
    Product id attribute selector
    data-modal
    Product image selector
    .card__inner
  • Upscale

    Product wrapper selector
    .card
    Product id selector
    button[is="loess-button"]
    Product id attribute selector
    aria-controls
    Product image selector
    .card__image
  • Fresh

    Product wrapper selector
    .grid__item
    Product id selector
    script
    Product id attribute selector
    id
    Product image selector
    .grid__image
  • Startup

    Product wrapper selector
    .product-list-item
    Product id selector
    .product-list-item
    Product id attribute selector
    id
    Product image selector
    a
  • Testament

    Product wrapper selector
    .collection__page-product
    Product id selector
    .collection__page-product
    Product id attribute selector
    data-product-id
    Product image selector
    .box-ratio
  • Pipeline

    Product wrapper selector
    .product-grid-item
    Product id selector
    .product-grid-item__content
    Product id attribute selector
    data-grid-item
    Product image selector
    .product-grid-item__image-wrapper
  • Charge

    Product wrapper selector
    .grid-item
    Product id selector
    .grid-item
    Product id attribute selector
    data-product-id
    Product image selector
    .item-image
  • Pastel Rainbow

    Product wrapper selector
    .product-card-wrapper
    Product id selector
    h3
    Product id attribute selector
    id
    Product image selector
    .card__media
  • Warehouse

    Product wrapper selector
    .product-item
    Product id selector
    input
    Product id attribute selector
    value
    Product image selector
    a
  • Focal

    Product wrapper selector
    .product-item
    Product id selector
    quick-buy-popover
    Product id attribute selector
    id
    Product image selector
    a
  • Kalles

    Product wrapper selector
    .t4s-product-wrapper
    Product id selector
    a
    Product id attribute selector
    data-id
    Product image selector
    a
  • Minimal

    Product wrapper selector
    .grid-link
    Product id selector
    .jdgm-widget
    Product id attribute selector
    data-id
    Product image selector
    .product__img-wrapper
  • Atom

    Product wrapper selector
    .product-card
    Product id selector
    .product-form
    Product id attribute selector
    product-id
    Product image selector
    a
  • Fresh

    Product wrapper selector
    .indiv-product-wrapper
    Product id selector
    .product-grid-json
    Product id attribute selector
    id
    Product image selector
    a
  • Flow

    Product wrapper selector
    .grid__item
    Product id selector
    input
    Product id attribute selector
    value
    Product image selector
    .responsive-image-wrapper
  • Stretch

    Product wrapper selector
    .product-card
    Product id selector
    quick-buy-modal
    Product id attribute selector
    id
    Product image selector
    .product-card__media
  • Diffuse

    Product wrapper selector
    .product-card
    Product id selector
    quick-buy-modal
    Product id attribute selector
    id
    Product image selector
    .product-card__media
  • Couture

    Product wrapper selector
    .product-card
    Product id selector
    quick-buy-modal
    Product id attribute selector
    id
    Product image selector
    .product-card__media
  • Vogue

    Product wrapper selector
    .product-card
    Product id selector
    quick-buy-modal
    Product id attribute selector
    id
    Product image selector
    .product-card__media
  • Snow

    Product wrapper selector
    .product-card
    Product id selector
    quick-buy-modal
    Product id attribute selector
    id
    Product image selector
    .product-card__media
  • Motion

    Product wrapper selector
    .grid__item
    Product id selector
    .modal
    Product id attribute selector
    data-product-id
    Product image selector
    .grid-product__image-mask

Incompatible themes

Collection badges do not work with these themes.

  • Be Yours
  • Vision
  • Shapes
  • Athens
  • Blockshop
  • Stiletto
  • Baseline
  • Galleria
  • Distinctive
  • Alchemy
  • Effortless
  • Reformation
  • Stockholm
  • Habitat
  • Capital
  • Label
  • Empire
  • Blum
  • Lorenza
  • Andaman
  • Mandolin
  • Beyond
  • Expression
  • Sunrise
  • Maranello
  • Mavon
  • Ira
  • Cascade
  • Emporium
  • Emerge
  • Gain
  • Showcase
  • Electro
  • Maker
  • Bazaar
  • Retina
  • Flex
  • Essence