1. Home
  2. Knowledge Base
  3. Platform-specific Articles
  4. Shopify Articles
  5. How to Integrate Into Your Shopify Product List/Grid/Collections Pages
  1. Home
  2. Knowledge Base
  3. Product List Tool
  4. How to Integrate Into Your Shopify Product List/Grid/Collections Pages
  1. Home
  2. Knowledge Base
  3. Manually Integrate Fera
  4. How to Integrate Into Your Shopify Product List/Grid/Collections Pages

How to Integrate Into Your Shopify Product List/Grid/Collections Pages

In order to make Fera show in your product list/grid pages, you’ll need to integrate the container snippet into your store’s theme. Each theme is different, so you’ll have to use your inspection skills to find the right theme file to edit for your own store. You can also follow along with our YouTube video here.

You should be familiar with frontend engineering (HTML/CSS and Liquid) before attempting to follow this guide.

If you require help with integration please reach out to .

Step 1: Edit your Theme

You can watch this video to see how to edit your theme on Shopify.

Step 2: Locate your product list page block template.

Use the search to find which file contains the little block that renders each product in your product list. Some common files are:

    Snippets

  • snippets/product-item.liquid
  • snippets/product_item.liquid
  • snippets/product-item-big.liquid
  • snippets/product-thumbnail.liquid
  • snippets/product-loop-grid.liquid
  • snippets/product-grid-item.liquid
  • snippets/product-grid-item-new.liquid
  • snippets/product-card-grid-collection.liquid
  • snippets/product-card.liquid
  • snippets/product-card-grid.liquid
  • snippets/product-card-list.liquid
  • snippets/product-card-grid-collection.liquid
  • snippets/product-listing.liquid
  • snippets/product-card.liquid
  • snippets/product-form.liquid
  • snippets/product-block.liquid
  • snippets/collection-product.liquid
  • snippets/collection_product-content.liquid
  • snippets/collection_item.liquid
  • snippets/collectionGrid-block.liquid
  • sections/collection-template-luma.liquid
  • snippets/index_product-items.liquid
  • snippets/product-get-info.liquid
  • snippets/product-none-sidebar.liquid
  • snippets/product-vertical.liquid
  • snippets/product_page_area.liquid
  • snippets/talon_pricelock_show_price_product-listing_10FF273A.liquid
  • snippets/snippet-product-item.liquid

*Please note this is NOT a full list and many themes are unique. Therefore, your file may not appear on this list. If you/your developer can’t safely find where the snippet belongs just reach out to us. We are more than happy to help!

Step 3: Insert snippet into the desired location.

Put the following snippet into the code where you want the Fera product list page content to appear:

{% include 'banana-stand-product-list-container' %}

After you’re done hit save.

Step 4: Verify integration was successful.

Go to your product list (collections) pages to verify it was integrated. To do this access one of your collection pages, open up your HTML code inspector skill and ensure that the <div class="banana-container" ... code is present. Alternatively, you can also use the Fera admin panel to test the different skill on your page. An even easier trick is to add ?test_mode=1 after any of your product collection page URLs. This will test the skill and let you see how it’d preview on your site!

After you’ve confirmed that it is integrated properly you can set up a product list counter and see it go live in your collection pages.

Was this article helpful?

Related Articles