This article will show you how to place the designer canvas 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 canvas in the “Theme Setup” 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 green chat interface). They 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 canvas in the “Theme Setup” in the app. So, let’s do this together:
First, open the Fancy Product Designer in your Shopify Shop. Choose the “Theme Setup”:
For now, we are only interested in the “Required”-Section for the Designer Placement, you can ignore everything below. As you can see the Fancy Product Designer Element Selector needs a CSS selector (in the picture it is “.product-single__media-group-wrapper”). So how can we find the right CSS selector?
For this please open the frontend view of your online store:
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 if you want to see an example: https://www.youtube.com/watch?v=mLPIcnFKD04. If you are using another browser you should definitely find other tutorials on YouTube, just search for “inspect element [your browser]". Once you’ve opened the inspector you should see something like this:
In the yellow box on the right side, you can see the code that’s defining 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 to the position of the picture on the webpage so that you can place the product designer there. If you scroll up a bit (in the inspector - here the yellow box) you should have a view similar to this:
As you can see the picture with the wine bottle is found in the HTML-element marked with the red arrow “1.” in the picture. 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” (marked with yellow boxes) or an “id” (marked with a green box) and that is the CSS selector you are searching for.
In other words: Try to find the class or id (id preferred because it’s more specific) of the image and try to copy+paste it into the “Fancy Product Designer Element Selector” field in the “Theme Setup” in the fancy product designer app. For example, in the picture above the class of the image is "mfp-image product-single__media-product-template-8454872989741 lazyautosizes lazyloaded". Please make sure to put a “.” in front of the css selector like this (or a “#” if you’ve taken an id):
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 inner HTML-element to the outer ones, meaning you can first try the class or id found at the arrow “1.” (in the picture), then try the one found at “2.”, then at “3.” and at “4.” Make sure to always save the “Theme Setup” 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.