Doofinder logo

Support Documentation

Search icon
  • Help
  • Plugins
  • Shopify
  • Installation Guide
  • Recommendations - Shopify

Recommendations - Shopify

To implement Product Recommendations in your Shopify Store, you need to edit the existing code. To access the Shopify code go to Shopify > Online Stores > Themes > Actions OR … > Edit Code

edit your existing code

Please note that in order to work properly the recommendations must also be activated in your Doofinder Admin .

Adding Doofinder

Within the theme.liquid we need to add the Doofinder script.

On the line above </body> add the below script:

<script src="//"></script>
add the doofinder script

Creating a Section For The Recommendations Placement

In the same screen, go to the folder: Sections and Add a New Section.

Name this: df-recommendations and save as liquid.

create a section

DELETE everything you see in this new section and REPLACE it with the below. IMPORTANT - CHANGE THE REGION (eu1 or us1) ACCORDINGLY!

{%- if section.settings.df_recommendations -%}
<section class="section" data-section-id="{{ }}" data-section-type="product-recommendations-df"
data-section-settings='{{ section_settings }}'>
<div class="container">
  {%- if section.settings.heading != blank -%}
        <header class="section__header">
          <h2 class="dfsection-title lines desktop-12
          tablet-6 mobile-3">{{ section.settings.heading | escape }}
  {%- endif -%}

      hashid="{{ section.settings.hashid }}"
      total-products="{{ section.settings.total_products }}">
        <!-- <div class="dfwidget-host" id="dfwidget-carousel-1234"></div> -->

{%- endif -%}

{% schema %}
    "name": "Doofinder Recommendations",

    "settings": [
      "type": "checkbox",
      "id": "df_recommendations",
      "label": "Show doofinder recommendations",
      "info": "Recommendations provided by Doofinder",
      "default": true
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "You may also like"
      "type": "number",
      "id": "total_products",
      "label": "Total Products",
      "default": 10
      "type": "text",
      "id": "hashid",
      "label": "Hashid",
      "default": "hashid"
  "presets": [
      "category": "Advanced",
      "name": "Doofinder Recommendations"
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

HOME - Adding The df-recommendations Section

From the previous page go back. You should end up on the below screen.

Online Store > Themes > Customize.

Add the df-recommendations section

This will bring you to a page similar to the below. The top drop-down bar should be set to 'home page'.

set the drop-down bar

On the left-hand menu look for Add Section and search for 'Doofinder Recommendations'. Click to add.

If you hover over the doofinder recommendations section you'll see a little symbol next to the eye. Click and drag the Recommendations into position.

Populating The Section With Results

Selecting the Doofinder Recommendations section, on the right-hand side menu you should see the below. Here add the HashID and save.

populate the results

PRODUCT - Adding The df-recommendations Section

Again go to Online Store > Themes > Customize.

This time we are going to select 'products' from the drop-down menu.

add the df-recommendations section

Now click on Add Section and search for 'Doofinder Recommendations'. Click to add.


If you hover over the Doofinder Recommendations section you'll see a little symbol next to the eye. Click and drag the recommendations into position.

click and drag

No Add Section on Product Page?

Online Store > Themes > Actions or … > Edit Code > Templates > Product.liquid > Add the section: {% section 'df-recommendations' %}

Did you find this page helpful?