如何爲Shopify Boundless主題中的div元素添加自定義ID屬性？

我需要針對Shopify中的特定div。我正在使用無邊界主題。我想添加一個自定義的id屬性到這個特定的div。我怎樣才能做到這一點？如何爲Shopify Boundless主題中的div元素添加自定義ID屬性？

我需要目標的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>

來源

2017-09-04 Pretendo

在Shopify您可以通過修改編輯HTML主題代碼。

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

如果您能夠找到模板文件中的代碼，那麼您可以直接將代碼添加到代碼中。

或者使用JQUery選擇器並使用data-section-id =「featured-collection」作爲基準向下導航。

來源

2017-09-05 09:55:19

所以你指出我在正確的方向！代碼位於代碼段中的product-grid-item.liquid文件中！謝謝 – Pretendo

在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>

來源

2017-09-11 20:03:45 Pretendo

如何爲Shopify Boundless主題中的div元素添加自定義ID屬性？

回答

相關問題