Where should I place my JS script for light-box functionality?

Store Design
1

Hi guys,

I need to add the below script to my site so that i can create a light-box functionality, but can someone please advise where to add it? Thanks!

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
2

Hello @Jcox1981 ,

You can add script in theme.liquid file

3

I’ve added it at the bottom, is this correct? :

<!doctype html>
<html class="no-js no-touch">
<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>
    {{ page_title }}

    {% if current_tags %}
      – {{ 'blogs.blog.seo_title' | t }} "{{ current_tags | join: ', ' }}"
    {% endif %}

    {% if current_page != 1 %}
      – {{ 'general.pagination.seo_title' | t }} {{ current_page }}
    {% endif %}

    {% unless page_title contains shop.name %}
      – {{ shop.name }}
    {% endunless %}
  </title>

  {% if page_description %}
    <meta name="description" content="{{ page_description | escape }}" />
  {% endif %}

  {% if settings.favicon %}
    <link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png" />
  {% endif %}

  {% if template contains 'collection' and current_tags %}
    <meta name="robots" content="noindex" />
    <link rel="canonical" href="{{ shop.url }}{{ collection.url }}" />
  {% else %}
    <link rel="canonical" href="{{ canonical_url }}" />
  {% endif %}

  <meta name="viewport" content="width=device-width" />

  {{ content_for_header }}

  {% assign twitter_handle = settings.social-twitter-url | split: 'twitter.com/' | last %}
  {%
    include 'social-meta-tags',
    twitter_handle: twitter_handle
  %}

  <!-- Theme CSS -->
  {{ 'theme.scss.css' | asset_url | stylesheet_tag }}

  <!-- Theme object -->
  {% include 'theme-options' %}

  {% include 'shogun-head' %}
</head>

{% assign sidebar = false %}
{% if settings.enable-sidebar == 'all' %}
  {% if template contains 'index' %}
    {% assign sidebar = true %}
  {% elsif template contains 'collection' %}
    {% assign sidebar = true %}
  {% endif %}
{% elsif settings.enable-sidebar == 'not-home' and template contains 'collection' %}
  {% assign sidebar = true %}
{% endif %}

{% if sidebar
  and settings.sidebar-link-list-1 == blank
  and settings.sidebar-link-list-2 == blank
  and settings.sidebar-link-list-3 == blank
%}
  {% assign sidebar = false %}
{% endif %}

<body class="
  {% if customer %}customer-logged-in{% endif %}
  sidebar-{% if sidebar %}enabled{% else %}disabled{% endif %}
  template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }}
">
  <script>
    window.Pacific = {};
    Pacific.settings = {{ settings | json }};
    document.documentElement.className=document.documentElement.className.replace(/\bno-js\b/,'js');
    if(('ontouchstart' in window)||window.DocumentTouch&&document instanceof DocumentTouch)document.documentElement.className=document.documentElement.className.replace(/\bno-touch\b/,'has-touch');
  </script>
  {% section 'pxs-announcement-bar' %}
  {% section 'announcement-bar' %}
  {% section 'header' %}

  <div class="main-content-wrapper">
    <div class="main-content">
      {% unless template contains 'index' %}
        <div class="page-header">
          {% include 'page-header' %}
        </div>
      {% endunless %}
      {{ content_for_layout }}
    </div>

    {% if sidebar %}
      {% include 'sidebar' %}
    {% endif %}
  </div>

  {% section 'promotions' %}
  {% section 'footer' %}

  <!-- Scripts -->
  <script
    src="{{ 'pacific.js' | asset_url }}"
    data-scripts
    data-shopify-api-url="{{ 'api.jquery.js' | shopify_asset_url }}"
    data-shopify-common-url="{{ 'shopify_common.js' | shopify_asset_url }}"
    data-jquery-currencies-url="{{ 'jquery.currencies.js' | asset_url }}"
    data-jquery-templates-url="//ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"
    data-jquery-cart-url="{{ 'jquery.cart.min.js' | asset_url }}"
    data-countries-url="/services/javascripts/countries.js"
    data-customer-area-url="{{ 'customer_area.js'  | shopify_asset_url }}"
  ></script>

  <script>
    (function () {
      function handleFirstTab(e) {
        if (e.keyCode === 9) { // the "I am a keyboard user" key
          document.body.classList.add('user-is-tabbing');
          window.removeEventListener('keydown', handleFirstTab);
        }
      }
      window.addEventListener('keydown', handleFirstTab);
    })();
  </script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
{% render 'th-bundle-product' %}</body>
</html>
4

@Jcox1981 ,

Correct..

You can add stylesheet in tag

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
5

External / Remote Assets are highly discouraged by Shopify. They suggested that you need to download and upload your assets to your shop/website. See documentation here https://shopify.dev/themes/tools/theme-check/checks/remote-asset#disabling-this-check hope it helps.