> 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. Follow this step-by-step guide to set it up
- [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)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.globo.io/product-variant-swatch.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.