Theme Edits

Integrating Recommendify Using Theme Edits

When Recommendify was first released, it had to be integrated into stores by editing theme code.

This method is not advised anymore, but is still supported for older stores using heavily customized themes.

New stores should use App Theme Extensions.

If you are a legacy customer, or for some reason you want to use this method, while recogizing that it will take you off the theme upgrade path, read on.

How do I get to the template editor?

Your Shopify dashboard contains a template editor that you can use to change the code in your shop themes, or to make the changes required to integrate new apps. The editor can be accessed as follows:

Click the "Online Store" button on the left hand side of your Shopify dashboard, in the "Sales Channels" section It will bring you to the Themes page.

The themes page lists the themes you currently have installed, with the active theme at the top. For each theme, you have the option of configuring whatever settings the theme supports, or directly editing the HTML, CSS and Javascript files included in it.

Let's add Recommendify to your active theme.

Click the "Actions" dropdown on your theme and select "Edit Code".

The Template Editor

The main section of the template editor shows the contents of the file you are currently editing. The panel on the left shows a list of files that make up the theme, grouped into different folders.

The folder containing the Liquid template files you will want to modify is called "Templates". Expand that folder by clicking on it. You are now ready to start working with your files.

Adding Similar Products Recommendations

Product page recommendations can be integrated easily by adding one line of code to your product page template. The file you are looking for is called  product.liquid. Click that in the panel on the left to open it.

Now add the following code somewhere in the template.

<div id="recommendify-similar-products" shop="{{ shop.domain }}" product="{{ product.id }}"></div>

The best place to add the code depends on your particular theme, but for many themes a good place is right at the end, or just before the last closing div tag (it looks like </div>). You may need to experiment a little to figure out where is best.

Click "Save" on the toolbar above the file, then click "Preview" to see what the recommendations look like on your store.

If you want to change the title of the recommendations, or other behaviour, you can do so on the configuration page of this site. You can learn about the different settings for panels here.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us