# Intro - Les først

## Oversikt

Produktsystemet i Webflow består av fire sammenkoblede collections som jobber sammen for å gi en komplett produktpresentasjon:

* **Seaonics Products** - Hovedsamling for produkter
* **Product Variants** - Produktvarianter
* **Product Sliders** - Bildegallerier
* **Product References** - Kundereferanser

{% @mermaid/diagram content="graph TD
SP\[Seaonics Products] --> V\[Product Variants]
SP --> S\[Product Sliders]
SP --> R\[Product References]

```
style SP fill:#3498db,stroke:#2980b9,stroke-width:2px,color:white
style V fill:#2ecc71,stroke:#27ae60,stroke-width:2px,color:white
style S fill:#2ecc71,stroke:#27ae60,stroke-width:2px,color:white
style R fill:#2ecc71,stroke:#27ae60,stroke-width:2px,color:white
```

" %}

## Før du starter

* Forbered alle nødvendige bilder og produktinformasjon
* Sjekk at bildene er i riktig format og størrelse

## Arbeidsflyt

1. Opprett hovedprodukt
2. Opprett varianter (hvis aktuelt)
3. Legg til referanser (hvis aktuelt)
4. Legg til bilde/video slider (hvis aktuelt)

## Bildestørrelser

Sørg for at det viktige i bildet er i sentrum. Bildet kuttes i kantene med midten av bildet som fokuspunkt.

| Felttype                   | Bildestørrelse        | Info |
| -------------------------- | --------------------- | ---- |
| **Produktslider**          | Kvadratisk - 1:1      |      |
| **Slider med bilde/video** | Bredformat - 16:9     |      |
| Referansebilde             | Bredformat - Flytende |      |

{% hint style="warning" %}
Maks. filstørrelse på et bilde er 4MB
{% endhint %}