Swiipe

Get Started

Integrer Clerk recommendations med Swiipe Plus-sell

Integrer Clerk recommendations med Swiipe Plus-sell for at vise produktanbefalinger på ordrebekræftelsessider. Plus-sell lader kunder tilføje ekstra produkter direkte til den samme ordre.

Denne guide viser, hvordan du aktiverer og konfigurerer Clerk.io’s recommendations til at fungere med Plus-Sell.

Magento 2 #

Aktivering af Plus-sell #

Når Clerk.io Plugin’et er installeret, kan Swiipe automatisk hente konfigurationen af API-nøglen, så den ved, hvilken butik der bruger den.

I Magento2 backend, gå til Stores > Configuration > Swiipe
Klik på Plus-sell fanen.
Plus-sell aktiveres på butik-niveau, så sørg for at vælge en specifik butik i Scope sektionen øverst til venstre på siden.
Vælg Enable Swiipe Plus-sell
Klik Save Config øverst til højre

Hvis du vil bruge Swiipe’s indbyggede designs, vil det nu allerede blive vist på checkout-siden.

Valg af design #

Plus-sell’s design kan konfigureres på to måder:

Brug Swiipe’s indbyggede konverteringsoptimerede design (Anbefalet)
Brug Content / Designs fra Clerk som normalt

Brug af Swiipe’s indbyggede designs #

Dette er den standard- og anbefalede tilgang, da Swiipe har lavet designs, som er meget effektive til at konvertere.

Det vil fungere automatisk efter aktivering af Plus-sell, hvis der ikke foretages anden konfiguration.

Designene kan indstilles på flere måder:

Plus-sell template for Desktop
Lader dig vælge mellem standardtyper af Recommendations designs.
- Basic (statisk) viser en slider med 4 produkter.
- Carousel (roterer automatisk) viser en slider med 4 produkter, der roterer.
- Special (ét produkt ad gangen) viser 1 produkt med mere info pr. slide
Plus-sell headline lader dig vælge mellem 3 typer overskrifter, der vises over banneret
Show an animation in the Plus-sell headline viser et lille animeret kurv-ikon ved siden af overskriften
Show first plus-sell product as a pop-up viser en pop-up, når man går ind på checkout-siden, med det første anbefalede produkt fra Clerk.

Brug af Content / Designs fra Clerk #

Med denne funktion kan du tilpasse slideren i my.clerk.io.

Scroll ned til Clerk overskriften
Vælg Use template design from Clerk.io

I Clerk.io Template Key, skriv ID’et på det Content du ønsker at bruge.
Vi anbefaler at oprette et nyt Content med logikken Best Cross-Sell products

Nu skal du lave det tilpassede Design, der inkluderer Plus-sells funktionalitet til at tilføje produkter direkte til kurven.
I my.clerk.io, gå til Recommendations > Designs > New Design
Vælg Blank > Code og giv det et navn
Kopiér nedenstående kodeblokke ind i henholdsvis HTML og CSS sektionerne og klik Update Design

HTML

{% raw %}
<div class="clerk_content_wrap-global">
  <h3 class="clerk_content_headline-global"> {{ headline }} </h3>
  {% assign currency_symbol = '€' %}
  <!-- The class clerk-slider transforms the HTML into a slider, removing this class disables Clerk slider framework -->
  <div class="clerk-slider clerk_slider_wrap">
    {% for product in products %}
    <div class="clerk_product_tile_p-global">
        <!-- Replace Inner Contents, to keep slider framework -->
        <div class="clerk_product_wrapper-global">
          <div class="clerk_image_wrapper-global">
            <img class="clerk_product_image-global" loading="lazy" src="{{ product.image }}" />
            <img class="clerk_product_hover_image-global" loading="lazy" src="{{ product.image }}" />
            {% if product.price < product.list_price %}
                <!-- | pct allows you to get the percentage difference between any 2 numerical values -->
                <div  class="clerk_product_badge-global offer">-{{ product.price | pct product.list_price }}%</div>
                {%endif%}
                {% if product.age < 30 %}
                <div  class="clerk_product_badge-global new">New</div>
            {%endif%}
          </div>
          <div class="clerk_product_info_wrap-global">
              <p class="clerk_product_name-global"> {{product.name}} </p>
              <div class="clerk_product_price_wrap-global">
                {% if product.price < product.list_price %}
                <!-- | money_eu formatter takes 3 arguments: number of decimals, thousand separator, decimal separator. Can also be used with no arguments, will default to 2 decimal places. -->
                <div class="clerk_product_price-global now"> {{ currency_symbol }}{{ product.price | money_eu 2 "." ","  }} </div>
                <div class="clerk_product_price-global before"> {{ currency_symbol }}{{ product.list_price | money_eu 2 "." "," }} </div>
                {% else %}
                <div class="clerk_product_price-global now"> {{ currency_symbol }}{{ product.price | money_eu 2 "." "," }} </div>
                {% endif %}
              </div>
              <div class="clerk_sizes_wrap">
                {% if product.sizes %}
                  {%for str in product.sizes %}
                    <span class="clerk_sizes">{{str}}</span>
                  {%endfor%}
                {% endif %}
              </div>
           </div>
           <div class="clerk_product_cta-global" onclick="clerk_simple_swiipe_buy_now(this, {{product.id}});">Buy now</div>
         </div>
        <!-- Replace Inner Contents, to keep slider framework -->
    </div>
    {% endfor %}
  </div>
