1. Home
  2. Knowledge Base
  3. Platform-specific Articles
  4. Shopify Articles
  5. How to Manually Integrate Into Your Shopify Product View/Details Page
  1. Home
  2. Knowledge Base
  3. Product Detail Tool
  4. How to Manually Integrate Into Your Shopify Product View/Details Page
  1. Home
  2. Knowledge Base
  3. Manually Integrate Fera
  4. How to Manually Integrate Into Your Shopify Product View/Details Page

How to Manually Integrate Into Your Shopify Product View/Details Page

In order to make Fera show in your product detail/view pages you’ll need to integrate the container snippet into your store’s theme.

While Fera will usually integrate automatically for you upon installation, sometimes it is unable to automatically integrate because your store’s theme files are unrecognized or not using a standard layout.

You can also follow along with our YouTube video here.

Integrate Into Your Own Theme

Because every theme is different, you’ll also have to use your inspection skills so you can find the right theme file to edit for your own store.

First of all, you should be familiar with frontend engineering (HTML/CSS and Liquid) so you can follow this guide and try to integrate on your own.

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.

Since all themes are unique this is where your inspection skills come in handy. Use the search to find which file contains your product details display. Some especially common files are:

    Snippets

  • snippets/product-listing.liquid
  • snippets/product-list.liquid
  • snippets/product-list-item-inner.liquid
  • snippets/product-form.liquid
  • snippets/product-form-inline.liquid
  • snippets/product-detail.liquid
  • snippets/product-details.liquid
  • snippets/product-item-main.liquid
  • snippets/product-item.liquid
  • snippets/product_item.liquid
  • snippets/product_form.liquid
  • snippets/product-vertical.liquid
  • snippets/product.liquid
  • snippets/product-price.liquid
  • snippets/product-thumbnail.liquid
  • snippets/product-loop-grid.liquid
  • snippets/product-page-description.liquid
  • snippets/product-page-design-default.liquid
  • snippets/product-page-design-creative.liquid
  • snippets/product-page-form.liquid
  • snippets/product-page-form-mobile.liquid
  • snippets/product_page_1_description.liquid
  • snippets/product-page-description.liquid
  • snippets/product-page-info.liquid
  • snippets/product-horizontal-slider-alt.liquid
  • snippets/product-extended.liquid
  • snippets/collectionGrid-block.liquid
  • snippets/product-block.liquid
  • snippets/product-grid-item.liquid
  • snippets/product-grid-item-new.liquid
  • snippets/product-card-grid-collection.liquid
  • snippets/product-grid-item-category.liquid
  • snippets/product-grid-item-collection.liquid
  • snippets/grid-view-item.liquid
  • snippets/globofilter-product-grid.liquid
  • snippets/isotope-product.liquid
  • snippets/product-listing.liquid
  • snippets/product-home-3.liquid
  • snippets/index_more_items.liquid
  • snippets/collection_item-three.liquid
  • snippets/collection_product-content.liquid
  • snippets/prodform.liquid
  • snippets/partial–product.liquid
  • snippets/single-product.liquid
  • snippets/short-form.liquid
  • snippets/section_loop_product_quick.liquid
  • Sections

  • sections/product-page.liquid
  • sections/one-product.liquid
  • sections/product.liquid
  • sections/product-template.liquid
  • sections/product-template-1.liquid
  • sections/collection-template.liquid
  • sections/template-product.liquid
  • Templates

  • templates/product.liquid

Step 3: Insert snippet into desired location.

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

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

After you’re done hit save.

Step 4: Verify integration was successful.

Finally, go to your product view (details) pages and verify that it did integrate. In order to do this, access one of your details pages, open up your HTML code inspector skill and ensure that the <div class="banana-container" ... code is present. As a result you should be able to use the preview to see how it’ll appear on your site!

After you’ve confirmed that it is integrated properly you can setup a Product Detail Counter or Social Proof Feed and finally see it go live in your collection pages.

Was this article helpful?

Related Articles