I recently inherited a website where the previous developer was using Fancy Product Designer to create custom aprons for radiation protection. After reviewing the community forums and plugin documentation, I see that the plugin has a lot of capabilities and potential to create a great user experience. However, the way that the former developer of the site set it up is not ideal. If you go to this product page and select the lead type and size and then hit "Design your own" you'll see what I mean.
The UI composer is basically completely unusable on mobile, the static image with directions at the bottom doesn't make sense, and overall the experience is very confusing. I saw Custom Ink's website in another forum post and I love what they did with the layout composer. Does anybody have any suggestions for what settings need to be updated / where I should get started in improving this?
0 Votes
rady kal posted
about 5 years ago
AdminBest Answer
You could improve your mobile settings and remove the blank space from the sides.
Also you can create a different fancy product and connect it to your mobile version (On the meta box on the right side of your WooCommerce product). In that fancy product you can remove any blank area within the canvas and use the whole canvas to place your product images.
0 Votes
20 Comments
Sorted by
rady kalposted
almost 5 years ago
Admin
Please open a support ticket for your issue so we can have a closer look at the settings.
0 Votes
G
Graphcom Developmentposted
almost 5 years ago
Well, 50-60 design CATEGORIES. Designs themselves.... hundreds, maybe over a thousand.
0 Votes
G
Graphcom Developmentposted
almost 5 years ago
I have about 30 products and countless designs - at least 50 or 60
0 Votes
C
Colin Limposted
almost 5 years ago
Graphcom,
May I ask how many products you have/plan to have?
And designs?
0 Votes
G
Graphcom Developmentposted
almost 5 years ago
I went ahead and enabled sidebar right instead of off-canvas like you suggested. It looks much better on mobile now, but now I am experiencing a whole other issue. My problem is explained in detail via the video below. A quick summary is that when I resize my UI composer, suddenly none of my designs are fitting in the composer any more. When I try to change the settings on my designs, none of them are updating. Either there is something wrong with the plugin, or there is something overriding my settings, and I don't understand what it could be. I am on a tight client deadline and really need to get this figured out asap so that I can update all my products and designs as needed... please, any help as soon as possible would be greatly appreciated.
I don't want this to be able to happen. I've checked my settings, and "draggable" is set to off. I also locked my layers in the product builder. Why is this happening / how can I fix it?
Thanks!
0 Votes
rady kalposted
almost 5 years ago
Admin
If you enable sidebar right instead of Off-Canvas right, you don't need to add extra space in your canvas.
0 Votes
G
Graphcom Developmentposted
almost 5 years ago
The images of my products do not have extra space around them, as Tyler suggested in his post. And I already have the advanced settings set to responsive. The issue is that the proportions of the canvas do not adjust responsively.
The canvas is wide, and I have a panel on the right side. In order for the panel on the right side to not cover up my product, I had to shift the product all the way to the left, as seen in these screenshots:
On mobile, all the extra space on the right side makes the product appear WAY too small, as you can see in this screenshot:
I cannot duplicate all the products to create mobile-friendly versions - it's going to take too much time, and then I would have to duplicate all the designs too. This cannot be the only option, there has to be another solution. All I want is for the mobile view to be larger.
If there is a different way to set up the image on the canvas (perhaps there's a way to make the right-side panel PUSH the product to the side, rather than covering it?!) - then I'm all ears. It's extremely frustrating that this tool doesn't provide any better ways to optimize for mobile.
I'm desperate for a better solution other than duplicating all products and designs - any suggestions would be much appreciated.
0 Votes
C
Colin Limposted
almost 5 years ago
Hey guys,
This is how I did the UI for the version of product page that I created with limited features for a slightly dumbed down customization experience, for people that don't wish for such technicality in product design. (Combined FPD with Multistep Product Designer add-on). For this, I only used 1 product version, and used only css to make it responsive.
Key points that might be useful are:
Combine the use of accordions, tabs, and horizontal scrolling hide/show stuff depending on what layout suits them best for browsing.
Cover/Frame/Text navigation are tabs that hide/show modules.
Modules are added off-canvas and in tabs using shortcode, with FPD main bar hidden, for better control and responsiveness through code.
Frame/Cover options break into horizontal scroll using css, so you can add as many options as you want without forcing the user to scroll down and lose sight of the designer
View selectors are hidden on mobile, and next/prev action buttons used instead.
Woocommerce product information (description, additional info, shipping etc) placed in accordions.
This is how it looks on desktop:
I'm currently working on the full-featured customisation version with all modules available for use by the end-users more inclined to do so. Desktop version looks like this now, but im still working to make it mobile atm (will make it available when ready):
As you can see, it will certainly take some work and coding to make it a good UX for your customers, but my opinion is that's on us store owners to make happen. Radykal and team are consistently focused on introducing more features that will make FPD more robust and powerful, so I'm happy about that.
Hope this helps!
0 Votes
rady kalposted
almost 5 years ago
Admin
I understood what you like to get.
You can either duplicate all the fancy products as mentioned in the comments above or
change your existing fancy products so that you remove the blank space in the product builder and simply use that one for all devices.
Which version of the Fancy Product Designer do you use? The mobile option is available since around a year ago.
Thanks, Tyler, for your answer.
0 Votes
T
Tyler Keeverposted
almost 5 years ago
Hello Graphcom,
This plugin is really awesome. That is for sure. But there are a number of little... quirks that you have to work around. Mostly, you need to make sure the graphics used to create the product in FPD are done right. I have had to go back to make revisions to the graphics of most of my products several times. How good are you with PhotoShop and Illustrator? I pretty much build the product in Illustrator and then export the layers that I need (background/canvas mask, cut and bleed lines, etc.) and build the product in FPD
Your issue with the canvas being wider than it is tall and the instructions being at the bottom, look to be the way the graphics were designed before they were added to the product builder. My recommendations are as follows:
- You will need to re-create the graphics used to make the product so that the main canvas background image is the size and aspect ratio you want (Remove the empty white space on the sides.) This will fix the aspect ratio, but If you do this right, you could also have one version that is *close enough* to being fine for both mobile and desktop.
- Set the canvas size in the Product Builder for each Product (Fancy Product Designer > Products.) You can set it per view if you need to, but I would keep the canvas size for each view of a product the same. Do not set the global canvas size value if you don't need to. That caused problems for me. For my products, the canvas size is set to the size of my background/canvas mask graphic.
- For mobile friendliness... that's a tough one and I haven't figured out the best way to do this so if you find anything, let me know.
- - Radykal suggests having two FPD Products for each physical product you sell - a desktop version and a mobile version. While this is a pain in the ass, it is actually a better bet than trying to make one product fit on all screen sizes - a well known nightmare for developers and web designers.
- - a quick change that should help is to make sure you have set FPD to be responsive in Fancy Product Designer > Settings > Advanced > Miscellaneous. This wont be a magical fix, but it definitely helps.
Here is a screenshot showing the responsive setting and a couple other settings that have helped me out a lot:
I hope this was helpful. FPD can be a pain to work with, but it really is an awesome plugin. Good luck!
Best Regards,
Tyler
0 Votes
G
Graphcom Developmentposted
almost 5 years ago
It appears to me that you can only change the canvas width in the product builder for ALL devices. There is no option for desktop vs. mobile.
Literally all I want to do is just make the image fill the space on a mobile device. It's so simple - there must be a way to do this without creating duplicates of ALL the products and designs. Please see this video and let me know if you can help me.
you can change the canvas width in the product builder. There you can set a width smaller than the height.
0 Votes
G
Graphcom Developmentposted
about 5 years ago
What do I need to do for each product individually?!
As I said, the mobile preview is the wrong orientation - it is wider than it is tall. How do I adjust this?
0 Votes
rady kalposted
about 5 years ago
Admin
yes, you need to do it for each product individually.
0 Votes
G
Graphcom Developmentposted
about 5 years ago
This really does not answer my question. The canvas is wider than it is tall, which is not accurate to how most people user their mobile devices.
I want to create a better mobile experience, but there doesn't appear to be any documentation on the website for how to do so. Many of the demos on the site function well and the layouts actually change for mobile (like this one https://fancyproductdesigner.com/product/shirts/ - see screenshots as well)
Can you please outline the steps I need to take to make my site function like this?
Instead of loading another fancy product for each mobile product you can also just enlarge the image on the canvas so it uses the whole space of the canvas.
If you still have blank space please edit the width of the fancy product going to Fancy Product Designer -> products -> settings
0 Votes
G
Graphcom Developmentposted
about 5 years ago
I don't see a meta box on the right side of the WooCommerce product. I want to edit the UI layout for ALL the products on the site - are you saying that I need to manually change it for each one individually?
How do you remove the blank area within the canvas? Also, the mobile preview is the wrong orientation. It is wider than it is tall - can this be changed? See attached screenshot.
You could improve your mobile settings and remove the blank space from the sides.
Also you can create a different fancy product and connect it to your mobile version (On the meta box on the right side of your WooCommerce product). In that fancy product you can remove any blank area within the canvas and use the whole canvas to place your product images.
I recently inherited a website where the previous developer was using Fancy Product Designer to create custom aprons for radiation protection. After reviewing the community forums and plugin documentation, I see that the plugin has a lot of capabilities and potential to create a great user experience. However, the way that the former developer of the site set it up is not ideal. If you go to this product page and select the lead type and size and then hit "Design your own" you'll see what I mean.
The UI composer is basically completely unusable on mobile, the static image with directions at the bottom doesn't make sense, and overall the experience is very confusing. I saw Custom Ink's website in another forum post and I love what they did with the layout composer. Does anybody have any suggestions for what settings need to be updated / where I should get started in improving this?
0 Votes
rady kal posted about 5 years ago Admin Best Answer
You could improve your mobile settings and remove the blank space from the sides.
Also you can create a different fancy product and connect it to your mobile version (On the meta box on the right side of your WooCommerce product). In that fancy product you can remove any blank area within the canvas and use the whole canvas to place your product images.
0 Votes
20 Comments
rady kal posted almost 5 years ago Admin
Please open a support ticket for your issue so we can have a closer look at the settings.
0 Votes
Graphcom Development posted almost 5 years ago
Well, 50-60 design CATEGORIES. Designs themselves.... hundreds, maybe over a thousand.
0 Votes
Graphcom Development posted almost 5 years ago
I have about 30 products and countless designs - at least 50 or 60
0 Votes
Colin Lim posted almost 5 years ago
Graphcom,
May I ask how many products you have/plan to have?
And designs?
0 Votes
Graphcom Development posted almost 5 years ago
I went ahead and enabled sidebar right instead of off-canvas like you suggested. It looks much better on mobile now, but now I am experiencing a whole other issue. My problem is explained in detail via the video below. A quick summary is that when I resize my UI composer, suddenly none of my designs are fitting in the composer any more. When I try to change the settings on my designs, none of them are updating. Either there is something wrong with the plugin, or there is something overriding my settings, and I don't understand what it could be. I am on a tight client deadline and really need to get this figured out asap so that I can update all my products and designs as needed... please, any help as soon as possible would be greatly appreciated.
Check out this video: https://embed.vidyard.com/share/YvjkuM8SwXVxYqqmrMVWqj?
0 Votes
Graphcom Development posted almost 5 years ago
Thanks! It's looking much better now.
I have one more question - for some reason when you click & drag on the builder you are able to move layers around. See this quick video:
Check out this video: https://embed.vidyard.com/share/mYqFYztXNMg3J7vpnBXb2o?
I don't want this to be able to happen. I've checked my settings, and "draggable" is set to off. I also locked my layers in the product builder. Why is this happening / how can I fix it?
Thanks!
0 Votes
rady kal posted almost 5 years ago Admin
If you enable sidebar right instead of Off-Canvas right, you don't need to add extra space in your canvas.
0 Votes
Graphcom Development posted almost 5 years ago
The images of my products do not have extra space around them, as Tyler suggested in his post. And I already have the advanced settings set to responsive. The issue is that the proportions of the canvas do not adjust responsively.
The canvas is wide, and I have a panel on the right side. In order for the panel on the right side to not cover up my product, I had to shift the product all the way to the left, as seen in these screenshots:
On mobile, all the extra space on the right side makes the product appear WAY too small, as you can see in this screenshot:
I cannot duplicate all the products to create mobile-friendly versions - it's going to take too much time, and then I would have to duplicate all the designs too. This cannot be the only option, there has to be another solution. All I want is for the mobile view to be larger.
If there is a different way to set up the image on the canvas (perhaps there's a way to make the right-side panel PUSH the product to the side, rather than covering it?!) - then I'm all ears. It's extremely frustrating that this tool doesn't provide any better ways to optimize for mobile.
I'm desperate for a better solution other than duplicating all products and designs - any suggestions would be much appreciated.
0 Votes
Colin Lim posted almost 5 years ago
Hey guys,
This is how I did the UI for the version of product page that I created with limited features for a slightly dumbed down customization experience, for people that don't wish for such technicality in product design. (Combined FPD with Multistep Product Designer add-on). For this, I only used 1 product version, and used only css to make it responsive.
Key points that might be useful are:
I'm currently working on the full-featured customisation version with all modules available for use by the end-users more inclined to do so. Desktop version looks like this now, but im still working to make it mobile atm (will make it available when ready):
As you can see, it will certainly take some work and coding to make it a good UX for your customers, but my opinion is that's on us store owners to make happen. Radykal and team are consistently focused on introducing more features that will make FPD more robust and powerful, so I'm happy about that.
Hope this helps!
0 Votes
rady kal posted almost 5 years ago Admin
I understood what you like to get.
You can either duplicate all the fancy products as mentioned in the comments above or
change your existing fancy products so that you remove the blank space in the product builder and simply use that one for all devices.
Which version of the Fancy Product Designer do you use? The mobile option is available since around a year ago.
Thanks, Tyler, for your answer.
0 Votes
Tyler Keever posted almost 5 years ago
Hello Graphcom,
This plugin is really awesome. That is for sure. But there are a number of little... quirks that you have to work around. Mostly, you need to make sure the graphics used to create the product in FPD are done right. I have had to go back to make revisions to the graphics of most of my products several times. How good are you with PhotoShop and Illustrator? I pretty much build the product in Illustrator and then export the layers that I need (background/canvas mask, cut and bleed lines, etc.) and build the product in FPD
Your issue with the canvas being wider than it is tall and the instructions being at the bottom, look to be the way the graphics were designed before they were added to the product builder. My recommendations are as follows:
- You will need to re-create the graphics used to make the product so that the main canvas background image is the size and aspect ratio you want (Remove the empty white space on the sides.) This will fix the aspect ratio, but If you do this right, you could also have one version that is *close enough* to being fine for both mobile and desktop.
- Set the canvas size in the Product Builder for each Product (Fancy Product Designer > Products.) You can set it per view if you need to, but I would keep the canvas size for each view of a product the same. Do not set the global canvas size value if you don't need to. That caused problems for me. For my products, the canvas size is set to the size of my background/canvas mask graphic.
- For mobile friendliness... that's a tough one and I haven't figured out the best way to do this so if you find anything, let me know.
- - Radykal suggests having two FPD Products for each physical product you sell - a desktop version and a mobile version. While this is a pain in the ass, it is actually a better bet than trying to make one product fit on all screen sizes - a well known nightmare for developers and web designers.
- - a quick change that should help is to make sure you have set FPD to be responsive in Fancy Product Designer > Settings > Advanced > Miscellaneous. This wont be a magical fix, but it definitely helps.
Here is a screenshot showing the responsive setting and a couple other settings that have helped me out a lot:
http://prntscr.com/nmvhsf
I hope this was helpful. FPD can be a pain to work with, but it really is an awesome plugin. Good luck!
Best Regards,
Tyler
0 Votes
Graphcom Development posted almost 5 years ago
It appears to me that you can only change the canvas width in the product builder for ALL devices. There is no option for desktop vs. mobile.
Literally all I want to do is just make the image fill the space on a mobile device. It's so simple - there must be a way to do this without creating duplicates of ALL the products and designs. Please see this video and let me know if you can help me.
https://share.vidyard.com/watch/WtkT7th65Vux66JqK4tnWQ?
0 Votes
rady kal posted almost 5 years ago Admin
Create a fancy product for the mobile version for example. You can create a canvas with a different aspect ratio that suits the mobile view p.e.
Otherwise you can hire us to help you set up your products www.fancyproductdesigner.com/customization-request
0 Votes
rady kal posted almost 5 years ago Admin
you can change the canvas width in the product builder. There you can set a width smaller than the height.
0 Votes
Graphcom Development posted about 5 years ago
What do I need to do for each product individually?!
As I said, the mobile preview is the wrong orientation - it is wider than it is tall. How do I adjust this?
0 Votes
rady kal posted about 5 years ago Admin
yes, you need to do it for each product individually.
0 Votes
Graphcom Development posted about 5 years ago
This really does not answer my question. The canvas is wider than it is tall, which is not accurate to how most people user their mobile devices.
I want to create a better mobile experience, but there doesn't appear to be any documentation on the website for how to do so. Many of the demos on the site function well and the layouts actually change for mobile (like this one https://fancyproductdesigner.com/product/shirts/ - see screenshots as well)
Can you please outline the steps I need to take to make my site function like this?
Attachments (2)
mobile-ui.png
123 KB
desktop-ui.png
184 KB
0 Votes
rady kal posted about 5 years ago Admin
Instead of loading another fancy product for each mobile product you can also just enlarge the image on the canvas so it uses the whole space of the canvas.
If you still have blank space please edit the width of the fancy product going to Fancy Product Designer -> products -> settings
0 Votes
Graphcom Development posted about 5 years ago
I don't see a meta box on the right side of the WooCommerce product. I want to edit the UI layout for ALL the products on the site - are you saying that I need to manually change it for each one individually?
How do you remove the blank area within the canvas? Also, the mobile preview is the wrong orientation. It is wider than it is tall - can this be changed? See attached screenshot.
Attachments (1)
Screen Shot ....png
219 KB
0 Votes
rady kal posted about 5 years ago Admin Answer
You could improve your mobile settings and remove the blank space from the sides.
Also you can create a different fancy product and connect it to your mobile version (On the meta box on the right side of your WooCommerce product). In that fancy product you can remove any blank area within the canvas and use the whole canvas to place your product images.
0 Votes
Login or Sign up to post a comment