Activate the Product Designer via Templates

Modified on Mon, 26 Oct 2020 at 03:56 PM

There are three alternatives to place the product designer on your product page. After installing the app your customers will see a “CUSTOMIZE”-Button next to the product picture that will open the product designer in a new window (corresponding article). As a second alternative, you can specify the CSS Selector for the product designer in the “Theme Setup” to place the product designer on your product page, instead of the product picture  (corresponding article).
In this article you will learn about the third alternative: How to place the product designer directly on your product page by modifying specific templates. This alternative you want to pick if either you want to realize a complex integration (like changing the structure of the product view when using the product designer) or if the Theme Setup Solution doesn’t work for some reason.

The steps you need to take to achieve this are: 

  1. Creating new product templates

  2. Modifying the newly created product templates

  3. Specifying the CSS Selector in the “Theme Setup”

If you have never heard of an HTML Element or don’t know what an HTML Tag is, then this article might be too technical for you. In this case you can easily contact our support team to help you out. Just contact us over the green chat icon.

Elsewise let’s have a look at the steps in detail.

Open the Templates section to modify their code

Now you will be creating a new product template that you can modify later. For this step you want to make modifications in the code of your template. Please change into the “Online Store”. Now you see your activated Live theme at the top. Please choose the Action “Edit code”.

Now you will see all the different templates of your theme in directories, that make up the structure of your theme. Every theme is built up differently so you can’t always follow the same steps that lead us to modified templates here in this example.

Most of the themes have two files that make up the product page: The product template file and a section template that is included by the product template. This is the most common way themes are built. However in some other themes there’s only one template to modify and again in some others you’d have to modify many templates. In our example we use the free Shopify Brooklyn Theme and this is how it works for most other themes. If you are using another theme and want our support team to help you with this, please don’t hesitate to contact us, we are happy to help - the modifications in the templates can be a bit technical. 

1. Create a copy of a first template and modify it

The code is structured in directories. You want to open the  product.liquid  template in the Templates directory.

You opened the  product.liquid  template. Now you want to modify it to make the first step towards placing the product designer onto the product page.

First you have to make a clone and then you will modify the clone. For this add a new template.

This step will open a window in which you can create a new template for “product” called “fpd”. 

After confirming with “Create template” you have a clone of our  product.liquid  template. The clone is called  product.fpd.liquid  (the final “.liquid” has been attached automatically). 

Now you change the inclusion of the section template 

{% section ‘product-template’ %}

 to the inclusion of a new file, that doesn’t exist yet, by replacing 

{% section ‘product-template’ %}


{% section ‘product-template-fpd’ %}

Here line 6 gets replaced (in your theme it can be a different line). Please reach out to our support team if you want our help with this.

Your template should look like this afterward:

With this step you have told the  product.fpd.liquid  template that it shall include the  product-template-fpd.liquid  file. But this file doesn’t exist so far, you first have to create it. Before that please save your newly created template by clicking the “Save” button on the right.
You have done the first of two modifications in the templates code.  Now let’s see how we can manage the second modification together.

2. Create a copy of a second file and modify it

Open the  product-template.liquid  template in the sections directory and afterwards add a new template called  product-template-fpd  (the final “.liquid” will be attached automatically). Now you have created the clone of  product-template.liquid  that is called  product-template-fpd.liquidHence the  product.fpd.liquid  file you created in the former step can include this  product-template-fpd.liquid  file. 

We have to open the created copy  product-template-fpd.liquid  and copy&paste the content of the  product-template.liquid  file into it (and thereby delete the code that is created automatically by Shopify in the beginning). If your experience differs from that just contact our support team, they will gladly manage this and the following steps for you.

You now have to place a placeholder for the product designer into the  product-template-fpd.liquid

For this, it is important that you have a basic understanding of the structure of this file because you have to find the HTML element you want to replace with the product designer. With this step, you can easily break your theme (if you do you can still reach out to our support team, they will fix it for you). But first: Let’s try not to.

Find the HTML element that you’d like to replace with the product designer. In our example, it is the product image which is defined in line 24 to 122 and begins with 

<div id="ProductMediaGroup-" ...

Now we know which HTML element holds the image of our product. This is the place where we want to put the product designer instead. 

Replace Line 24 to 122 by one line of code: 

<div id="fpd"></div>

This is where the product designer will be loaded. Now click “Save”.

In the last steps you have created two new files and modified them to place the product designer where previously the product image was. Now only two more simple steps are necessary.

Select the product with its new Templates

As one of the last steps select the product with the newly created Templates. In the Shopify, menu choose “Products”, choose the product you want to use the Fancy Product Designer for and click it. Then you should see a section “Theme Templates” with a dropdown menu. Here the newly created Template  product.fpd  should be available. Select it and “Save”. 

3. Theme Setup - define the placement of the product designer

As the last step define the placement of the product designer in the Theme Setup. For this switch into our app and into the “Theme Setup”. Here you can define the Product Page Settings or more specifically the “Designer Placement”. Define the “Fancy Product Designer Element Selector” as  #fpd  and click “Save”.

Check in the shop frontend if the product designer is placed correctly (for example how it should look like please see picture below). If it doesn’t maybe some former steps have broken the HTML structure of the page. Just contact our support team in the case and let them fix that for you.

In this article, you have learned how to place the product designer on your product page via modifying the templates of your theme. In this process, you have learned how to create new code templates, found out where the relevant code is defined, and subsequently have modified the templates. You also connected the product with its new Templates and defined the placement of the product designer in the Theme Setup.
Congratulations, this was not easy and a bit technical. If you encountered some problems as many do in these steps, please contact our support team to assist you with that. You can either write an email or click the green button. It is very important to us that everything regarding our app works fine for you.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article