</div>
<script>
    function clerk_simple_swiipe_buy_now(el, product_id) {
        var buy_now = el.innerHTML;
        el.innerHTML = "Adding...";
        el.classList.toggle('button--loading');
        _SwiipeApi.plusSell.addProducts([{ id:product_id, qty:1 }]).then((result) => {
            el.classList.toggle('button--loading');
            el.innerHTML = buy_now;
        });
    }
</script>
{% endraw %}

CSS

.clerk_content_wrap-global * {
    font-family: 'Trebuchet MS', Helvetica;
    transition:height 0.3s ease;
    transition:color 0.3s ease;
    transition:border 0.3s ease;
    transition:background 0.3s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.clerk_product_tile-global {
    display: flex !important;
}
.clerk-slider-nav {
    z-index: 1 !important;
    background-image: none !important;
    box-shadow: none !important;
}
.clerk_slider_wrap {
    display: inline-flex;
    align-items: stretch;
    max-width: 100vw;
    width:inherit;
}

@keyframes arrowPop {
    0% {
        width:20%;
    }
    50% {
        width:0%;
    }
    100% {
        width: 20%;
    }
}

.clerk-slider-nav {
    background: #333;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:0;
    opacity:0.8;
    filter: drop-shadow(0 0 5px #333);
    transition:0.3s ease;
}

.clerk-slider-nav:hover {
    opacity:1;
    transition:0.3s ease;
}
.clerk-slider-nav:hover:before {
    animation:arrowPop 0.3s ease;
}
.clerk-slider-nav-next {
    flex-direction:row-reverse;
}

.clerk-slider-nav:after {
    content:"";
    display:block;
    height:40%;
    width:40%;
    transform: rotate(45deg);
    border: solid white;
}
.clerk-slider-nav-prev:after {
    border-width: 0px 0px 2px 2px;
}

.clerk-slider-nav-next:after {
    border-width: 2px 2px 0px 0px;
}

.clerk-slider-nav:before {
    content:"";
    width:20%;
}

.clerk_container-global {
    display:block;
    width:100%;
}

.clerk_product_info_wrap-global {

    padding: 5px;
    border-radius:1px;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    min-height: 0;
    height: -webkit-fill-available;
    height: -moz-available;
    height: fill-available;
        height: 100%;
        height: auto;
}

.clerk_product_info_wrap-global .clerk_link-global {
    transition:0.3s ease;
    min-height:0;
    height: -webkit-fill-available;
    height: -moz-available;
    height: fill-available;
        height: 100%;
        height: auto;
}

.clerk_product_info_wrap-global > * {
    padding: 0 5px;
}
.clerk_link-global {
    border-bottom:none;
    display:inherit;
    width:100%;
    text-decoration:none;
    color:inherit;
    padding:0;
}

.clerk_link-global:hover {
    filter: contrast(105%);
}

.clerk_content_headline-global{
    max-width: 100%;
    width: 100%;
    font-size: 26px;
    text-align:center;
    color:inherit;
}

.clerk_product_tile_p-global{
    flex-direction: column;
    justify-content: space-between;
    border-radius:0px;
    padding:15px;
    margin:5px;
    box-sizing:border-box;
    min-width:calc(25% - 10px);
    max-width:calc(25% - 10px);
    position:relative;
    overflow:hidden;
    border:1px solid #eee;
    background-color:white;
    text-align:center;
}

.clerk_product_wrapper-global {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.clerk_product_badge-global.offer{
    display:block;
    position:absolute;
    top:0;
    right:0;
    width: 4em;
    height: 4em;
    border-radius:999rem; /* Needed to ensure it never rounds corners more end 50% */
    background: #f9f9f9;
    color:#333;
    font-weight:bold;
    line-height:3.5em;
    border:4px solid #333;
    user-select:none;
    pointer-events:none;
}

.clerk_product_badge-global.new{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 4em;
    height: 4em;
    border-radius: 999rem;
    background: #f9f9f9;
    color: #333;
    font-weight: bold;
    line-height: 3.5em;
    border: 4px solid #333;
    user-select: none;
    pointer-events: none;
}

.clerk_image_wrapper-global {
    display:block;
    position:relative;
    width:100%;
    height:auto;
}

.clerk_image_wrapper-global:hover .clerk_product_hover_image-global {
    opacity:1;
    transition: 0.3s ease-in;
}

.clerk_image_wrapper-global:hover .clerk_product_image-global {
    opacity:0;
    transition: 0.3s ease-out;
    transition-delay:0.2s;
}

.clerk_image_wrapper-global .clerk_product_hover_image-global {
    position:absolute;
    top:0;
    left:0;
    min-height:auto;
}

.clerk_product_hover_image-global{
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
    object-fit: contain;
    /*Change the max height value below to 100% if the client has consistent image sizes */
    max-height:400px;
    width:100%;
    max-width:100%;
    height: auto;
    opacity:0;
}

.clerk_product_image-global{
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
    object-fit: contain;
    /*Change the max height value below to 100% if the client has consistent image sizes */
    max-height:400px;
    width:100%;
    max-width:100%;
    height: auto;
}

.clerk_product_stock-global {
    display:flex;
    text-align:left;
    justify-content:left;
    align-items:center;
    font-size:80%;
    text-transform: capitalize;
    padding:5px;
    user-select:none;
}

.clerk_product_stock-global:before {
    content:"";
    height: 8px;
    width: 8px;
    margin:0 5px 0 0;
    border-radius:50%;
}

.clerk_product_stock-global.in:before {
    background:#78b904;
}
/*
.clerk_product_stock.low:before {
    background:#eea71e;
}
*/
.clerk_product_stock-global.out:before {
    background:#ee1e31;
}
.clerk_product_name-global{
    overflow:hidden;
    height:auto;
    min-height: 36px;
    margin-bottom:1rem;
    color:inherit;
    text-align:left;
    max-width: 100%;
    padding:0 5px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.clerk_product_price_wrap-global{
    font-size: 1em;
    min-height: auto;
    flex-direction:row;
    display:flex;
    max-width: 100%;
    justify-content: flex-start;
}

.clerk_product_price-global {
    padding: 0px 5px 0px 0px;
}

.clerk_product_price-global.before{
    opacity: .8;
    flex:1;
    font-weight:normal;
    color:black;
    text-decoration:line-through;
    font-size:inherit;
    text-align:center;
    max-width: fit-content;
    max-width: -moz-fit-content;
}

.clerk_product_price-global.now{
    flex:1;
    font-weight:bold;
    font-size:inherit;
    text-align:center;
    color:inherit;
    max-width: fit-content;
    max-width: -moz-fit-content;
}

.clerk_product_cta-global{
    border-radius:2px;
    cursor:pointer;
    color:#fff;
    padding:5px;
    margin:0;
    display:block;
    white-space:nowrap;
    font-weight:normal;
    border:none;
    background-color:#333;
    border:1px solid #333;
    text-align:center;
    max-width: 100%;
    text-decoration: none;
}

.clerk_product_cta-global:hover {
    color:#333;
    background-color:#fff;
}

.clerk_content_wrap-global{
    box-sizing: border-box;
    margin: 1rem auto;
    width: 100%;
}

@media screen and (max-width: 400px) {
.clerk_content_headline-global{

}

.clerk_product_tile_p-global{
    min-width:calc(100%);
    max-width:calc(100%);
}

.clerk_product_badge-global{

}
.clerk_product_price_wrap-global {

}
}
@media screen and (min-width: 401px) and (max-width: 620px) {
.clerk_content_headline-global{

}
.clerk_product_tile_p-global{
    min-width:calc(50% - 10px);
    max-width:calc(50% - 10px);
}
.clerk_product_badge-global{

}
}
@media screen and (min-width: 621px) and (max-width: 940px) {
.clerk_content_headline-global{

}
.clerk_product_tile_p-global{
    min-width:calc(33.333336% - 10px);
    max-width:calc(33.333336% - 10px);
}
.clerk_product_badge-global{

}
}
@media screen and (min-width: 941px) and (max-width: 1160px) {
.clerk_content_headline-global{

}
.clerk_product_tile_p-global{
    min-width:calc(25% - 10px);
    max-width:calc(25% - 10px);
}
.clerk_product_badge-global{

}
}

.clerk_sizes_wrap{
    display:flex;
    flex-direction:row;
    width:100%;
}
.clerk_sizes{
    padding:5px;
    margin:5px;
    border:1px solid #eee;
    width:50px;
}

Gå til sidst til det Content du har oprettet, og vælg dette design under Select Design. Klik derefter Update Content

Swiipe Plus-sell vil nu køre med Clerk designet på checkout.

Magento 1 #

Aktivering af Plus-sell #

Når Clerk.io Plugin’et er installeret, kan Swiipe automatisk hente konfigurationen af API-nøglen, så den ved, hvilken butik der bruger den.

I Magento backend, gå til System > Configuration > Swiipe
Under Swiipe i sidemenuen, klik på Payment Settings fanen.
Plus-sell aktiveres på butik-niveau, så sørg for at vælge en specifik butik i Scope sektionen øverst til venstre på siden.
Vælg Enable Swiipe Plus-sell
Klik Save Config øverst til højre

Valg af design #

Brug af Content / Designs fra Clerk #

Med denne funktion kan du tilpasse slideren i my.clerk.io.

Scroll ned til Clerk overskriften
Vælg Use template design from Clerk.io

I Clerk.io Template Key, skriv ID’et på det Content du ønsker at bruge.
Vi anbefaler at oprette et nyt Content med logikken Best Cross-Sell products

Nu skal du lave det tilpassede Design, der inkluderer Plus-sells funktionalitet til at tilføje produkter direkte til kurven.
I my.clerk.io, gå til Recommendations > Designs > New Design
Vælg Blank > Code og giv det et navn
Kopiér nedenstående kodeblokke ind i henholdsvis HTML og CSS sektionerne og klik Update Design

HTML

{% raw %}
<div class="clerk_content_wrap-global">
  <h3 class="clerk_content_headline-global"> {{ headline }} </h3>
  {% assign currency_symbol = '€' %}
  <!-- The class clerk-slider transforms the HTML into a slider, removing this class disables Clerk slider framework -->
  <div class="clerk-slider clerk_slider_wrap">
    {% for product in products %}
    <div class="clerk_product_tile_p-global">
        <!-- Replace Inner Contents, to keep slider framework -->
        <div class="clerk_product_wrapper-global">
          <div class="clerk_image_wrapper-global">
            <img class="clerk_product_image-global" loading="lazy" src="{{ product.image }}" />
            <img class="clerk_product_hover_image-global" loading="lazy" src="{{ product.image }}" />
            {% if product.price < product.list_price %}
                <!-- | pct allows you to get the percentage difference between any 2 numerical values -->
                <div  class="clerk_product_badge-global offer">-{{ product.price | pct product.list_price }}%</div>
                {%endif%}
                {% if product.age < 30 %}
                <div  class="clerk_product_badge-global new">New</div>
            {%endif%}
          </div>
          <div class="clerk_product_info_wrap-global">
              <p class="clerk_product_name-global"> {{product.name}} </p>
              <div class="clerk_product_price_wrap-global">
                {% if product.price < product.list_price %}
                <!-- | money_eu formatter takes 3 arguments: number of decimals, thousand separator, decimal separator. Can also be used with no arguments, will default to 2 decimal places. -->
                <div class="clerk_product_price-global now"> {{ currency_symbol }}{{ product.price | money_eu 2 "." ","  }} </div>
                <div class="clerk_product_price-global before"> {{ currency_symbol }}{{ product.list_price | money_eu 2 "." "," }} </div>
                {% else %}
                <div class="clerk_product_price-global now"> {{ currency_symbol }}{{ product.price | money_eu 2 "." "," }} </div>
                {% endif %}
              </div>
              <div class="clerk_sizes_wrap">
                {% if product.sizes %}
                  {%for str in product.sizes %}
                    <span class="clerk_sizes">{{str}}</span>
                  {%endfor%}
                {% endif %}
              </div>
           </div>
           <div class="clerk_product_cta-global" onclick="clerk_simple_swiipe_buy_now(this, {{product.id}});">Buy now</div>
         </div>
        <!-- Replace Inner Contents, to keep slider framework -->
    </div>
    {% endfor %}
  </div>
</div>
<script>
    function clerk_simple_swiipe_buy_now(el, product_id) {
        var buy_now = el.innerHTML;
        el.innerHTML = "Adding...";
        el.classList.toggle('button--loading');
        _SwiipeApi.plusSell.addProducts([{ id:product_id, qty:1 }]).then((result) => {
            el.classList.toggle('button--loading');
            el.innerHTML = buy_now;
        });
    }
</script>
{% endraw %}

CSS

.clerk_content_wrap-global * {
    font-family: 'Trebuchet MS', Helvetica;
    transition:height 0.3s ease;
    transition:color 0.3s ease;
    transition:border 0.3s ease;
    transition:background 0.3s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.clerk_product_tile-global {
    display: flex !important;
}
.clerk-slider-nav {
    z-index: 1 !important;
    background-image: none !important;
    box-shadow: none !important;
}
.clerk_slider_wrap {
    display: inline-flex;
    align-items: stretch;
    max-width: 100vw;
    width:inherit;
}

@keyframes arrowPop {
    0% {
        width:20%;
    }
    50% {
        width:0%;
    }
    100% {
        width: 20%;
    }
}

.clerk-slider-nav {
    background: #333;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:0;
    opacity:0.8;
    filter: drop-shadow(0 0 5px #333);
    transition:0.3s ease;
}

.clerk-slider-nav:hover {
    opacity:1;
    transition:0.3s ease;
}
.clerk-slider-nav:hover:before {
    animation:arrowPop 0.3s ease;
}
.clerk-slider-nav-next {
    flex-direction:row-reverse;
}

.clerk-slider-nav:after {
    content:"";
    display:block;
    height:40%;
    width:40%;
    transform: rotate(45deg);
    border: solid white;
}
.clerk-slider-nav-prev:after {
    border-width: 0px 0px 2px 2px;
}

.clerk-slider-nav-next:after {
    border-width: 2px 2px 0px 0px;
}

.clerk-slider-nav:before {
    content:"";
    width:20%;
}

.clerk_container-global {
    display:block;
    width:100%;
}

.clerk_product_info_wrap-global {

    padding: 5px;
    border-radius:1px;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    min-height: 0;
    height: -webkit-fill-available;
    height: -moz-available;
    height: fill-available;
        height: 100%;
        height: auto;
}

.clerk_product_info_wrap-global .clerk_link-global {
    transition:0.3s ease;
    min-height:0;
    height: -webkit-fill-available;
    height: -moz-available;
    height: fill-available;
        height: 100%;
        height: auto;
}

.clerk_product_info_wrap-global > * {
    padding: 0 5px;
}
.clerk_link-global {
    border-bottom:none;
    display:inherit;
    width:100%;
    text-decoration:none;
    color:inherit;
    padding:0;
}

.clerk_link-global:hover {
    filter: contrast(105%);
}

.clerk_content_headline-global{
    max-width: 100%;
    width: 100%;
    font-size: 26px;
    text-align:center;
    color:inherit;
}

.clerk_product_tile_p-global{
    flex-direction: column;
    justify-content: space-between;
    border-radius:0px;
    padding:15px;
    margin:5px;
    box-sizing:border-box;
    min-width:calc(25% - 10px);
    max-width:calc(25% - 10px);
    position:relative;
    overflow:hidden;
    border:1px solid #eee;
    background-color:white;
    text-align:center;
}

.clerk_product_wrapper-global {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.clerk_product_badge-global.offer{
    display:block;
    position:absolute;
    top:0;
    right:0;
    width: 4em;
    height: 4em;
    border-radius:999rem; /* Needed to ensure it never rounds corners more end 50% */
    background: #f9f9f9;
    color:#333;
    font-weight:bold;
    line-height:3.5em;
    border:4px solid #333;
    user-select:none;
    pointer-events:none;
}

.clerk_product_badge-global.new{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 4em;
    height: 4em;
    border-radius: 999rem;
    background: #f9f9f9;
    color: #333;
    font-weight: bold;
    line-height: 3.5em;
    border: 4px solid #333;
    user-select: none;
    pointer-events: none;
}

.clerk_image_wrapper-global {
    display:block;
    position:relative;
    width:100%;
    height:auto;
}

.clerk_image_wrapper-global:hover .clerk_product_hover_image-global {
    opacity:1;
    transition: 0.3s ease-in;
}

.clerk_image_wrapper-global:hover .clerk_product_image-global {
    opacity:0;
    transition: 0.3s ease-out;
    transition-delay:0.2s;
}

.clerk_image_wrapper-global .clerk_product_hover_image-global {
    position:absolute;
    top:0;
    left:0;
    min-height:auto;
}

.clerk_product_hover_image-global{
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
    object-fit: contain;
    /*Change the max height value below to 100% if the client has consistent image sizes */
    max-height:400px;
    width:100%;
    max-width:100%;
    height: auto;
    opacity:0;
}

.clerk_product_image-global{
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
    object-fit: contain;
    /*Change the max height value below to 100% if the client has consistent image sizes */
    max-height:400px;
    width:100%;
    max-width:100%;
    height: auto;
}

.clerk_product_stock-global {
    display:flex;
    text-align:left;
    justify-content:left;
    align-items:center;
    font-size:80%;
    text-transform: capitalize;
    padding:5px;
    user-select:none;
}

.clerk_product_stock-global:before {
    content:"";
    height: 8px;
    width: 8px;
    margin:0 5px 0 0;
    border-radius:50%;
}

.clerk_product_stock-global.in:before {
    background:#78b904;
}
/*
.clerk_product_stock.low:before {
    background:#eea71e;
}
*/
.clerk_product_stock-global.out:before {
    background:#ee1e31;
}
.clerk_product_name-global{
    overflow:hidden;
    height:auto;
    min-height: 36px;
    margin-bottom:1rem;
    color:inherit;
    text-align:left;
    max-width: 100%;
    padding:0 5px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.clerk_product_price_wrap-global{
    font-size: 1em;
    min-height: auto;
    flex-direction:row;
    display:flex;
    max-width: 100%;
    justify-content: flex-start;
}

.clerk_product_price-global {
    padding: 0px 5px 0px 0px;
}

.clerk_product_price-global.before{
    opacity: .8;
    flex:1;
    font-weight:normal;
    color:black;
    text-decoration:line-through;
    font-size:inherit;
    text-align:center;
    max-width: fit-content;
    max-width: -moz-fit-content;
}

.clerk_product_price-global.now{
    flex:1;
    font-weight:bold;
    font-size:inherit;
    text-align:center;
    color:inherit;
    max-width: fit-content;
    max-width: -moz-fit-content;
}

.clerk_product_cta-global{
    border-radius:2px;
    cursor:pointer;
    color:#fff;
    padding:5px;
    margin:0;
    display:block;
    white-space:nowrap;
    font-weight:normal;
    border:none;
    background-color:#333;
    border:1px solid #333;
    text-align:center;
    max-width: 100%;
    text-decoration: none;
}

.clerk_product_cta-global:hover {
    color:#333;
    background-color:#fff;
}

.clerk_content_wrap-global{
    box-sizing: border-box;
    margin: 1rem auto;
    width: 100%;
}

@media screen and (max-width: 400px) {
.clerk_content_headline-global{

}

.clerk_product_tile_p-global{
    min-width:calc(100%);
    max-width:calc(100%);
}

.clerk_product_badge-global{

}
.clerk_product_price_wrap-global {

}
}
@media screen and (min-width: 401px) and (max-width: 620px) {
.clerk_content_headline-global{

}
.clerk_product_tile_p-global{
    min-width:calc(50% - 10px);
    max-width:calc(50% - 10px);
}
.clerk_product_badge-global{

}
}
@media screen and (min-width: 621px) and (max-width: 940px) {
.clerk_content_headline-global{

}
.clerk_product_tile_p-global{
    min-width:calc(33.333336% - 10px);
    max-width:calc(33.333336% - 10px);
}
.clerk_product_badge-global{

}
}
@media screen and (min-width: 941px) and (max-width: 1160px) {
.clerk_content_headline-global{

}
.clerk_product_tile_p-global{
    min-width:calc(25% - 10px);
    max-width:calc(25% - 10px);
}
.clerk_product_badge-global{

}
}

.clerk_sizes_wrap{
    display:flex;
    flex-direction:row;
    width:100%;
}
.clerk_sizes{
    padding:5px;
    margin:5px;
    border:1px solid #eee;
    width:50px;
}

Gå til sidst til det Content du har oprettet, og vælg dette design under Select Design. Klik derefter Update Content

Swiipe Plus-sell vil nu køre med Clerk designet på checkout.

WooCommerce #

Aktivering af Plus-sell #

Når Clerk.io Plugin’et er installeret, kan Swiipe automatisk hente konfigurationen af API-nøglen, så den ved, hvilken butik der bruger den.

I WooCommerce backend, gå til Plugins > Installed Plugins > Swiipe > Swiipe Settings.
Klik på Plus-sell fanen.
Vælg Enable Swiipe Plus-sell
Klik Save changes nederst på siden

Hvis du vil bruge Swiipe’s indbyggede designs, vil det nu allerede blive vist på checkout-siden.

Valg af design #

Plus-sell’s design kan konfigureres på to måder:

Brug Swiipe’s indbyggede konverteringsoptimerede design (Anbefalet)
Brug Content / Designs fra Clerk som normalt

Brug af Swiipe’s indbyggede designs #

Dette er den standard- og anbefalede tilgang, da Swiipe har lavet designs, som er meget effektive til at konvertere.

Det vil fungere automatisk efter aktivering af Plus-sell, hvis der ikke foretages anden konfiguration.

Designene kan indstilles på flere måder:

Plus-sell template for Desktop
Lader dig vælge mellem standardtyper af Recommendations designs.
- Basic (statisk) viser en slider med 4 produkter.
- Carousel (roterer automatisk) viser en slider med 4 produkter, der roterer.
- Special (ét produkt ad gangen) viser 1 produkt med mere info pr. slide
Plus-sell headline lader dig vælge mellem 3 typer overskrifter, der vises over banneret
Show an animation in the Plus-sell headline viser et lille animeret kurv-ikon ved siden af overskriften
Show first plus-sell product as a pop-up viser en pop-up, når man går ind på checkout-siden, med det første anbefalede produkt fra Clerk.

Brug af indhold / designs fra Clerk #

Med denne funktion kan du tilpasse slideren i my.clerk.io.

Rul ned til Clerk-overskriften
Vælg Brug skabelondesign fra Clerk.io

I Clerk.io Template Key skal du skrive ID’et på det Content, du vil bruge.
Vi anbefaler at oprette nyt Content med logikken Best Cross-Sell products

Nu skal du oprette det brugerdefinerede Design, der inkluderer Plus-sell-funktionalitet til at tilføje produkter direkte til kurven.
Gå til Recommendations > Designs > New Design i my.clerk.io
Vælg Blank > Code og giv det et navn
Kopiér nedenstående kodeblokke ind i sektionerne HTML og CSS og klik på Update Design

HTML

<div class="clerk_content_wrap-global">
  <h3 class="clerk_content_headline-global"> {{ headline }} </h3>
  {% assign currency_symbol = '€' %}
  <!-- The class clerk-slider transforms the HTML into a slider, removing this class disables Clerk slider framework -->
  <div class="clerk-slider clerk_slider_wrap">
    {% for product in products %}
    <div class="clerk_product_tile_p-global">
        <!-- Replace Inner Contents, to keep slider framework -->
        <div class="clerk_product_wrapper-global">
          <div class="clerk_image_wrapper-global">
            <img class="clerk_product_image-global" loading="lazy" src="{{ product.image }}" />
            <img class="clerk_product_hover_image-global" loading="lazy" src="{{ product.image }}" />
            {% if product.price < product.list_price %}
                <!-- | pct allows you to get the percentage difference between any 2 numerical values -->
                <div  class="clerk_product_badge-global offer">-{{ product.price | pct product.list_price }}%</div>
                {%endif%}
                {% if product.age < 30 %}
                <div  class="clerk_product_badge-global new">New</div>
            {%endif%}
          </div>
          <div class="clerk_product_info_wrap-global">
              <p class="clerk_product_name-global"> {{product.name}} </p>
              <div class="clerk_product_price_wrap-global">
                {% if product.price < product.list_price %}
                <!-- | money_eu formatter takes 3 arguments: number of decimals, thousand separator, decimal separator. Can also be used with no arguments, will default to 2 decimal places. -->
                <div class="clerk_product_price-global now"> {{ currency_symbol }}{{ product.price | money_eu 2 "." ","  }} </div>
                <div class="clerk_product_price-global before"> {{ currency_symbol }}{{ product.list_price | money_eu 2 "." "," }} </div>
                {% else %}
                <div class="clerk_product_price-global now"> {{ currency_symbol }}{{ product.price | money_eu 2 "." "," }} </div>
                {% endif %}
              </div>
              <div class="clerk_sizes_wrap">
                {% if product.sizes %}
                  {%for str in product.sizes %}
                    <span class="clerk_sizes">{{str}}</span>
                  {%endfor%}
                {% endif %}
              </div>
           </div>
           <div class="clerk_product_cta-global" onclick="clerk_simple_swiipe_buy_now(this, {{product.id}});">Buy now</div>
         </div>
        <!-- Replace Inner Contents, to keep slider framework -->
    </div>
    {% endfor %}
  </div>
</div>
<script>
    function clerk_simple_swiipe_buy_now(el, product_id) {
        var buy_now = el.innerHTML;
        el.innerHTML = "Adding...";
        el.classList.toggle('button--loading');
        _SwiipeApi.plusSell.addProducts([{ id:product_id, qty:1 }]).then((result) => {
            el.classList.toggle('button--loading');
            el.innerHTML = buy_now;
        });
    }
</script>

CSS

.clerk_content_wrap-global * {
    font-family: 'Trebuchet MS', Helvetica;
    transition:height 0.3s ease;
    transition:color 0.3s ease;
    transition:border 0.3s ease;
    transition:background 0.3s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.clerk_product_tile-global {
    display: flex !important;
}
.clerk-slider-nav {
    z-index: 1 !important;
    background-image: none !important;
    box-shadow: none !important;
}
.clerk_slider_wrap {
    display: inline-flex;
    align-items: stretch;
    max-width: 100vw;
    width:inherit;
}

@keyframes arrowPop {
    0% {
        width:20%;
    }
    50% {
        width:0%;
    }
    100% {
        width: 20%;
    }
}

.clerk-slider-nav {
    background: #333;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:0;
    opacity:0.8;
    filter: drop-shadow(0 0 5px #333);
    transition:0.3s ease;
}

.clerk-slider-nav:hover {
    opacity:1;
    transition:0.3s ease;
}
.clerk-slider-nav:hover:before {
    animation:arrowPop 0.3s ease;
}
.clerk-slider-nav-next {
    flex-direction:row-reverse;
}

.clerk-slider-nav:after {
    content:"";
    display:block;
    height:40%;
    width:40%;
    transform: rotate(45deg);
    border: solid white;
}
.clerk-slider-nav-prev:after {
    border-width: 0px 0px 2px 2px;
}

.clerk-slider-nav-next:after {
    border-width: 2px 2px 0px 0px;
}

.clerk-slider-nav:before {
    content:"";
    width:20%;
}

.clerk_container-global {
    display:block;
    width:100%;
}

.clerk_product_info_wrap-global {

    padding: 5px;
    border-radius:1px;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    min-height: 0;
    height: -webkit-fill-available;
    height: -moz-available;
    height: fill-available;
        height: 100%;
        height: auto;
}

.clerk_product_info_wrap-global .clerk_link-global {
    transition:0.3s ease;
    min-height:0;
    height: -webkit-fill-available;
    height: -moz-available;
    height: fill-available;
        height: 100%;
        height: auto;
}

.clerk_product_info_wrap-global > * {
    padding: 0 5px;
}
.clerk_link-global {
    border-bottom:none;
    display:inherit;
    width:100%;
    text-decoration:none;
    color:inherit;
    padding:0;
}

.clerk_link-global:hover {
    filter: contrast(105%);
}

.clerk_content_headline-global{
    max-width: 100%;
    width: 100%;
    font-size: 26px;
    text-align:center;
    color:inherit;
}

.clerk_product_tile_p-global{
    flex-direction: column;
    justify-content: space-between;
    border-radius:0px;
    padding:15px;
    margin:5px;
    box-sizing:border-box;
    min-width:calc(25% - 10px);
    max-width:calc(25% - 10px);
    position:relative;
    overflow:hidden;
    border:1px solid #eee;
    background-color:white;
    text-align:center;
}

.clerk_product_wrapper-global {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.clerk_product_badge-global.offer{
    display:block;
    position:absolute;
    top:0;
    right:0;
    width: 4em;
    height: 4em;
    border-radius:999rem; /* Needed to ensure it never rounds corners more than 50% */
    background: #f9f9f9;
    color:#333;
    font-weight:bold;
    line-height:3.5em;
    border:4px solid #333;
    user-select:none;
    pointer-events:none;
}

.clerk_product_badge-global.new{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 4em;
    height: 4em;
    border-radius: 999rem;
    background: #f9f9f9;
    color: #333;
    font-weight: bold;
    line-height: 3.5em;
    border: 4px solid #333;
    user-select: none;
    pointer-events: none;
}

.clerk_image_wrapper-global {
    display:block;
    position:relative;
    width:100%;
    height:auto;
}

.clerk_image_wrapper-global:hover .clerk_product_hover_image-global {
    opacity:1;
    transition: 0.3s ease-in;
}

.clerk_image_wrapper-global:hover .clerk_product_image-global {
    opacity:0;
    transition: 0.3s ease-out;
    transition-delay:0.2s;
}

.clerk_image_wrapper-global .clerk_product_hover_image-global {
    position:absolute;
    top:0;
    left:0;
    min-height:auto;
}

.clerk_product_hover_image-global{
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
    object-fit: contain;
    /*Change the max height value below to 100% if the client has consistent image sizes */
    max-height:400px;
    width:100%;
    max-width:100%;
    height: auto;
    opacity:0;
}

.clerk_product_image-global{
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
    object-fit: contain;
    /*Change the max height value below to 100% if the client has consistent image sizes */
    max-height:400px;
    width:100%;
    max-width:100%;
    height: auto;
}

.clerk_product_stock-global {
    display:flex;
    text-align:left;
    justify-content:left;
    align-items:center;
    font-size:80%;
    text-transform: capitalize;
    padding:5px;
    user-select:none;
}

.clerk_product_stock-global:before {
    content:"";
    height: 8px;
    width: 8px;
    margin:0 5px 0 0;
    border-radius:50%;
}

.clerk_product_stock-global.in:before {
    background:#78b904;
}
/*
.clerk_product_stock.low:before {
    background:#eea71e;
}
*/
.clerk_product_stock-global.out:before {
    background:#ee1e31;
}
.clerk_product_name-global{
    overflow:hidden;
    height:auto;
    min-height: 36px;
    margin-bottom:1rem;
    color:inherit;
    text-align:left;
    max-width: 100%;
    padding:0 5px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.clerk_product_price_wrap-global{
    font-size: 1em;
    min-height: auto;
    flex-direction:row;
    display:flex;
    max-width: 100%;
    justify-content: flex-start;
}

.clerk_product_price-global {
    padding: 0px 5px 0px 0px;
}

.clerk_product_price-global.before{
    opacity: .8;
    flex:1;
    font-weight:normal;
    color:black;
    text-decoration:line-through;
    font-size:inherit;
    text-align:center;
    max-width: fit-content;
    max-width: -moz-fit-content;
}

.clerk_product_price-global.now{
    flex:1;
    font-weight:bold;
    font-size:inherit;
    text-align:center;
    color:inherit;
    max-width: fit-content;
    max-width: -moz-fit-content;
}

.clerk_product_cta-global{
    border-radius:2px;
    cursor:pointer;
    color:#fff;
    padding:5px;
    margin:0;
    display:block;
    white-space:nowrap;
    font-weight:normal;
    border:none;
    background-color:#333;
    border:1px solid #333;
    text-align:center;
    max-width: 100%;
    text-decoration: none;
}

.clerk_product_cta-global:hover {
    color:#333;
    background-color:#fff;
}

.clerk_content_wrap-global{
    box-sizing: border-box;
    margin: 1rem auto;
    width: 100%;
}

@media screen and (max-width: 400px) {
.clerk_content_headline-global{

}

.clerk_product_tile_p-global{
    min-width:calc(100%);
    max-width:calc(100%);
}

.clerk_product_badge-global{

}
.clerk_product_price_wrap-global {

}
}
@media screen and (min-width: 401px) and (max-width: 620px) {
.clerk_content_headline-global{

}
.clerk_product_tile_p-global{
    min-width:calc(50% - 10px);
    max-width:calc(50% - 10px);
}
.clerk_product_badge-global{

}
}
@media screen and (min-width: 621px) and (max-width: 940px) {
.clerk_content_headline-global{

}
.clerk_product_tile_p-global{
    min-width:calc(33.333336% - 10px);
    max-width:calc(33.333336% - 10px);
}
.clerk_product_badge-global{

}
}
@media screen and (min-width: 941px) and (max-width: 1160px) {
.clerk_content_headline-global{

}
.clerk_product_tile_p-global{
    min-width:calc(25% - 10px);
    max-width:calc(25% - 10px);
}
.clerk_product_badge-global{

}
}

.clerk_sizes_wrap{
    display:flex;
    flex-direction:row;
    width:100%;
}
.clerk_sizes{
    padding:5px;
    margin:5px;
    border:1px solid #eee;
    width:50px;
}

Gå endelig til det Content, du oprettede, og vælg dette design under Select Design. Klik derefter på Update Content

Swiipe Plus-sell kører nu med Clerk-designet i checkouten.

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