Question

我正在尝试在Shopify上为flexslider添加标题。这是我在theme.liquid上的代码

          {% for i in (1..10) %}
          {% capture display_slideshow %}display_slideshow_{{ i }}{% endcapture %}
          {% capture slide %}slideshow_{{ i }}.jpg{% endcapture %}
          {% capture link %}image_{{ i }}_link{% endcapture %}
          {% capture alt %}image_{{ i }}_alt{% endcapture %}
          {% capture caption %}image_{{ i }}_caption{% endcapture %} {% comment %} <-- I am adding this one {% endcomment %}

          {% if settings[display_slideshow] %}
             <li class="slide">
                    <img src="{{ slide | asset_url }}" data-url="{{ settings[link] }}" class="slide-img" alt="{{ settings[alt] }}" />  
             <p class="flex-caption">{{ settings[caption] }}</p>  {% comment %} <-- I am adding this one {% endcomment %}
          </li>
          {% endif %} 
      {% endfor %}

我的shop.css.liquid

我正在添加

{% if settings.caption %}

.flex-caption
{
    position:absolute;
    right:0;
    bottom:20px;
    z-index:1;
    background:rgba(0, 0, 0,0.6); 
    padding:20px 0 10px 10px;
    height:33px;
    width:500px;
    color:#FFF;
}

{% endif %}

即使未应用标题，它仍然显示背景。

Answer 1

我会尝试为每张幻灯片添加一个标题文本框，然后检查settings.caption！=“”（非空字符串）。

对于没有输入而不是搞乱css类的幻灯片，简单地不输出标题元素可能是一个更容易的选择。

在此处阅读更多http://docs.shopify.com/themes/theme-templates/settings#settings-object-in-liquid

希望这有帮助。

如果Shopify中的CSS语句不起作用

1 个答案: