Shopify

Recommendations

Generelt #

Clerk.io’s anbefalinger kan installeres på enhver side i webshoppen for at hjælpe kunderne med at finde de rigtige produkter.

Med opsætningsguiden kan du se, hvilke sider du skal installere anbefalinger på, og hvilke typer du skal bruge for at få vores Bedste praksis til at køre.

Fra hovedmenuen skal du starte med at klikke på Kom godt i gang:

Opret et standarddesign #

Det første, du skal gøre, er at oprette en Standard design til dine sliders.

Du kan bruge Guide til opsætning under Anbefalinger - Opret et design til dine slidere med anbefalinger. - til hurtigt at oprette et design, der har samme farveskema og stil som din webshop.

Klik på Udgiv, når du er tilfreds med stylingen.

Du kan nemt ændre dette senere under Anbefalinger - Design i menuen til venstre.

Valg af hvilke anbefalinger, der skal bruges #

Dernæst fokuserer hvert trin i opsætningsvejledningen på en specifik side af webshoppen.

De indeholder oplysninger om

  • Hvorfor anbefalinger er vigtige på siden _Hvilke typer anbefalinger du skal bruge

  • _Hvilke typer anbefalinger du skal bruge _Hvor på siden de skal placeres

  • Hvor på siden skal de placeres?

Klik for hver type anbefaling, du vil bruge, og følg trinnene.

Vær opmærksom på: ved at Hvis du kun klikker på på hver blok af Anbefalinger vil de blive grønne som om de er blevet installeret de er ikke. - skal du stadig klikke og følge trinene.

Indsættelse af anbefalinger #

Når du har valgt, hvilke anbefalinger der skal bruges til en side, kan du tilføje dem til din webshop.

Indsæt kun med indlejringskoder #

Shopify tillader kun integration med indlejringskoder:

For hver type anbefalinger skal du blot kopier indlejringskoden og indsætte dem på fil, der genererer den relevante side i din webshop.

Clik på hver type anbefaling, og følg trinnene..

Her er et eksempel på, hvordan du Tilføj anbefalinger til din produktside:

Klik på FÆRDIG

Du kan nemt ændre dit indhold senere under Anbefalinger - Indhold i menuen til venstre.

Change Content.

Når du har aktiveret funktionerne, vil du kunne se Clerk.io’s RECOMMENDATIONS-funktion på din webshop.

Nogle indlejringskoder har brug for variabler som produkt eller kategori-id’er.. I disse tilfælde skal du blot vælge Shopify fra rullemenuen Vælg platform, før du kopierer indlejringskoden.

Hjemmeside #

Mange temaer i Shopify giver dig mulighed for at indsætte Clerk.io’s indlejringskoder via brugerdefineret HTML på din startside. Nogle temaer har dog ikke denne mulighed, og i så fald skal du tilføje dit eget afsnit for at tillade det. Sådan gør du det:

Tilføj en Clerk-Slider-sektion til dit tema #

1. Log ind på din Shopify-backend.

2. Gå til Webshop -> Temaer -> Handlinger -> Rediger kode

3. Rul til Sektioner, og klik på Tilføj en ny sektion.

4. Navngiv din sektion Ekspedient-slider, og klik på Opret sektion

5. Erstat alt indhold i sektionen med følgende kode:

{%raw%}{{ section.settings.embedcode }}
{% schema %}
{
  "name": "Clerk Slider",
  "class": "clerk-slider",
  "settings": [
    {
      "type": "html",
      "id": "embedcode",
      "label": "Embedcode"
    }
  ],
  "presets": [
    {
      "category": "Products",
      "name": "Clerk Slider"
    }
  ]
}
{% endschema %}
{%endraw%}

6. Klik på Gem

Indsæt sektioner med indlejringskoder på din hjemmeside #

1. Gå til Temaer -> Tilpas

2. Klik på Tilføj sektion, og tilføj derefter Clerk Slider:

3. Indsæt indlejringskoden for de anbefalinger, du vil vise, og klik på Gem:

Og så er det klaret! Du kan tilføje så mange sektioner til hjemmesiden, som du vil, og endda inkludere flere indlejringskoder i én, hvis du ønsker det.

