Shoporama Installation Guide

updated 1 yr ago

Insert the Hello Retail script

The Hello Retail script below will enable us to connect with your webshop and track the events that we need to provide the best possible solution.

The code should be placed in the bottom of the body tag in the global.html file. you can either edit this directly via your sftp access or, if your theme supports shoporamas theme editor, use that to create a new version of the global.html that will overwrite the original as long as it exists.

You can find this under the settings page and then clicking the three dots in the right to get the themes button. click it and create a new theme just with global.html.

The good thing about this approach is that you can always just delete it if something went wrong and you can't figure out what.

Below are two examples, the first being the base example for themes that do not use cookie consent. The second is an example for themes that uses cookie consent.

Be aware that cookie consent handling is unique for each theme and can be implemented in many ways, so the example is just an example, and you should have your developer make sure it is done correctly.

In Both examples we do not track any data if tracking isn't enabled for you webshop. You can check this under the menu Design -> Tracking ->Enable tracking in your shop.

Example without cookie consent:

<script async src="https://helloretailcdn.com/helloretail.js"></script>
<script>
    window.hrq = window.hrq || [];
    hrq.push(['init', {}]);
    <{if $webshop->getEnableTracking()}>
        <{if $basket}>
            hrq.push(["setCart", {
                total: "<{$total_price|number_format:2:".":""}>",
                url: "<{$webshop->getUrl()}>/basket",
                urls: [<{section name="i" loop=$basket}>"<{$basket[i].product->getRemoteUrl()|escape}>"<{if !$smarty.section.i.last}>,<{/if}><{/section}>],
                productNumbers: [<{section name="i" loop=$basket}>"<{$basket[i].product->getProductId()}>"<{if !$smarty.section.i.last}>,<{/if}><{/section}>]
            }]);
        <{/if}>
        <{if $order}>
            <{assign var="products" value=$order->getProducts()}>
            hrq.push(["trackConversion", {
                total: "<{$order->getPrice()}>",
                orderNumber: "<{$order->getWebshopOrderId()}>",
                email: "<{$order->getEmail()}>",
                urls: [<{section name="i" loop=$products}>"<{$products[i]->getRemoteUrl()|escape}>"<{if !$smarty.section.i.last}>,<{/if}><{/section}>],
                 productNumbers: [<{section name="i" loop=$products}>"<{$products[i]->getProductId()}>"<{if !$smarty.section.i.last}>,<{/if}><{/section}>]
            }]);
        <{/if}>
    <{else}>
        hrq.push(["setTrackingOptOut", true]);
    <{/else}>
    <{/if}>
</script>
<{if $product}><span class="addwish-product" style="display:none" data-price="<{$product->getPrice()|number_format:2:",":"."}>" data-productnumber="<{product->getProductId()}>" data-url="<{product->getRemoteUrl()|escape}>" data-currency="<{$webshop->getCurrency()}>" data-instock="<{$product->getIsInStock()}>"></span><{/if}>

Example with cookie consent implemented:

<script async src="https://helloretailcdn.com/helloretail.js"></script>
<script>
    window.hrq = window.hrq || [];
    hrq.push(['init', {}]);

    if (!document.cookie.includes("hr_initial_load")){
        document.cookie = "hr_initial_load";
        hrq.push(["setTrackingOptOut", true]);
    }
    <{if $webshop->getEnableTracking() && $cookie.accept_cookies == 'accept'}>
        hrq.push(["setTrackingOptOut", false]);
        <{if $basket}>
            hrq.push(function(sdk) {
               try {
                    sdk.setCart({
                        total: <{$total_price|number_format:2:".":""}>,
                        url: "<{$webshop->getUrl()}>/basket",
                        urls: [<{section name="c" loop=$basket}><{assign var="product" value=$basket[c].product}>"<{$product->getRemoteUrl()|escape}>"<{if !$smarty.section.c.last}>,<{/if}><{/section}>],
                        productNumbers: [<{section name="c" loop=$basket}><{assign var="product" value=$basket[c].product}>"<{$product->getProductId()}>"<{if !$smarty.section.c.last}>,<{/if}><{/section}>]
                    });
                } catch(e) {
                    console.log("Could not set cart", e);
                }
            }]);
        <{/if}>
        <{if $order}>
            hrq.push(function(sdk) {
                try {
                    <{assign var="products" value=$order->getProducts()}>
                    sdk.trackConversion({
                        total: "<{$order->getPrice()}>",
                        orderNumber: "<{$order->getWebshopOrderId()}>",
                        email: "<{$order->getEmail()}>",
                        urls: [<{section name="i" loop=$products}>"<{$products[i]->getRemoteUrl()|escape}>"<{if !$smarty.section.i.last}>,<{/if}><{/section}>],
                        productNumbers: [<{section name="i" loop=$products}>"<{$products[i]->getProductId()}>"<{if !$smarty.section.i.last}>,<{/if}><{/section}>]
                    });
                } catch(e) {
                    console.log("Could not track sale", e);
                }
            }]);
        <{/if}>
    <{/if}>
</script>
<{if $product}><span class="addwish-product" style="display:none" data-price="<{$product->getPrice()|number_format:2:",":"."}>" data-productnumber="<{product->getProductId()}>" data-url="<{product->getRemoteUrl()|escape}>" data-currency="<{$webshop->getCurrency()}>" data-instock="<{$product->getIsInStock()}>"></span><{/if}>

Share your Product feed with Hello Retail

For Hello Retail to know all the products in your webshop, please share your product feed with Hello Retail.

Your default Shoporama product feed should be available via the URL: http://YOUR_WEBSHOP_DOMAIN/product-feed.xml

Note You should replace YOUR_WEBSHOP_DOMAIN with your actual webshop domain name.

Add a blank search page

The following section is only relevant for setups for a full search.

Please follow these simple steps, to create a new search page:

Step 1: Start by logging into Shoporama admin – then navigate to Statiske sider > Opret ny side:

Step 2: Choose a suitable name for the new blank search page, e.g. "Search results":

Remember to Save.

Note If you are using the default theme, this new page will automatically show up in the navigation – if this is the case, please remove the page from the navigation.

Step 3: Once this new page has been saved, you'll see the page in the Pages list:

Step 4: Finally, send the URL of the created search page to support@helloretail.com to have the setup completed.

How to set up API for Shoporama

Log into your Shoporama Backend --> Shoporama admin.

Step 1: First, navigate to the API Settings inside your Shoporama Backend.

Click the little wheel in the top-right corner like shown in the image.

Step 2: Within the Setting Panel, click the three dots to the right and select API from the drop-down menu.

Step 3: Now you want to add an API for Hello Retail to use. This is done by clicking the "Tilføj adgang" button.

Step 4: Insert a name you can remember that indicates that this API is used by Hello Retail. We simply named it Hello Retail. Then click "Save".

Step 5: The last step is to copy the API Key and insert it into your Hello Retail backend.

Configure Webshop

After the installation setup of your platform and the onboarding flow, make sure to have your webshop configured. Read this guide here on how to do so:

Configure Webshop