This article will show you how to place the designer onto the product page instead of using the "Customize"-button. You will see how to pick a CSS-selector for the product designer canvas. Here is an example of how your product page will look like.
There are two alternatives to achieve this. You can either specify the CSS-selector for the placement of the designer in the settings in the app (this article describes this first alternative) or you can duplicate your product template and put an HTML tag for the fancy product designer right into the code of your website. If that sounds very technical - it actually is. If you’d like to have support here, please don’t hesitate to contact our support team (over the blue chat interface). We will be happy to provide help with the setup.
In this article, we will dive deeper into this first alternative: Specifying the CSS selector for the placement of the designer in the settings in the app. So, let’s do this together:
First, open the Fancy Product Designer in your Shopify Shop. Choose Settings > Integration > Theme:
For now, we are only interested in two sections here: "Designer Mode" and "Designer Placement". In Designer Mode you can switch between the "Customize Button" mode and the "Product Page" mode. The Mixed mode is only for special cases. Here, select the "Product Page" mode.
As you can see the Fancy Product Designer Element Selector needs a CSS selector (in the picture it is “media-gallery”). So how can we find the right CSS selector?
For this please open the frontend view of your online store and navigate to any product page that is not linked to the Fancy Product Designer App:
With a right-click on a product photo, you get into the context menu, where you can choose “Inspect” if you are using Chrome as a browser. See this tutorial should you want to see an example. If you are using another browser you should find other tutorials on YouTube, just search for “inspect element [your browser]". Once you’ve opened the inspector you should see something like this:
On the right side, you can see the code that defines how the picture of the wine bottle is displayed (if you feel like you don’t want to dive that deep into it, just contact our support team to get help with that).
Now you want to find the CSS selector that is associated with the position of the image gallery on the webpage so that you can place the product designer there. Remember, we don't just want to replace the image itself but the whole gallery. If you scroll up a bit (in the inspector) you should have a view similar to this:
As you can see the image with the wine bottle itself is found in the HTML-element marked with the blue arrow “1.”. However, the gallery as a whole is found in the HTML-element marked with the "3". To find the gallery element, search for the outer most element that includes the whole gallery when marked.
The code is built with many HTML-elements that are opened with “<” and closed with “>”. They can be called “img”, “div” or other names. Many of them have a “class” or an “id” (see the orange boxes) and that is the CSS selector you are searching for.
To specify the element you want to select, you need to find the class (blue), id(orange) or element tag (green), that uniquely identifies the gallery. Usually, ids are preferable since they are unique to one element, however, in this case, they are also unique to one product. Therefore, to make sure the selector works for all products you link to our app, avoid selectors that include long template numbers.
In other words: Try to find the selector of the image gallery and try to copy+paste it into the “Fancy Product Designer Element Selector” field in the Theme Settings in the Fancy Product Designer app. Please make sure to put a “.” in front of the CSS class selector (or a “#” if you’ve taken an id). An element tag (like this) goes without the ".":
Save the CSS selector you just inserted and check in your Online Store if the designer canvas is placed correctly (meaning if the product designer is now placed where your product picture has been before):
If it’s not placed correctly you can try out some other CSS selectors. A good approach is to work from the most outer HTML-element to the inner ones, meaning you can first try the class or id found at the arrow “3.” (in the picture), then try the one found at “2.”, then at “1.”. Make sure to always save the Settings before you check the picture in your Online Store again.
Again: If you encounter any problems, please don’t hesitate to contact our support team. We are happy to help you with every step.