Summary
SKU Selector width value breaks when displayMode="slider" is used for unavailable products and sliderItemsPerPage is configured using min-width values.
Simulation
Install the vtex.responsive-values app in the workspace, or configure a responsive-values block in your theme to provide values based on min-width breakpoints.
Configure the sliderItemsPerPage prop of the SKU Selector using the responsive-values pattern:
This configuration uses min-width breakpoints and is based on the responsive-values app, which is not officially supported by the SKU Selector.
Deploy this configuration to a product detail page (PDP) that has no available SKUs (i.e., all SKUs are out of stock).
Access the PDP in the workspace and confirm that the SKU Selector renders in displayMode="slider".
- Observe the result: the SKU carousel will break — items will have incorrect widths, often overflowing or not rendering as expected.
Workaround
Replace the sliderItemsPerPage configuration using min-width keys with the expected format using the standard desktop, tablet, and mobile keys.