Tilføj-til-kurven-trin #

1. Log ind på din Shopify-backend, og gå til Online Store -> Temaer -> Handlinger -> Rediger kode.

2. Find den fil, der genererer din produktside. Normalt er det Sektioner -> produkt-skabelon.væske eller hovedprodukt-væske

3. Kopier følgende kode til bunden af filen:

<script>
    document.addEventListener('DOMContentLoaded', function(){
    const buyBtn = (document.querySelector('.product-form__add-button')) ? '.product-form__add-button' : '.product-form__add-button';
    const prodPage = (document.querySelector('[data-section-id="product-template"] > div')) ? '[data-section-id="product-template"] > div' : '.product-section > section';
    const clerkPowerstep = document.getElementById('clerk_powerstep');
    const clerkPowerstepOverlay = document.querySelector('.clerk_powerstep_overlay');

    document.querySelector(buyBtn).addEventListener('click', open_powerstep);
    
    function open_powerstep() {   
        Clerk('content', '.clerk-powerstep-recommendations');

        clerkPowerstep.style.display = 'block';
        clerkPowerstep.style.padding = '5px 15px';
        clerkPowerstep.classList.toggle('animate_top');
        clerkPowerstepOverlay.classList.toggle('animate_overlay');
      

        clerkPowerstepOverlay.style.height = document.body.clientHeight + 'px';
        setTimeout(function(){
            
            document.querySelector(prodPage).addEventListener('click', close_powerstep);
            document.getElementsByTagName('header')[0].addEventListener( 'click', close_powerstep );
            
        }, 500);
    }

    });

    function close_powerstep() {
        var clerkPowerstep = document.getElementById('clerk_powerstep');
        var clerkPowerstepOverlay = document.querySelector('.clerk_powerstep_overlay');
        clerkPowerstep.classList.toggle('animate_top');
        clerkPowerstepOverlay.classList.toggle('animate_overlay');
        //window.location.reload();
        
        
    }
