How to get product attributes from our API and apply to the product list after filtering

As stated in our FAQ, by using this guide here you will be able to install the theme manually step by step. However, you will have the need to customize the product list, so that it looks 100% like your default product list loaded from the liquid files. In order to do this, you need to get the suitable product attributes such as options, options_with_values, variants, etc. This guide will instruct you to do it.

Step 1: Get our API result

- Open the "Developer Tools" of Chrome

- Click to the "Network" tab

- In the "Filter" box, search "filter?"

- Click on the row "filter?t=....", then select the "Preview" tab, you will see all our result.

Step 2: Get the product attributes

- Open a product in the "products" field, you will see all the attributes of a product. 

- Basically, our app returns the same 90% results as the Shopify data. 

Step 3: Apply to the product list after filtering

- Go to the file bc-sf-filter.js in your current theme.

- Point to the "buildProductGridItem" function

With: + data: contains all the attributes of a product.

         + index: the index of a product in all product list per page. The index begins at 1.

- Do your custom code with "data".