> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Displaying normal variants

> What normal variants are in WEBSALE V8s, how they differ from dependent variants, and how to position them in the template.

A variant is a product property that the buyer selects, for example color, size, height, or width. Each variant can carry a surcharge or discount that affects the product price.

## Normal or dependent variants

WEBSALE V8s has two types of variants. Which one is right depends on whether the selection options depend on each other.

| Type | Suitable if | Example |
| - | - | - |
| Normal variants | each selection is possible independently of the others | every color is available in every size |
| Dependent variants | not every combination exists, or separate data is needed per combination | separate product number, price, or stock per color |

Dependent variants offer significantly more options but also require more maintenance.

Guide: [Displaying dependent variants](https://dokumentation.websale.de/en/v8s/abhaengige-varianten/abhaengige-varianten-anzeigen.md)

## Outputting variants

`~PR-Variations~` outputs all normal variants of the product at once, with their names and selection lists.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{PR-Data}
   ...
   ~PR-Variations~
   ...
{/PR-Data}
```

This is sufficient as long as you are satisfied with the default order and arrangement.

Reference: [PR-Variations](https://dokumentation.websale.de/en/v8s/referenz/tags/pr/grundlagen-und-produktdaten.md)

## Positioning variants individually

If the variants are to appear at different places in the template, output them individually. There are two tags per variant for this, numbered from 1 to 200.

| Tag | Content |
| - | - |
| `PR-VariationName1` to `PR-VariationName200` | name of the variant, for example "Color" |
| `PR-VariationList1` to `PR-VariationList200` | associated selection list |

The number corresponds to the order in which the variants appear in the product data.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<div class="variante">
   <label>~PR-VariationName1~</label>
   ~PR-VariationList1~
</div>

<div class="variante">
   <label>~PR-VariationName2~</label>
   ~PR-VariationList2~
</div>
```

## Design

You control the appearance of the selection lists via styles.

Reference: Styles for product

## Related topics

* Guide: [Displaying dependent variants](https://dokumentation.websale.de/en/v8s/abhaengige-varianten/abhaengige-varianten-anzeigen.md)
* Guide: [Displaying the selected product](https://dokumentation.websale.de/en/v8s/produkte/gewaehltes-produkt-anzeigen.md)


## Related topics

- [OFFER- (Customer-specific offers)](https://dokumentation.websale.de/en/v8s/referenz/tags/offer-kundenspezifische-angebote.md)
- [Variants](https://dokumentation.websale.de/en/admin-interface/katalog/produkte/varianten.md)
- [Displaying grouping products](https://dokumentation.websale.de/en/v8s/produkte/gruppierungsprodukte-anzeigen.md)
- [Displaying products on an alternative template](https://dokumentation.websale.de/en/v8s/produkte/produkte-auf-alternativem-template-anzeigen.md)
- [Styles for catalog and products](https://dokumentation.websale.de/en/v8s/referenz/styles/katalog-und-produkte.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.