</script>
<style>
    @keyframes top {
        from {
        top: -100%;
        }
        to {
        top: 50%;
        }
    }

    .animate_top {
        animation: top 100 ease-in-out;
        top: 50% !important;
    }
    .animate_overlay {
        display:block !important;
    }
    #clerk_powerstep {
        width: clamp(45ch, 50%, 100ch) !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0px !important;
        border: 3px solid #888 !important;
        border-radius: 2px !important;
        position: fixed;
        top: -100%;
        z-index: 999;
        display: none;
        background-color: white;
        box-shadow: 0px 8px 40px 0px rgba(0,0,60,0.15);
        transition-property: all;
        transition-duration: 1s;
        transition-timing-function: ease-in-out;
    }

    #clerk_powerstep h2 {
        text-align: center;
    }

    .clerk_powerstep_image {
        text-align: center;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .clerk_powerstep_image img {
        object-fit: contain;
        max-height: 240px;
        height: 25vh;
        margin: auto;
    }

    .clerk-popup-close {
        position: absolute;
        right: 5px;
        top: 5px;
        cursor: pointer;
        font-family: Arial;
        font-size: 32px;
        line-height: 1;
        color: gray;
        z-index: 2;
        padding: 3px;
    }
    .clerk_powerstep_header {
        position: relative;
    }

    .clerk_powerstep_wrap {
        position: relative;
        overflow-y: scroll;
        overflow-y: overlay;
        max-height: 80vh;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    .clerk_powerstep_wrap::-webkit-scrollbar {
      display: none;
    }
    .clerk_powerstep_actions {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    
    .clerk_powerstep_actions button {
        margin: 0 0 10px 0;
    }

    @media only screen and (max-width: 800px){
        .clerk_powerstep_actions {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    }

 /* from SB */
 .clerk_powerstep_wrap {
flex-direction: row;
display: flex;
align-content:center;
flex-wrap:wrap;
justify-content:space-evenly;
gap: 10px;
margin-top:0px;
margin-right:0px;
}
.clerk_powerstep_header {
  order:2;
  align-content: center;
  
 display: flex;
 flex-wrap:wrap;
 width:calc(100% - 100px - 180px - 20px);
}
#clerk_powerstep .clerk_powerstep_header h2 {
width:100%;
  
}  
.clerk_powerstep_top h2 {
font-weight: 500;
font-size: 1.2em;
text-align: left;
margin-bottom: 10px;
text-transform: uppercase;
  
}
.clerk_powerstep_image {
 height:0px;
 width:0px;
  order: 1;
  display:none;
}
.clerk_powerstep_actions {
  order: 3;
  display: flex;
  flex-direction: column;
  justify-content:space-evenly;
  width:180px;
}
.clerk_powerstep_actions button {
  margin-bottom:0;
  width: 100%;
}
.clerk_powerstep_actions .powerstep_continue {
background: #0d1e48;
border: 0px solid #000;
padding: 4px 12px;
color:#fff;
line-height: 26px;
font-size: 14px;
}

.clerk_powerstep_actions .powerstep_close {
padding: 3px 11px;
border: 1px solid #0d1e48;
color:#557b97;
line-height: 26px;
font-size: 14px;
}

#clerk_powerstep {
    width: clamp(45ch, 80%, 200ch) !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0px !important;
    border: 0px solid #888 !important;
    border-radius: 0px !important;
    position: fixed;
    
    z-index: 999;
    background-color:#fff;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.55);
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
}

@media (max-width: 1139px) {

  #clerk_powerstep {
    width: clamp(45ch, 90%, 100ch) !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0px !important;
    border: 0px solid #888 !important;
    border-radius: 0px !important;
    position: fixed;
    
    z-index: 999;
    background-color:#fff;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.55);
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
}
  .clerk_powerstep_wrap {
  flex-direction: row;
  display: flex;
  align-content:center;
  flex-wrap:wrap;
  justify-content:space-evenly;
  gap: 10px;
  margin-top:0px;
  margin-right:0px;
  }

  .clerk_powerstep_header {
    width:calc(100% - 0px - 10px);
  }
  .clerk_powerstep_actions {
    flex-direction:row;
    gap:10px;
    width:100%;
  }
}
  @media (max-width: 448px) {

  #clerk_powerstep {
    width: 90% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0px !important;
    border: 0px solid #888 !important;
    border-radius: 0px !important;
    position: fixed;
    
    z-index: 999;
    background-color:#fff;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.55);
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
}
  .clerk_powerstep_wrap {
  flex-direction: row;
  display: flex;
  align-content:center;
  flex-wrap:wrap;
  justify-content:space-evenly;
  gap: 10px;
  margin-top:0px;
  margin-right:0px;
  }

  .clerk_powerstep_header {
    width:calc(100% - 0px - 0px);
  }
  .clerk_powerstep_actions {
    flex-direction:column;
    gap:10px;
    width:100%;
  }
}

  .clerk_powerstep_overlay {
width:100%;
    background-color:rgba(0,0,0,.5);
    position:absolute;
    top:0;
    left:0;
    z-index:998;
    transition-property: all;
        transition-duration: 1s;
        transition-timing-function: ease-in-out;
}
</style>
<div class="clerk_powerstep_overlay" style="display:none;"></div>
<div style="display: none;" id="clerk_powerstep">
    <div class="clerk_powerstep_top">
        <span class="clerk-popup-headline">
          <h2>Almost there</h2>
        </span>
        <span class="clerk-popup-close" onclick="close_powerstep()">✕</span>
    </div>

    <div class="clerk_powerstep_wrap">
        <div class="clerk_powerstep_header">
        <h2>You added "{{ product.title }}" to your cart.</h2>
        
        </div>
        
        <div class="clerk_powerstep_image">
        <img src="{{ product.images[0].src | img_url: 'x150', scale: 2 }}" alt="You added <b><u>{{ product.title }}</u></b> to your cart.">
        </div>
        
        <div class="clerk_powerstep_actions">
            <button class="powerstep_continue button btn" onclick="location.href='{{ routes.cart_url }}';">Continue to Checkout</button>
            <button class="powerstep_close button btn" onclick="close_powerstep();">Continue Shopping</button>
        </div>
      
        
    </div>
  <span class="clerk-powerstep-recommendations" 
            data-template="@power-step-others-also-bought" 
            data-products="[{{product.id}}]">
        </span>
