Custom configs and functions

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

...

doran-sv-custom.liquid

...

<script>
  window.$svDoranInit = window.$svDoranInit || {};
  window.$svDoranInit.customConfig = window.$svDoranInit.customConfig || {};
  window.$svDoranInit.customFunctions = window.$svDoranInit.customFunctions || {};
  // 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>

carouselAutoplay

This custom config helps you to turn on the autoplay feature.

<script>
  window.$svDoranInit = window.$svDoranInit || {};
  window.$svDoranInit.customConfig = window.$svDoranInit.customConfig || {};
  window.$svDoranInit.customConfig.carouselAutoplay = {
    delay: 3000,
    disableOnInteraction: true,
    pauseOnMouseEnter: true,
    reverseDirection: false,
    stopOnLastSlide: false,
  };
</script>

isCustomCheckout

If you would like to customize the default checkout logic. It should combine with the custom onCheckout function.

Possible value of this custom config:

true
false

<script>
  window.$svDoranInit = window.$svDoranInit || {};
  window.$svDoranInit.customConfig = window.$svDoranInit.customConfig || {};
  window.$svDoranInit.customConfig.isCustomCheckout = true;
</script>

All custom functions

onCheckout

If you would like to customize the default checkout logic.

<script>
  window.$svDoranInit = window.$svDoranInit || {};
  window.$svDoranInit.customFunctions = window.$svDoranInit.customFunctions || {};
  window.$svDoranInit.customFunctions.onCheckout = function () {
    var checkoutBtn = document.querySelector('.btn-checkout');
    if (checkoutBtn) checkoutBtn.click();
  };
</script>

Render the Liquid

Finally, open your layout/theme.liquid, and add a line of code after <head>

{%- render "doran-sv-custom" -%}

On this page