Shopify - Get list of product from a specific collection

In shopify, I am creating 4 dropdowns.

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

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

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.

Please note, i am new to web development and shopify.


  1. I have created another template called "collection.alternate".
  2. Tagged the collection to the new template.
  3. In theme.liquid I have used the following code, to avoid header and footer from getting displayed in iframe

    {% if template != 'collection.alternate' %} {% include 'header-bar' %} ..... {% endif %}

  4. Used iframe to load the collection.alternate.

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.


You don't need AJAX for this functionality.

Each values in the four dropdowns should be added as tags in the products. Then you can use simple JavaScript command to change the url as required and display required products.

For ex., let's say you have New York as a City, and CK as a Shop. Now to display the products that are in CK store in New York, all the said products must contain New York and CK as tags. The final URL to display the said products will be -

js interview questions