如何为Shopify Boundless主题中的div元素添加自定义ID属性？

Question

我需要针对Shopify中的特定div。我正在使用无边界主题。我想添加一个自定义的id属性到这个特定的div。我怎样才能做到这一点？

我需要目标的div是3分度类“产品项目grid__item中达 - 三分之一”：

<div class="featured-collection" data-section-id="featured-collection" data-section-type="featured-collection-section"> 

    <h2 class="visually-hidden">frontpage</h2> 

    <div class="grid grid--no-gutters grid--uniform collection-grid"> 

     <div class="product-item grid__item medium-up--one-third"> 

      <a class="product-item__link " href="/products/kaylava-candor-decaf-coffee-bean"> 

       <img class="product-item__image" src="//cdn.shopify.com/s/files/1/1460/5816/products/candor-coffee-sm_grande.jpg?v=1485668871" alt="CANDOR DECAF COFFEE"> 

       <span class="product-item__meta"> 
       <span class="product-item__meta__inner"> 
       <p class="product-item__title">CANDOR DECAF COFFEE</p> 
       <p class="product-item__price-wrapper"><span class="txt--emphasis">from</span> $15.99</p> 
       </span> 
       </span> 

       </a> 
     </div> 

    </div> 

</div> 

Answer 1

在Shopify您可以通过修改编辑HTML主题代码。

上面的示例看起来像是从index.liquid模板文件或片段下的product-card.liquid。

如果您能够找到模板文件中的代码，那么您可以直接将代码添加到代码中。

或者使用JQUery选择器并使用data-section-id =“featured-collection”作为基准向下导航。

Answer 2

在Toby Mills的帮助下找到解决方案！

在无边框主题中，“product_item grid_item”类是从product-grid-item.liquid文件生成的。

内顶格，我加

id="home-{{ product.id }}" 

这是最后一下

<div id="home-{{ product.id }}" class="product-item grid__item {{ grid_item_width }}" > 

现在每个div有一个唯一的ID，我可以用CSS的目标！

<div id="home-8748279361" class="product-item grid__item medium-up--one-third" > 
<a class="product-item__link " href="/products/kaylava-candor-decaf-coffee-bean"> 
<img class="product-item__image" src="//cdn.shopify.com/s/files/1/1460/5816/products/candor-coffee-sm_grande.jpg?v=1485668871" alt="CANDOR DECAF COFFEE"> 

<span class="product-item__meta"> 
    <span class="product-item__meta__inner"> 

    <p class="product-item__title">CANDOR DECAF COFFEE</p> 
    <p class="product-item__price-wrapper"> 

      <span class="txt--emphasis">from</span> $15.99 

    </p>   
    </span> 
</span>