> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/product-variant-swatch.md).

#  Product variant swatch

- [Configure swatch style](https://docs.globo.io/product-variant-swatch/configure-swatch-style.md)
- [Choose swatch type](https://docs.globo.io/product-variant-swatch/configure-swatch-style/choose-swatch-type.md): We offer various types to display variant options. You can choose from the options below to customize how the variants appear.
- [Set color HEX code for each value](https://docs.globo.io/product-variant-swatch/configure-swatch-style/set-color-hex-code-for-each-value.md): Use color hex as swatch, you can setup up to 2 color codes for the same variant option value.
- [Use custom image for each value](https://docs.globo.io/product-variant-swatch/configure-swatch-style/use-custom-image-for-each-value.md)
- [Use image of product variant](https://docs.globo.io/product-variant-swatch/configure-swatch-style/use-image-of-product-variant.md)
- [Display on product page](https://docs.globo.io/product-variant-swatch/display-on-product-page.md)
- [Show only images related to the selected variant](https://docs.globo.io/product-variant-swatch/display-on-product-page/show-only-images-related-to-the-selected-variant.md): This feature displays only the images associated with the selected variant, creating a more relevant and streamlined shopping experience for your customers.
- [Require to select options before adding to cart](https://docs.globo.io/product-variant-swatch/display-on-product-page/require-to-select-options-before-adding-to-cart.md): This prevents incomplete orders and improves the shopping experience by required users to select all required options before click add to cart button.
- [Inventory alert on product detail page](https://docs.globo.io/product-variant-swatch/display-on-product-page/inventory-alert-on-product-detail-page.md): Inventory alert function allows customer to see which product variants are currently available for purchase. It helps streamline the shopping experience by displaying real-time inventory status.
- [Change swatch position on product detail page](https://docs.globo.io/product-variant-swatch/display-on-product-page/change-swatch-position-on-product-detail-page.md)
- [Display on collection page, home page & other pages](https://docs.globo.io/product-variant-swatch/display-on-collection-page-home-page-and-other-pages.md)
- [Show add to cart button on product list](https://docs.globo.io/product-variant-swatch/display-on-collection-page-home-page-and-other-pages/show-add-to-cart-button-on-product-list.md): With this feature, you can display the Add to Cart button directly on product cards, allowing customers to add products to their cart without having to visit the product page first.
- [Hide variant option on collection page](https://docs.globo.io/product-variant-swatch/display-on-collection-page-home-page-and-other-pages/hide-variant-option-on-collection-page.md)
- [Enable carousel style for options on collection page](https://docs.globo.io/product-variant-swatch/display-on-collection-page-home-page-and-other-pages/enable-carousel-style-for-options-on-collection-page.md)
- [Limit number of swatches displayed on Collection Page](https://docs.globo.io/product-variant-swatch/display-on-collection-page-home-page-and-other-pages/limit-number-of-swatches-displayed-on-collection-page.md)
- [Display real-time product data as variations change](https://docs.globo.io/product-variant-swatch/display-on-collection-page-home-page-and-other-pages/display-real-time-product-data-as-variations-change.md): On the collection page we can show a preview of the selected variant including:
- [Advanced setting variants swatch](https://docs.globo.io/product-variant-swatch/advanced-setting-variants-swatch.md): The advanced editing style variations feature allows you to fine-tune the appearance of their product swatches to match their store’s branding and user experience preferences.
- [Show/hide variant name](https://docs.globo.io/product-variant-swatch/advanced-setting-variants-swatch/show-hide-variant-name.md)
- [Show/hide tooltip](https://docs.globo.io/product-variant-swatch/advanced-setting-variants-swatch/show-hide-tooltip.md)
- [Configure Out-of-stock style for variants](https://docs.globo.io/product-variant-swatch/advanced-setting-variants-swatch/configure-out-of-stock-style-for-variants.md)
- [Control image swatch dimensions](https://docs.globo.io/product-variant-swatch/control-image-swatch-dimensions.md): Control the shape of image swatches displayed on your storefront.
- [Bulk export & import variant options](https://docs.globo.io/product-variant-swatch/bulk-export-and-import-variant-options.md)