How do you add custom id attributes to div elements in Shopify Boundless theme?

Question

I need to target a specific div in Shopify. I'm using Boundless Theme. I want to add a custom id attribute to this specific div. How can I do this?

The div I need to target is the 3rd div with class "product-item grid__item medium-up--one-third":

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

score 0 · Answer 1 · answered Sep 05 '17 at 09:55

0

In Shopify you are able to edit the HTML by modifying the themes code.

The sample above looks like its either from the index.liquid template file or product-card.liquid under the snippets.

If you are able to locate the code within the template files then you can add an ID directly to the code.

Alternatively use JQUery Selectors and navigate down using the data-section-id="featured-collection" as a base.

answered Sep 05 '17 at 09:55

Toby Mills

996
2
9
13

So you pointed me in the right direction! The code is in the product-grid-item.liquid file in the snippets section! Thank you – Pretendo Sep 11 '17 at 19:53

Pretendo · Answer 2 · 2017-09-11T22:27:42.443

Found a solution with help from Toby Mills!

In Boundless Theme, the "product_item grid_item" class is generated from the product-grid-item.liquid file.

Inside the top div, I added

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

Here is the final look

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

Now each div has a unique id that I can target with 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>

How do you add custom id attributes to div elements in Shopify Boundless theme?

2 Answers2