So you installed the Customization Engine App (CE) on your Shopify store and now are ready to design your first customizable product. In CE we use customization templates to tell the app the fields we want and the constraints they should have. When you arrive at your CE dashboard the first thing you see is a list of all the customization templates you created. If you do not have any templates yet the app automatically gets you started with one and the first screen you will see is the Add Option box which looks like this:
As you can see there are many option available to customize your product from a single line custom text to a check box that requires your customers to accept your terms before adding the product to the cart. (Tip: if you hover over those buttons you'll see a short explanation of what that option does.)
Are you confused and do not even know which option type to select first? In that case I recommend that you start with a Static Image as that option will let you set the base or background image of your product. After selecting your first option you will come to a screen similar to this one:
A customization template mainly consists of what we call customization areas and customization controls. On the left side you see the viewable part of the customization template and on the right side you see the settings part of the customization template. The viewable part is important because it determines how your customers will preview their personalizations. The settings part is important because that is how you tell the app type of values you expect for each option.
Customization areas are like layers that group the viewable part of the customization controls. You can recognize customization areas because they have dashed borders and the resizable handles are on the corners of the areas. In the above picture the customization area is the one below the yellow line. Customization controls are your options and they also havea viewable part and a settings part. You can recognize the viewable part of a customization control because they have dotted borders and the resize handles are in the middle of each side. In the above picture the customization control is below the green line. If you click on the viewable part of either a customizaton area or a customization control you will activate the settings panel for the respective element. After making the changes you want on each element please remember to click on the Save button in the panel for that element.
For example if I wanted to create a customization template to sell business cards my next steps would be to name my new Static Image and save it, use the resize handles of the customization area to resize it to a size proportional to my business cards and set the image to a background image I premade for this style of business cards. After implementing those steps (believe me the UI makes it really simple so I will save you time by not going through each step) my template will look something like this:
If you activate the Options tab (by clicking on it) you will see a list of all your customization areas and their respective customization controls. You can reorder the areas and controls by dragging them from the arrow handles to the left side of each element. Now I will click on the Add Option button to add three Custom Text elements to the template to collect the name, phone number and e-mail address. After I add those I can see a preview of the template by clicking on the Preview link to the right of the template name. This is a preview of my template:
Well, my template looks like I want it so the next step is to assign it to a product. To do that click on the Products tab to activate the products settings. Then click on the Add Product link. You will see a pop-up with a list of your products. Select the product you want and confirm your selection. Below is a screenshot of the Products tab activated for your reference:
As you can see I added my template to a product in my store titled Business Card. If I click on that link that says Business Card it will open a window that takes me straight to the product in my store where I can see how the template looks there.
Well that is how you get started with the Customization Template. If you have any questions please post it below and either I or another member of our community will gladly respond.