Custom configs
This tutorial requires technical knowledge and Shopify Liquid. If you're not very technical, contact us and we'll help you implement it.
Open your theme editor
To get started, open Shopify Admin > Theme editor
Create a Liquid snippet
Now, you need to create a new snippet: snippets/doran-sv-custom.liquid
<script>
window.$svDoranInit = window.$svDoranInit || {};
window.$svDoranInit.customConfig = window.$svDoranInit.customConfig || {};
// TODO: Add your custom config here
</script>All custom configs
viewExternalProductTarget
By default, when when activate the option View the product in an external window, our app will the product in a new browser window.
If you want to customize it, you can use this custom config. Possible value of this custom config:
- _self
- _blank
- _parent
- _top
<script>
window.$svDoranInit = window.$svDoranInit || {};
window.$svDoranInit.customConfig = window.$svDoranInit.customConfig || {};
window.$svDoranInit.customConfig.viewExternalProductTarget = "_self";
</script>carouselCenterInsufficientSlides
By default, if you have too few videos in your carousel widget, we will align them to the left instead of center. You can use this custom config to center them.
Possible value of this custom config:
- true
- false
<script>
window.$svDoranInit = window.$svDoranInit || {};
window.$svDoranInit.customConfig = window.$svDoranInit.customConfig || {};
window.$svDoranInit.customConfig.carouselCenterInsufficientSlides = true;
</script>applySmartDisplay
Possible value of this custom config:
- true
- false
<script>
window.$svDoranInit = window.$svDoranInit || {};
window.$svDoranInit.customConfig = window.$svDoranInit.customConfig || {};
window.$svDoranInit.customConfig.applySmartDisplay = false;
</script>storiesCenterInsufficientSlides
Possible value of this custom config:
- true
- false
<script>
window.$svDoranInit = window.$svDoranInit || {};
window.$svDoranInit.customConfig = window.$svDoranInit.customConfig || {};
window.$svDoranInit.customConfig.storiesCenterInsufficientSlides = true;
</script>storiesSlidesPerView
Possible value of this custom config:
- "auto"
- any numbers. eg. 6
<script>
window.$svDoranInit = window.$svDoranInit || {};
window.$svDoranInit.customConfig = window.$svDoranInit.customConfig || {};
window.$svDoranInit.customConfig.storiesSlidesPerView = 3;
</script>storiesVirtual
Possible value of this custom config:
- true
- false
<script>
window.$svDoranInit = window.$svDoranInit || {};
window.$svDoranInit.customConfig = window.$svDoranInit.customConfig || {};
window.$svDoranInit.customConfig.storiesVirtual = true;
</script>Render the Liquid
Finally, open your layout/theme.liquid, and add a line of code after <head>
{%- render "doran-sv-custom" -%}How to integrate with a legacy theme?
Currently, most themes already support Online Store 2.0, however if you are using a legacy theme, follow the steps below to integrate with your theme.
Lifetime Deals
If you see this article, congratulations, you are one of the first 100 lucky people to use our app.