Shopify Question posted in
The Shopify help center can be found here.

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

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

2

Answers


  1. Chosen as BEST ANSWER
    0

    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>


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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search