title: Shopify - Get list of product from a specific collection
body: <p>In shopify, I am creating 4 dropdowns.</p>
  
  <p>Dropdown 1 - City
  Dropdown 2 - Category of shops (such as Apparel, stationary etc)
  Dropdown 3 - Shops available in the particular city and particular shop
  Dropdown 4 - Items available in the particular shop</p>
  
  <p>My requirement is, when a particular shop is selected (Dropdown 3) below the dropdown all the products in that shop should be listed (I will make the product part of collection and collection name will be same as shop name).</p>
  
  <p>I realize that I need to use Ajax. I checked the APIs offered by shopify but somehow I am not able to connect dots. I am not able to use it. Can you please provide a pointer where it is explained how to achieve it.</p>
  
  <p>Please note, i am new to web development and shopify.</p>
  
  <p><strong>EDITED*</strong></p>
  
  <ol>
  <li>I have created another template called "collection.alternate".</li>
  <li>Tagged the collection to the new template.</li>
  <li><p>In theme.liquid I have used the following code, to avoid header and footer from getting displayed in iframe</p>
  
  <p>{% if template != 'collection.alternate' %}
    {% include 'header-bar' %}
    .....
  {% endif %}</p></li>
  <li><p>Used iframe to load the collection.alternate. </p></li>
  </ol>
  
  <p>However in iframe the Header is still getting displayed. When I analyze the "Elements" in Chrome developer tools for the iframe, I see the header logic is generated for collection.template. How do I stop header from appearing in iframe.  </p>