如何在Shopify页面上使用Colorbox？

Question

我对这一切都很陌生，但我正在帮助非营利组织定制他们的Shopify网站。目前，我们正在尝试将标题中导航栏中的页面打开到灯箱而不是打开新页面。 我已将这些颜色框文件添加到我的Assets文件夹中：

jquery.colorbox-min.js
jquery.colorbox.js
colorbox.css

并将其添加到我的主题标题中：

 {{ 'colorbox.css' | asset_url | stylesheet_tag }}
 {{ 'jquery.colorbox.js' | asset_url | script_tag }}
 {{ 'jquery.colorbox-min.js' | asset_url | script_tag }}

我认为创建灯箱的实际代码将在header.liquid中，因为这是打开页面链接的地方，但我在网上找到的关于colorbox的所有内容都没有用。这是我根据从colorbox的示例页面查看源代码添加的内容：

$(function ()
{
    $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});    
})


<a class="iframe" href="{{ link.url }}">
{{ link.title }}

我也只是用一个简单的维基百科链接尝试了它，灯箱根本不工作。