How to access Bigcommerce Stencil theme objects - bigcommerce

Question

I am new to Bigcommerce and also to Handlebars. I am currently building a website according to a design and I am using the Merchant Stencil theme.
Here is a picture of the homepage structure I need
For the moment, I hardcoded the 3 sections in the home.html template file, but I want to bring the product information (url, name, description) dynamically for each product based on it's ID .
The store only sells 3 types of products At the moment, I have a featured products section with the all the 3 products set as featured. This is working fine. The second part is that I want to access a Product Object or Product Card object (documentation links added) and I don't know how to do it. They don't have code examples and I really can't find my way around it. Any help on how can I use these objects would be much appreciated.
I have even asked the Bigcommerce support, and they sent me here. The support people there have no clue about development on their platform, so they sent me here.
Cheers!
Here is the code in my home.html file.
{{#if products.featured}}
<section class="products-featured section">
<h4 class="section-title">{{lang 'home.featured_products'}}</h4>
<div class="wrapper">
{{#each products.featured}}
{{> components/products/product-grid-item
quick_shop=../theme_settings.quick_shop
}}
{{/each}}
</div>
</section>
{{/if}}
<section id="gg-one" class="glue-section">
<div class="container">
<div class="text-col">
<h2 class="section-title">Grizzly One</h2>
<p class="caption-content">North America's first liquid polyurethane glue - a high-tech adhesive widely used by European woodworks and craftsmen for decades.</p>
<ul class="glue-feats">
<li>Ideal for proffessional, commercial, and industrial woodworking needs.</li>
<li>Even bonds to oily and exotic woods!</li>
</ul>
<div class="buttons">
</div>
</div>
<div class="img-col">
</div>
</div>
</section>
<section id="gg-structan" class="glue-section">
<div class="container">
<div class="img-col">
</div>
<div class="text-col">
<h2 class="section-title">Grizzly Structan</h2>
<p class="caption-content">This heavy-bodied, cartridge-loaded
polyurethane adhesive is stronger than liquid polyurethane
glues.</p>
<ul class="glue-feats">
<li>Perfect for wood, stone, tile, metal, and glass - dries to a tough elastic texture.</li>
<li>Industrial strength - ideal for professional and commercial applications.</li>
</ul>
<div class="buttons">
</div>
</div>
</div>
</section>
<section id="gg-xpress" class="glue-section">
<div class="container">
<div class="text-col">
<h2 class="section-title">Grizzly Xpress</h2>
<p class="caption-content">All the srength and body of a semi-gel adhesive<br> with a quick setting and curing time.</p>
<ul class="glue-feats">
<li>The first and only semi-gel adhesive available in North America!</li>
<li>Quick, professional-strength bond for wood, stone, tile, metal and glass.</li>
</ul>
<div class="buttons">
</div>
</div>
<div class="img-col">
<div class="inner">
<img src="https://cdn3.bigcommerce.com/s-jgnuwblrjb/product_images/uploaded_images/grizzly-xpress-home.png">
</div>
</div>
</div>
</section>

Answer 1

Create a component for the dynamic sections below the featured section. Then do
{{#each products.featured}}
{{> components/products/your-new-component }}
{{/each}}
Inside your component, you will get product object and you can get the data by simply {{product.id}} or {{product.title}}