Shopify

Viabill Opdateret af Viabill

Har du brug for hjælp til at få ViaBill integreret på din webshop? Kontakt vores dedikerede integrations team på mail teknik@viabill.com, så hjælper de dig videre.

Installation af ViaBill Shopify app

For at få ViaBill på din Shopify webshop, skal du installere vores app, ViaBill Checkout, via dette link.

Herefter skal du trykke på Installer ViaBill Checkout og indtaste de nødvendige oplysninger.

Klik nu på Install Unlisted App for at installere app'en. Shopify er ved at gennemse og godkende vores app, hvorfor den er markeret som unlisted (opdateret 3/12 2020). App'en virker dog upåklageligt, så du kan trygt installere vores app.

Er du allerede kunde hos ViaBill og oprettet i vores system, skal du logge ind som eksisterende kunde med de samme oplysninger, som du bruger til at logge ind med på Mit ViaBill. Har du endnu ikke været logget ind på Mit ViaBill, kan du få en midlertidig kode tilsendt ved at gå ind på vores hjemmeside og nulstille din adgangskode ved at trykke Glemt adgangskode?

Er du endnu ikke kunde hos ViaBill skal du vælge Register with ViaBill, udfylde de nødvendige felter og trykke Register.

Nu er app'en installeret, hvormed du får adgang til app'ens kontrolpanel, hvor du kan se din ViaBill API, se dit unikke ViaBill PriceTag script samt installere vores Payment Gateway.

Payment Gateway Setup

For at installere vores betalingsgateway, skal du trykke Install under Payment Gateway Setup. Herefter vil installationen åbne op i en ny fane.

Her skal du trykke på knappen, som vist på billedet nedenfor. Shopify har nogle udfordringer med deres knapper, hvorfor knappen kan være svær at se (opdateret 3/12 2020).

Når gateway er installeret, skal du gå tilbage til app'en og trykke på Payment Provider Settings, som vil tage dig til Shopify's indstillinger for betaling. Du kan også, i menuen til venstre i Shopify, trykke på Settings og så Betaling for at komme frem til samme side.

Scroll ned til Alternative payment methods og tryk Choose alternative payment. Herefter kan enten søge efter ViaBill eller scrolle ned til ViaBill, som forefindes nederst på listen, da listen, som standard, er sorteret alfabetisk. Vælg nu ViaBill Checkout og indsæt API og Secret, som du finder i app'ens kontrolpanel.

PriceTag

Vær opmærksom på, at den følgende vejledning er en general vejledning, og at den ikke nødvendigvis passer til din webshop og dit valgte tema. Se vores PriceTag dokumentation (på engelsk) for yderligere information.

Først skal du indsætte dit unikke PriceTag script nederst i tema filerne product.liquid og cart.liquid. Du finder dit PriceTag script i app'ens kontrolpanel.

Alternativt kan du kopiere nedenstående og erstatte {SHOPSPECIFIC} med den unikke del af dit PriceTag script, som står efter script/ og før ';var.

<script>
(function(){
var o=document.createElement('script');
o.type='text/javascript';
o.async=true;
o.src='https://pricetag.viabill.com/script/{SHOPSPECIFIC}';
var s=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(o,s);
})();
</script>

Du tilgår dit temas filer ved at navigere til menuen i venstre side. Klik først på Online Store, herefter på Actions og vælg til sidst Edit Code i dropdown.

PriceTag på Produkter

I samme vindue find frem til filen product-template.liquid og indsæt følgende div i nærheden af produktets pris.

<div class="viabill-pricetag"
data-view="product"
data-price="{{ product.price | money }}"
data-language="da"
data-currency="dkk">
</div>

Hvis PriceTag ikke viser den korrekt pris, skal du muligvis ændre {{ product.price | money }} i data-price til noget andet, som er unikt for din webshop.

Det er muligt at tilføje styling til ovenstående efter behov. Indsæt da <div style="indsæt styling"> før og </div> efter ovenstående div, og indsæt den ønskede styling.

PriceTag på Kurven

Tilsvarend til ovenfor skal du find frem til filen cart-template.liquid og indsæt følgende div i nærheden af kurvens total.

<div class="viabill-pricetag"
data-view="basket"
data-price="{{ cart.total_price | money }}"
data-language="da"
data-currency="dkk">
</div>

Hvis PriceTag ikke viser den korrekt pris, skal du muligvis ændre {{ cart.total_price | money }} i data-price til noget andet, som er unikt for din webshop.

Det er muligt at tilføje styling til ovenstående efter behov. Indsæt da <div style="indsæt styling"> før og </div> efter ovenstående div, og indsæt den ønskede styling.

Et eksempel på custom styling kunne være:

<div style="margin-top:10px; text-align:right;">
<div class="viabill-pricetag"
data-view="basket"
data-price="{{ cart.total_price | money }}"
data-language="da"
data-currency="dkk">
</div>
</div>

PriceTag med Variable Pris

Hvis dine produkter har variable pris, kan du se vores PriceTag dokumentation (på engelsk) for yderligere information. Du vil i så fald skulle lave en if for produkter med variabel pris, hvor du skal bruge data-view="product", data-dynamic-price i stedet for data-price og indsætte data-dynamic-price-triggers under data-dynamic-price. Se et eksempel herpå nedenfor. Hvis du ikke selv kan få det til at virke, skal du være velkommen til at skrive til teknik@viabill.com for assistance.

{% if option.selected_value == value %}
<div class="viabill-pricetag"
data-view="product"
data-dynamic-price=".product-single__price"
data-dynamic-price-triggers=
"select.product-form__input"
data-language="da"
data-currency="dkk">
</div>
{% else %}
<div class="viabill-pricetag"
data-view="product"
data-price="{{ product.price | money }}"
data-language="da"
data-currency="dkk">
</div>
{% endif %}

OBS! Husk at trykke gem, hver gang du laver en ændring i dine tema filer, ellers vil du ikke kunne se ændringerne på din webshop.

Information om vores gamle app ViaBill PriceTag

Vores gamle app opdateres ikke længere. Har du vores gamle app installeret, skal du derfor slette denne og installere vores nye app, som beskrevet ovenfor.

Hvordan klarede vi os?

WooCommerce - Betaling og PriceTag

Kontakt