Adding TikShop Feeds to Shogun requires a Page Builder plan from Shogun.
To start, go to the Advanced section of your Shogun dashboard.
This is the view from Shogun. Name the element something like "TikShop" and make sure you are on the Liquid tab.
Then, copy and paste the code below into Shogun (note it may look like it's one line when you copy and paste it, that's ok.).
<div class="page-width">
{% assign max = 113489365 %}
{% assign min = 33 %}
{% assign diff = max | minus: min %}
{% assign randomNumber = "now" | date: "%N" | modulo: diff | plus: max %}
<link href="{{ shop.metafields.tikshop.BASE_URL }}/assets/tikshop-iso-bootstrap.css?v={{randomNumber}}" rel="stylesheet" type="text/css" media="all" defer="defer">
<link href="{{ shop.metafields.tikshop.BASE_URL }}/assets/tikshop-slick.css?v={{randomNumber}}" rel="stylesheet" type="text/css" media="all" defer="defer">
<link href="{{ shop.metafields.tikshop.BASE_URL }}/assets/tikshop-shoptrade.css?v={{randomNumber}}" rel="stylesheet" type="text/css" media="all" defer="defer">
<style type="text/css">
.tikshop-shoptrade-wrapper-{{section.id}} .tikshop-primary-background,
.tikshop-animation .pulse-bubble {
background: {{section.settings.primary_color | default: "#ff006c"}}
}
.tikshop-shoptrade-wrapper-{{section.id}} .tikshop-primary-fill {
fill: {{section.settings.primary_color | default: "#ff006c"}}
}
.tikshop-shoptrade-wrapper-{{section.id}} .tikshop-primary-color,
.tikshop-offcanvas .tikshop-colleciton-list .tikshop-product_full_details:after {
color: {{section.settings.primary_color | default: "#ff006c"}}
}
.tikshop-shoptrade-wrapper-{{section.id}} .tikshop-primary-text-color {
color: {{section.settings.primary_text_color | default: "#fff"}}
}
.tikshop-shoptrade-wrapper-{{section.id}} a {
color: {{section.settings.primary_link_color | default: "inherit"}}
}
</style>
<div id="tikshop-shoptrade-wrapper-{{section.id}}"
class="tikshop-shoptrade-wrapper tikshop-iso-bootstrap tikshop-shoptrade-wrapper-{{section.id}}"
data-block-id="{{section.id}}"
>
<h4 id="tikshop-shoptrade-header" class="tikshop-shoptrade-header"></h4>
<div id="tikshop-shoptrade-body">
<div class="tikshop-gallery" data-block-id="{{section.id}}" ></div>
</div>
<div id="tikshop-loading-{{section.id}}" style="display: none;">
<div class="d-flex justify-content-center">
<div class="spinner-border tikshop-shoptrade-loader" role="status"></div>
</div>
</div>
</div>
<script type="text/javascript">
if (typeof tikshop === 'undefined') {
tikshop = {
Slick: {},
instances: {},
shop: Shopify.shop,
templateName: "{{ template.name }}",
templateSuffix: "{{ template.suffix }}" || "default",
assets: {
jQuery: "//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js",
bootStrap: "{{ shop.metafields.tikshop.BASE_URL }}/assets/tikshop-iso-bootstrap.js",
slick: "{{ shop.metafields.tikshop.BASE_URL }}/assets/tikshop-slick.js"
},
isAssetsLoaded: false,
product: {% if product %}"{{product.id}}"{% else %}null{% endif %},
loader: `<div class="tikshop-animation">
<div class="spinner-box">
<div class="pulse-container">
<div class="pulse-bubble pulse-bubble-1"></div>
<div class="pulse-bubble pulse-bubble-2"></div>
<div class="pulse-bubble pulse-bubble-3"></div>
</div>
</div>
</div>`,
icons: {
shoppingBag: `<svg id="shopping_bag_black_24dp" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<rect id="Rectangle_223" data-name="Rectangle 223" width="24" height="24" fill="none"/>
<path id="Path_260" data-name="Path 260" d="M18,6H16A4,4,0,0,0,8,6H6A2.006,2.006,0,0,0,4,8V20a2.006,2.006,0,0,0,2,2H18a2.006,2.006,0,0,0,2-2V8A2.006,2.006,0,0,0,18,6ZM12,4a2.006,2.006,0,0,1,2,2H10A2.006,2.006,0,0,1,12,4Zm6,16H6V8H8v2a1,1,0,0,0,2,0V8h4v2a1,1,0,0,0,2,0V8h2Z" fill="#fff"/>
</svg>`
},
Widget: function (config) {
this.config = config
this.videos = []
this.cartRedirection = config.cartRedirection
this.blockId = config.blockId
this.container = document.querySelector(config.targets.container)
this.header = document.querySelector(config.targets.header)
this.body = document.querySelector(config.targets.body)
this.gallery = document.querySelector(config.targets.gallery)
this.modal = document.querySelector(config.targets.modal)
this.modalBody = document.querySelector(config.targets.modalBody)
this.isLoading = true
this.baseURL = "{{ shop.metafields.tikshop.BASE_URL }}"
this.baseApi = "{{ shop.metafields.tikshop.BASE_URL }}/api"
this.modalHTML = config.modalHTML
},
init: function () {
Object.keys(this.instances).forEach(blockId => {
tikshop.instances[blockId].init()
})
}
}
}
tikshop.instances["{{section.id}}"] = new tikshop.Widget({
blockId: "{{section.id}}",
targets: {
gallery: "#tikshop-shoptrade-wrapper-{{section.id}} #tikshop-shoptrade-body .tikshop-gallery",
container: "#tikshop-shoptrade-wrapper-{{section.id}}",
header: "#tikshop-shoptrade-wrapper-{{section.id}} #tikshop-shoptrade-header",
body: "#tikshop-shoptrade-wrapper-{{section.id}} #tikshop-shoptrade-body",
galleryItem: "#tikshop-shoptrade-wrapper-{{section.id}} .tikshop-galleryItem",
videoWrapper: "#tikshop-slick_video_slider-{{section.id}} .tikshop-video-wrapper",
modalBody: '#tikshop-shoptrade-modal-{{section.id}} .tikshop-modal-body',
modal: "#tikshop-shoptrade-modal-{{section.id}}"
},
cartRedirection: {{section.settings.cart_redirection | json }},
modalHTML: `<div class="tikshop-shoptrade-wrapper tikshop-iso-bootstrap tikshop-shoptrade-wrapper-{{section.id}}" data-block-id="{{section.id}}">
<div class="tikshop-modal tikshop-fade" id="tikshop-shoptrade-modal-{{section.id}}" data-block-id="{{section.id}}">
<div class="tikshop-modal-dialog tikshop-modal-xl tikshop-modal-dialog-centered">
<div class="tikshop-modal-content tikshop-modal-body"></div>
</div>
</div>
</div>`
})
</script>
<script src="{{ shop.metafields.tikshop.BASE_URL }}/assets/tikshop-shoptrade.js?v={{randomNumber}}" type="text/javascript" defer="defer"></script>
</div>
Save the element and you will now be able to add it to Shogun pages.
Note that you will still have to assign a feed from the TikShop Admin to the page template that your Shogun page is using so that we know what content to show.
If you have any questions or issues, don't hesitate to reach out to our support!