Shoppable VideosGuidesCustom configs and functions

Custom configs and functions

We allow deep customization through 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

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

isDisplayCarouselCaption

If you would like to display the caption inside carousel videos

Possible value of this custom config:

  • true
  • false
<script>
  window.$svDoranInit = window.$svDoranInit || {};
  window.$svDoranInit.customConfig = window.$svDoranInit.customConfig || {};
  window.$svDoranInit.customConfig.isDisplayCarouselCaption = true;
</script>

isDisplayCaption

If you would like to display the caption inside the popup

Possible value of this custom config:

  • true
  • false
<script>
  window.$svDoranInit = window.$svDoranInit || {};
  window.$svDoranInit.customConfig = window.$svDoranInit.customConfig || {};
  window.$svDoranInit.customConfig.isDisplayCaption = true;
</script>

carouselMoreTranslationText

If you would like to customize the translation of the more button

<script>
  window.$svDoranInit = window.$svDoranInit || {};
  window.$svDoranInit.customConfig = window.$svDoranInit.customConfig || {};
  window.$svDoranInit.customConfig.isCarouselCaption = true;
  window.$svDoranInit.customConfig.carouselMoreTranslationText = 'more';
</script>

carouselLessTranslationText

If you would like to customize the translation of the less button

<script>
  window.$svDoranInit = window.$svDoranInit || {};
  window.$svDoranInit.customConfig = window.$svDoranInit.customConfig || {};
  window.$svDoranInit.customConfig.isCarouselCaption = true;
  window.$svDoranInit.customConfig.carouselLessTranslationText = 'less';
</script>

enablePip

If you would like to enable Picture-in-Picture feature or minimize the video player while browsing the website.

Possible value of this custom config:

  • true
  • false
<script>
  window.$svDoranInit = window.$svDoranInit || {};
  window.$svDoranInit.customConfig = window.$svDoranInit.customConfig || {};
  window.$svDoranInit.customConfig.enablePip = true;
</script>

carouselPaginationBullets

If you would like to enable bullets pagination under the carousel widget.

Possible value of this custom config:

  • true
  • false
<script>
  window.$svDoranInit = window.$svDoranInit || {};
  window.$svDoranInit.customConfig = window.$svDoranInit.customConfig || {};
  window.$svDoranInit.customConfig.carouselPaginationBullets = 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" -%}

How to translate the section header?

Supporting multiple languages on your Shopify store is a great way to reach more customers and create a localized shopping experience. With the Shopify Translate & Adapt app, you can easily translate your content and ensure the right language is displayed to each visitor.

How to enable the app in a new Shopify theme?

When you switch to a new Shopify theme, Shopify doesn't carry over the app embeds and app blocks automatically. Follow this guide to re-add every Shoppable Videos theme app extension to your new theme.