Jquery 猫头鹰旋转木马在一个垂直的列中加载所有项目。我错过了什么？

我正在为Shopify设置一个最近查看过的产品脚本，从Github获得代码： 我试图使风格与我当前的主题相匹配，并将最近查看的项目放在一个类似于“相关产品”的猫头鹰旋转木马中。问题是，它在垂直线上显示所有项目，请查看商店，我必须编辑链接以在未发布的主题副本中复制错误，请在产品页面底部查看一些产品以构建最近查看的产品旋转木马：

我试图更改owl转盘位置，将其放置在脚本上方，{%raw%}标记内，仔细检查节架构设置，试图在原始标记内包含{%include'product card grid%}，但它不起作用，请提供任何修复帮助

最近浏览的。液体：

{{ 'jquery.products.min.js' | asset_url | script_tag }}
{% assign column1 = section.settings.column1-rv | plus:0 %}
{% assign column2 = section.settings.column2-rv | plus:0 %}
{% assign column3 = section.settings.column3-rv | plus:0 %}
{% assign column4 = section.settings.column4-rv | plus:0 %}
{% assign column5 = section.settings.column5-rv | plus:0 %}
{% assign relateCol = 4 %}
{% assign relateLimit = section.settings.product_recent_limit | plus: 0 %}
{% assign currentProduct = product %}
<section class="section-related">
  <div id="related" class="related-products">
   <h3 class="detail-title font-ct"><strong><span>Recently Viewed Products</span></strong></h3>
   <div class="products-listing grid ss-carousel ss-owl">
    <div class="product-layout owl-carousel"
      {% if settings.enable_rtl %}data-rtl ="true"{% endif %}
      data-nav="{{ section.settings.recent_navigation-rv }}"
      data-margin    ="{{ section.settings.margin-rl }}" 
      data-lazyLoad    ="true"
      data-column1=" {{ column1 }}" 
      data-column2=" {{ column2 }}" 
      data-column3=" {{ column3 }}" 
      data-column4=" {{ column4 }}" 
      data-column5=" {{ column5 }}">
     <div id="recently-viewed-products" style="display:none"> 
     </div>
    {% raw %}
    <script id="recently-viewed-product-template"  type="text/x-jquery-tmpl">
      <div class="item">
       <div id="product-${handle}">
              <div >
                {{if compare_at_price}}
                <span class="bt-sale">Sale</span>
                {{/if}}
                <a href="${url}">
                  <img src="${Shopify.Products.resizeImage(featured_image, "medium")}" />
                </a>
              </div>
              <div class="caption">
                <h4><a href="${url}" title="${title}">${title}</a></h4>
                <p class="price">
                  <span class="price-new">${Shopify.formatMoney(price)}</span>
                  <span class="price-old">{{if compare_at_price}}${Shopify.formatMoney(compare_at_price)}{{/if}}</span>
                </p>
              </div>
       </div>
    </script>
    {% endraw %}
   </div>
  </div>
</div>
<script>
  var limit_product = {{ section.settings.product_recent_limit }};
  Shopify.Products.showRecentlyViewed( { howManyToShow: product_recent_limit } );
</script>
</div>
</section>```

{{'jquery.products.min.js'|资产| url |脚本(标记)}
{%assign column1=section.settings.column1-rv | plus:0%}
{%assign column2=section.settings.column2-rv | plus:0%}
{%assign column3=section.settings.column3-rv | plus:0%}
{%assign column4=section.settings.column4-rv | plus:0%}
{%assign column5=section.settings.column5-rv | plus:0%}
{%assign relateCol=4%}
{%assign relateLimit=section.settings.product_recent_limit | plus:0%}
{%assign currentProduct=product%}
最近查看的产品
{%raw%}
{{如果在价格上比较}
特价
{{/if}

${Shopify.formatMoney（价格）}
{{if compare_at_price}${Shopify.formatMoney（compare_at_price）}{{/if}}

{%endraw%}
var limit_product={{section.settings.product_recent_limit}；
Shopify.Products.showRecentlyViewed（{howManyToShow:product\u recently\u limit}）；
```

为我在水平行中正确显示-您尝试过不同/最新版本的浏览器吗？您好，感谢您的检查，我必须暂时移除旋转木马，直到修复为止，请检查此处的模板副本：当我检查控制台时，我看到

product\u recent\u limit未定义

这一行：

shopfify.Products.showRecentlyViewed（{howManyToShow:product\u recent\u limit}）-我想转盘没有初始化，因为它在那里失败了。我删除了该变体并使用了数字“5”，只是为了看看这是否能解决问题，现在我在控制台中看不到任何东西，但仍然没有运气。谢谢，我已经开始了，添加了丢失的div标签，再次检查，但不幸的是没有工作，非常感谢您花时间调试这个问题，我非常感谢。