</div>

4. Din Powerstep-side bør nu dukke op, når et produkt lægges i indkøbskurven.

Justering af indkøbskurvens type i dit Shopify-tema

For at ændre din kurvtype skal du følge stien Tema > Tilpas > Temaindstillinger > Indkøbskurv > Indkøbskurvtype i din Shopify-backend.

I rullemenuen Cart type skal du sørge for at vælge en hvilken som helst mulighed undtagen for “Side”. De valgmuligheder, der vises i rullemenuen, afhænger af din webshops tema og kan blandt andet omfatte “Skuffe” eller “Popup”.

Hvis du vælger en anden mulighed end “Side”, undgår du, at siden genindlæses, når du aktiverer din Powerstep.

Når du har oprettet disse to filer, tilføjet de to linjer til din Theme-fil og opdateret dit Cart Theme, bør din Powerstep vises.

Hvad hvis min powerstep ikke vises?

Hvis din powerstep ikke vises, skyldes det sandsynligvis, at din Tilføj til kurv-knap har en anden klasse eller et andet ID. Undersøg din knap, og indsæt klassen/id’et for .product-form__cart-submit-klassen i koden.

Exit-intention #

Popuppen Afslut hensigt reagerer, når en besøgende forsøger at forlade din webshop. Den popper op og viser interessante produkter, hvilket muligvis konverterer en besøgende, der forlader webshoppen, til en købende kunde.

Opsætning #

Følg disse 5 trin:

  1. Opret en ny Hjemmesidens indhold i my.clerk.io

  2. Vælg den rigtige logik til den - vi foreslår “Anbefalinger fra besøgende”.

  3. Fra Indsæt på hjemmesiden, kopierer du den medfølgende indlejringskode og går til din Shopify-backend.

  4. Gå til Onlinebutik -> Temaer -> Handlinger -> Rediger kode og indsæt koden i den fil, der genererer alle sider. Dette er normalt theme.liquid.

  5. Tilføj: data-exit-intent=“true” til den indlejringskode, du lige har placeret.

Eksempel

<span class="clerk"
  data-template="@exit-intent"
  data-exit-intent="true">
</span>

Indsat i theme.liquid.

Nu vil du se exit intent-popup’en, når nogen forsøger at Forlad siden.

Husk at Stil dit indhold i Design på my.clerk.io

Alle anbefalinger, der indeholder data-exit-intent=“true”, vil udløse exit intent-pop-up’en.

Dynamisk filtrering #

Clerk.io filtre kan bruges direkte i indlejringskoderne ved hjælp af data-filter -attributten. Dette giver dig mulighed for at lave dynamiske filtre i logikken baseret på variabler i webshoppen.

Nedenfor finder du et par eksempler, men du kan bruge dette på mange andre måder.

Eksempel 1: Vis produkter af en bestemt type eller et bestemt mærke #

Du kan filtrere slidere, så de kun viser produkter inden for samme type eller fra samme mærke/producent.

I dette tilfælde skal du bruge Shopifys logik til at hente typen. Dette er normalt ’{%raw%}{{ product.type }}{%endraw%}’

Husk: Det er vigtigt at tilføje enkelte anførselstegn omkring variablen:

<span class="clerk"
      data-template="@type-slider"
      data-filter="type = '{%raw%}{{ product.type }}{%endraw%}'">
</span>

Eksempel 2: Vis produkter, der får en grænse for gratis forsendelse til at blive nået: #

Hvis du antager, at din shop har en variabel, der hedder {{ order.shipping_limit }}, som indeholder det resterende beløb, der er nødvendig for, at kunden kan nå grænsen for fri fragt, kan du bruge et dynamisk filter, der ser sådan ud, til kun at vise produkter over dette prispunkt:

<span class="clerk"
      data-template="@complementary-to-basket"
      data-filter="price > {%raw%}{{ order.shipping_limit }}{%endraw%}">
</span>

Denne side er oversat af en hjælpsom AI, og der kan derfor være sproglige fejl. Tak for forståelsen.