Documentation
Easy Product Customization
Getting Started
How to create options set
How to add custom font
Link product to option set
Enable Easy Product Customizer App
Additional
Input fields types
Conditional logic
Multi-select
The best use case for the input field
Creating multiple options set
How to create options set
Options set is a template where you can add multiple options. Follow the simple steps as below to create one.
1. Click to Create options set button
2. Enter the options set name
3. Choose option type
4. Enter additional information
- Enter option title
- Enter values and their prices
- Optional:
- Make it required or conditional required if it is.
- Set multi-select rule (min or max)
5. Save option set
How to add custom font
Follow these steps to add custom fonts.
1. Add custom Font
2. Go to your theme and click ‘Edit code.’
3. Locate the ‘base.css’ file, and add the following code at the bottom.
@font-face {
font-family: "Picturama Founder PERSONAL Regular";
src: url( "https://cdn.shopify.com/s/files/1/0786/2186/8322/files/PicturamaFounder_PERSONAL_USE_ONLY.otf") format("opentype");
}
Note: for ‘.ttf’ use format ‘truetype’ and for ‘.otf’ use format ‘opentype’ at the end also at the end of the URL, there is .ttf?v. You have to remove ‘?v’ from .ttf?v
4. Add custom font to your live customization options.
Type the full custom font name in search field and click Add custom font button.
Link products to options set
After creating options set now you can link product with it. Follow the simple steps as below to create one.
1. Click to Link products button
2. Checked the product you want to link
Enable Easy Product Customizer App from theme editor
To enable Easy Product Customizer from the store theme follow these steps:
1. Go to the Online Store form left navigation bar
2. Click on Customize
3. Enable Hide Customized products
4. Click Save
All types of input fields you may need
Create customization options, variant options for your product with 9+ types of input field types. Make them required, custom price add-on, conditional logics(selection of one option can show or hide some other product’s options), min and max selection rule.
1. Buttons
2. Checkboxes
3. Radio buttons
4. File/Image upload
5. Text Boxes
6. Number Fields
7. Dropdowns
8. Color Swatches
9. Image Swatches
10. Instruction
Conditional logic
Conditional logic: Show or hide certain options based on the user’s selection is a very powerful feature you can use.Â
1. To use conditional logic there must be at least two options
2. Then checked the required field which you want to make conditional
3. Choose one option and then its values
4. Save the option set and there you have it.
Multi-select
The multi-select feature works with buttons, color swatches, and image swatches. You can set a rule as the user need or can select the minimum or maximum number of options.
1. Options: buttons, color swatches, and image swatches has multi-select feature checkbox
2. Now user can select multiple options
3. Additional settings
-
- Set the minimum number of selection or
- Set the maximum number of selection
The best use case of the input types
Easy product customizer offers 9+ types of input field that allow you to create personalized product for your customers. The best use case for input fields as per there types are.
Buttons
- CTA type action button
- Allow multi-select
- Set minimum/maximum number or selection
- Price Add-on
- Conditional logic
Checkboxes
- Best for the option that offers customers to pick additional items.
- Multi-select
- Min and max number of selection
- Price Add-on
- Conditional logic
Radio buttons
- Best for the option that allowed only one choose option
- Price Add-on
- Conditional logic
File/Image upload
- Ask users to upload their logo, icon, and photo to personalize the product as per their requirements
- Price Add-on
- Conditional logic
Text/Number Fields
- The text/number field that offers users to type text or numbers(Name, Jersey number).
- Offer maximum character limitation.
- Price Add-on
- Conditional logic
Dropdowns
- The dropdown offers only one option to be selected.
- Price Add-on
- Conditional logic
Color Swatches
- Beautiful color swatches allow users to select single or multiple
- Allow multi-select
- Minimum/maximum number or selection
- Price Add-on
- Conditional logic
Image Swatches
- Beautiful image swatches allow users to select single or multiple
- Allow multi-select
- Minimum/maximum number of selection
- Price Add-on
- Conditional logic
Instruction
- Best for user information, instruction, and guidance.
- Conditional logic
- Support <a>image tag</>
- Support <img>img tag</>
- h1, h2, h3, h4, h5, h6, p, span, label