# Propojení – dárkové balení produktu

> Nabídněte dárkové balení přímo u produktu tak, aby se odečítalo ze skladu. Postup, ukázkový HTML banner a CSS z dema.

- **Zdroj:** https://www.webotvurci.cz/navody/propojeni-produktu/propojeni-darkove-baleni-produktu/
- **Doplněk / kategorie:** Propojení produktů (https://www.webotvurci.cz/navody/propojeni-produktu/)
- **Datum:** 2023-08-06
- **Autor:** Webotvůrci (https://www.webotvurci.cz/)

---

Chcete klientovi nabídnou dárkové balení produktu? Potřebujete, aby Vám seděly skladové zásoby jak produktu, tak i balícího materiálu?

![Karta produktu bez dárkového balení s bannerem, který nabízí variantu v dárkovém balení](https://www.webotvurci.cz/uploads/navody/image-4-1024x417.png)

## Postup

1. Vytvoříte si klasickým způsobem produkt – https://webotvurci.myshoptet.com/produkt-bez-darkoveho-baleni/
2. Vytvoříte si produkt, který obsahuje balící materiál – pokud potřebujete, aby sedělo i skladové hospodářství. V případě, že toto nepotřebujete, můžete tento krok přeskočit. https://webotvurci.myshoptet.com/darkove-baleni-material/
3. Vytvoříte si SADU produktu pro produkt s dárkovým balením. Sada bude obsahovat produkt z kroku 1 a pokud potřebujete, tak i produkt z kroku 2, pokud řešíte zda je pro Vás důležité řešit skladovost dárkových balení. https://webotvurci.myshoptet.com/produkt-s-darkovym-baleni/
4. Přejděte do administrace propojení produktů:
5. Přejděte do nastavení doplňku propojení produktů.
6. Načtěte si nově přidané produkty pomocí ikonky dvou šipek v kolečku.
7. Vyberte variantu propojení Banner.
8. Vyberte produkt „Z produktů“ – toto znamená, na které stránce se objeví banner.
9. Vyberu produkt „Cílový produkt“ – toto je produkt, na který povede odkaz z banneru.
10. Vytvořte text tlačítka + text banneru – níže je ukázka kódu použitého v ukázce.
11. Uložte.
12. Zkontrolujte zobrazení na eshopu.

## Ukázka HTML a CSS kódu použitého v demu

### Text tlačítka

```html
<div class="html-btn"><span><b>Dárkové</b> balení</span></div>
```

## HTML banner

```html
<div class="html-banner">
Objednejte si tento produkt v <strong>luxusním dárkovém balení</strong> a udělejte z něj nezapomenutelný dárek pro Vaše blízké!
</div>
```

## Ukázková CSS použitá v demu

```css
.c-product-interconnection-detail-params__products.is-type--banner {
    background-color: #f7f7f7;
    width: 100%;
    display: flex;
    padding: 10px 20px;
}

.c-product-interconnection-banner__link.is--plain-html {
    width: 100%;
}

.html-banner {
    width: 70%;
}

.html-btn {
    width: 30%;
}

.c-product-interconnection-detail-params__products.is-type--banner .html-btn {
    float: right;
    background-color: green;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    margin-left: 20px;
}

.c-product-interconnection-detail-params__products.is-type--banner .c-product-interconnection-banner__link.is--plain-html {
    display: flex;
}

@media only screen and (max-width: 600px) {

    .html-banner,
    .html-btn {
        width: 100%;
    }

    .c-product-interconnection-detail-params__products.is-type--banner .c-product-interconnection-banner__link.is--plain-html {
        display: block;
    }
}
```

## VideoNávod

<div class="video-embed">
  <iframe src="https://www.loom.com/embed/85be7805859e49748ff65f0af2d44e79?sid=43ed45bb-05df-4425-a23a-2226ac437da1" title="Videonávod" loading="lazy" allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe>
</div>

---

*Návod pochází z webu Webotvůrci — Zlatý a Premium partner Shoptetu.*
*Všechny návody: https://www.webotvurci.cz/navody/ · Kontakt: jsme@webotvurci.cz*