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

# Kom godt i gang med Upcart-tilpasninger

> Lær, hvordan du bruger HTML, CSS og JavaScript til at bygge brugerdefinerede funktioner og styling i din cart drawer.

⚠️ **Vigtig meddelelse**

Eksempeltilpasningen i dette dokument virker kun med V1.0 af Upcarts kurvmoduler. Hvis du for nylig har opgraderet din kurv til Version 2, virker denne tilpasningskode ikke. Du skal bruge de nye selektorer til Version 2 i [migrationsguiden.](/da/upcart/upcart_v20_migration_guide)

Se den øvrige tilpasningsdokumentation for V2.0-løsninger.

<div id="overview">
  # Oversigt
</div>

Upcart giver dig fuld kontrol til at ændre kurvens udseende og adfærd med **brugerdefineret HTML**, **brugerdefineret CSS** og **JavaScript**. Disse værktøjer lader dig tilføje nye funktioner, style din kurv, så den matcher dit brand, eller indføre logik, der forbedrer, hvordan din kurv fungerer.

Denne guide dækker det grundlæggende i hver af dem og viser, hvordan du kommer i gang. Hver sektion indeholder et hurtigt visuelt eksempel, der hjælper dig med at forstå, hvordan ændringerne ser ud i praksis.

***

Før du går i gang, bør du gennemgå [Upcarts tilpasningspolitik](/da/upcart/upcart_customization_policy), så du ved, hvad vores team understøtter og ikke understøtter.

<div id="add-content-with-html">
  ## Tilføj indhold med HTML
</div>

HTML bruges til at tilføje statisk indhold som tekst, bannere eller knapper i din kurv. Du kan vælge mellem flere HTML-placeringer i **Custom HTML**-editoren (f.eks. over checkout-knappen, i bunden af kurven, mellem varerne).

Almindelige anvendelser:

* Tilføj brugerdefinerede beskeder
* Indsæt juridiske forbehold eller links til politikker
* Fremhæv forsendelsesfrister eller leveringsinfo

**Eksempel:**

```
<div style="text-align: center; font-weight: bold;">  
  Thanks for shopping with us!  
</div
```

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-html-thank-you-message.gif?s=a22b53d145994e29c3e327b272e1ce33" alt="Upcarts Custom HTML-editor, der tilføjer en takkebesked over checkout-knappen" width="2060" height="1080" data-path="images/upcart/customizations-custom-html-thank-you-message.gif" />

***

<div id="add-logic-with-javascript">
  ## Tilføj logik med JavaScript
</div>

JavaScript styrer kurvens adfærd og logik. Du kan bruge det til at vise eller skjule elementer, anvende betinget styling eller reagere på kurvændringer i realtid.

Du pakker din kode ind i et `<script>`-tag og placerer den i **Custom HTML > Scripts (Before Load)** eller **Above Announcements**, afhængigt af hvornår den skal køre.

**Eksempel: [Begræns kurven til én upsell ad gangen](/da/upcart/limit_the_cart_to_one_upsell_at_a_time):**

```
<script>  
  // Show upsells again when upsells are removed  
  window.upcartSubscribeItemRemoved((event) => {  
    if (event.item?.properties?.__upcartUpsell) {  
      const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
      if (upsells) upsells.style.display = "block";  
    }  
  });  
  
  // Hide upsells once one is added  
  window.upcartSubscribeUpsellsAddedToCart(() => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    if (upsells) upsells.style.display = "none";  
  });  
  
  // Check for upsell in cart when it loads  
  window.upcartSubscribeCartLoaded((event) => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    const items = event.cart.items || [];  
    const hasUpsell = items.some(item => item?.properties?.__upcartUpsell);  
    if (upsells && hasUpsell) {  
      upsells.style.display = "none";  
    }  
  });  
</script>
```

