Step 1: Go to the GemPages Dashboard, select your preferred page, and enter the Editor using the “Edit” button
Step 2: Drag & drop a Product module, then a (P) Swatches element to your chosen position.
*Skip this step if you already have these on your page.
Step 3: Click on the (P) Swatches label to start configuring it with the left sidebar.
In the Sold Out Mark section, you can choose from 2 logic options in the drop-down menu to determine when the Sold out mark will be displayed.
Logic 1: A swatch is marked as Sold out only when all variants related to that swatch are completely out of stock. Swatches are checked and marked one time only during the first page load.
Logic 2: All swatches are constantly cross-checked with each other. A swatch is marked as Sold out when it is combined with other swatches and together form an out-of-stock variant. Swatches are checked and marked each time customers select a swatch.
Take the example below of the Gem Hydration Mask product, all three variations (Dry skin, Oily skin, and Sensitive skin) of the size 65 oz are out of stock:
| 52 oz | 65 oz | 90 oz | |
| Dry skin | Available | Out-of-stock | Available |
| Oily skin | Available | Out-of-stock | Available |
| Sensitive skin | Available | Out-of-stock | Available |
If Logic 1 is selected:
The 65 oz swatch is crossed and the “Add to cart” button will turn into the “Sold out” button when all three Skin type swatches are selected. However, the Skin type swatches are not crossed since the product is still available in other sizes (52 oz and 90 oz).
If Logic 2 is selected:
The Skin type swatches and Size swatches will work in combination with each other.
The 65 oz swatch is still crossed. Only when 65 oz is selected that the Skin type swatches (Dry skin, Oily skin, and Sensitive skin) are crossed.
When the size 52 oz or 90 oz is selected, all Skin type swatches once again become available.
