Skip to main content

Customising product options (chips/swatches)

Written by Shashank Agrawal

The Variations options as individual chips (swatches) feature provides a generic way to display product options as chips or swatches. However, since each Shopify store has its own unique style, this feature can be customised to match the store's design.

Customising Styles

To customise the appearance of product options, you can add the following CSS to the Common CSS settings:

:host(cooee-product-options-picker) {
    .option-values {
        gap: 4px;
    }    .option-group {
        gap: 0;
    }    .option-value {
        min-width: 27px;
        min-height: 27px;
        font-size: 14px;
        padding: 0;
        border-radius: 100%;
        border: 1px #000 solid;        &.selected {
            box-shadow: none;
            background: #000;
            color: #fff;
        }
    }
}

This code adjusts spacing, dimensions, and styling for the product options, ensuring they align with the store's visual identity.

Customising Option Names

To modify the display names of product options, you can add the following JavaScript to the Common JS settings:

function cooeeManipulateProductOptions(item) {
    // Find any option with name "Pack" or "Packs"
    const packs = item.options.find(option => option.name.startsWith("Pack"));
    if (packs) {
        // Remove "Pack of" so only the quantity remains
        packs.optionValues
                .forEach(ov => ov.displayName = ov.name.replace("Pack of ", ""));
    }
}

This script identifies options with names like "Pack" or "Packs" and removes the prefix "Pack of" from their display names, leaving only the quantity visible.

By combining these CSS and JS customisations, you can tailor the product options display to suit your Shopify store's specific style and functionality.

Did this answer your question?