<Note>
  **Bemærkning om ældre kode:** Callbacks som `window.upcartOnItemRemoved`, `window.upcartOnAddUpsell` og `window.upcartOnCartLoaded` virker stadig, men er udfasede og logger advarsler i konsollen. Brug `upcartSubscribeItemRemoved`, `upcartSubscribeUpsellsAddedToCart` og `upcartSubscribeCartLoaded` til alle nye scripts.
</Note>

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-html-hide-upsells.gif?s=eec41b0784bb4db819ee4ae1cd8a25e5" alt="Upcarts Custom HTML Scripts Before Load-editor med JavaScript, der skjuler upsell-modulet" width="2060" height="1080" data-path="images/upcart/customizations-custom-html-hide-upsells.gif" />

***

🔧 **Bemærkning til udviklere:**\
Upcart tilbyder en komplet [Public API-dokumentation](https://rokt.notion.site/upcart-public-api), der viser alle funktioner, variabler og best practice-mønstre, som er tilgængelige for avancerede tilpasninger. Vi anbefaler at gennemgå den, når du bygger mere komplekse scripts eller integrationer.

***

<div id="style-your-cart-with-css">
  ## Style din kurv med CSS
</div>

CSS styrer udseendet af elementerne i din kurv. Brug det til at justere afstande, farver, skriftstørrelser eller skjule uønskede elementer. **Custom CSS** er en af fanerne under **Settings** (bag **More settings**, hvis fanerækken løber over).

Almindelige anvendelser:

* Skift farver på produkttitler eller knapper
* Juster skriftstørrelse eller justering
* Tilføj afstand mellem sektioner

**Eksempel: Skift farven på upsell-titlen i V1.0:**

```
.upcart-upsells-title {  
  color: #C20075 !important;  
  font-size: 25px;  
  font-style: italic;  
  text-align: center;  
}
```

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/customizations-custom-css-editor-styling.gif?s=f676b9eef6e30c6c122028c0e7a38b6e" alt="Upcarts Custom CSS-editor, der styler upsell-titlens farve med en bekræftelse på gemte ændringer" width="2060" height="1080" data-path="images/upcart/customizations-custom-css-editor-styling.gif" />

***

<div id="additional-resources">
  ## Yderligere ressourcer
</div>

Vil du forbedre dine HTML-, CSS- eller JavaScript-færdigheder? Tjek disse gratis værktøjer:

* [W3Schools](https://www.w3schools.com/)
* [Codecademy](https://www.codecademy.com/?g_network=g\&g_productchannel=\&g_adid=528849219280\&g_locinterest=\&g_keyword=codecademy\&g_acctid=243-039-7011\&g_adtype=\&g_keywordid=kwd-41065460761\&g_ifcreative=\&g_campaign=account\&g_locphysical=9001394\&g_adgroupid=70492864474\&g_productid=\&g_source=%7Bsourceid%7D\&g_merchantid=\&g_placement=\&g_partition=\&g_campaignid=1726903838\&g_ifproduct=\&utm_id=t_kwd-41065460761:ag_70492864474:cp_1726903838:n_g:d_c\&utm_source=google\&utm_medium=paid-search\&utm_term=codecademy\&utm_campaign=INTL_Brand_Exact\&utm_content=528849219280\&g_adtype=search\&g_acctid=243-039-7011\&gad_source=1\&gad_campaignid=1726903838\&gbraid=0AAAAAon8KZFBIKQJ4KKGpsSVHO3yi2Njl\&gclid=CjwKCAjwx-zHBhBhEiwA7Kjq61-cNVEH2PzXZCcjcqIZS-0mCe8EEyPBJYyj4QRn5bma8OMqd3IJrBoCwjoQAvD_BwE)
* [Mozilla Developer Network (MDN)](https://developer.mozilla.org/en-US/)

<div id="support-for-customizations">
  ## Support til tilpasninger
</div>

Upcarts supportteam kan ikke hjælpe med at implementere brugerdefineret kode. Til mere avancerede ændringer anbefaler vi at hyre en [Shopify Expert](https://www.shopify.com/ca/partners/directory).