User Interface
Appearance Deep Dive
Deep Dive: Mastering the Designer Appearance in Fancy Product Designer If you want to change the options available to your customers, this is your place to go. In the Appearance section, you can transform functionality into a polished customer experience. It's not just about setting colors; it’s about designing how your customization interface feels and behaves. This guide explores the key aspects of the Appearance settings, focFew readersHelpful CSS adjustments
You can fine-tune the appearance and layout of the Fancy Product Designer with a few simple CSS rules. Below are some useful adjustments you can copy and paste into the custom CSS segment in the Appearance tab in the app. Show Extra Price on Done button in Customize Button Mode Use this to show the extra price you are charging for the customization on the Done button when the product designer is in the Customize Button mode.Few readersTranslating the Designer Interface into a Different Language
The app backend is only available in English. However, all labels displayed on the frontend, like buttons, module names, tooltips, and more, can be freely customized to any language via Global Settings Translations. What Can Be Translated Every text element visible to customers in the designer can be overridden: action buttons, module labels, toolbar entries, confirmation messages, and the cart "Edit" button. You replace each label with your own text; there is no automatic language detFew readers
Modules
Image Module
Step 1: Include the Image Module in your UI (Module is active by default) Navigate to Appearance Modules Add the Images Module by drag and drop Save Changes! Step 2: Adjust Settings Now switch to Settings Element PropertiesFew readersAI Tools in the Product Designer
Fancy Product Designer includes three AI-powered tools that your customers can use directly in the designer. These tools are separate from the AI Customization Creator, which is a backend tool for store owners. Setting Up AI Features All three AI tools require Designer Version 2.0 and must be enabled in your settings before customers can access them. Activate Designer Version 2.0: Go to Global Settings Shopify Frontend Script Version. Select "Version 2.0." Enable AI feFew readersText Module
Step 1: Include the Text Module in your UI (Module is active by default) Navigate to Appearance Modules Add the Text Module by drag and drop Save Changes! Step 2: Adjust Settings Now switch to Settings Element Properties (or Customization Profiles foFew readersHow to Show Image Sizes in the Product Designer
The Fancy Product Designer allows you to display the size of any element directly in the product designer using a tooltip. This is useful for precise placement and resizing of images, text, and other design elements. How to Enable Size Tooltip Go to Settings Advanced Advanced Image Size Tooltip Enable the Image Size Tooltip option. Changing Units of MeasurementFew readersSync Text Elements with Text Link Groups
In some cases, you may want multiple text elements to stay synchronized. This means when a customer edits one text element, all linked elements update automatically. How it works: The Text Link Group option allows you to connect text elements together. Assign the same group value to every text elements you want to sync. As long as the elments are within the same customization, they will change together. They don't need to be in the same view. Navigate to CustomizationsFew readersPixabay Integration
Our app allows your customers to select images directly from Pixabay within the product designer. With this addition, users can search and select images directly from the Pixabay library inside the product designer. Pixabay Integration in the Global Settings 1. Retrieve an API Key Go to the Pixabay API documentation Log in to your PixabayFew readers