Sometimes you may want users to edit a product only in a certain region. For example, if the product is a paper bag, you may need to limit the editable area to its central part. However, the print-ready output may need to include a background occupying the entire bag side. Another product family is bank or loyalty cards. These cards have a black magnetic strip, and design elements should not intersect with it.
One of the ways to implement this use case is to use foreground mockups. The only disadvantage is that they will only give the user an idea that they are not supposed to drag elements into a specific area, but actually nothing forbids them from doing that.
Customer's Canvas provides a better way to limit editable areas - the
<R> marker. To set it up, you add a shape into a template and apply the marker. The shape defines an area where users can move elements around and add new ones. This way you make sure that all user changes are located where they are supposed to be.
Let us see how the
<R> marker can be used for creating a loyalty card template, for example:
The card number is in the lower-left corner and the logo is in the lower-right corner of the card. Also, there is the area in the middle of the card where you can place any text or images. This editable area cannot overlap the magnetic strip at the top and the elements at the bottom of the card. To design it in Photoshop:
<BG>marker to the name of the layer.
<MAD_f><MAMH_f><MAMV_f><MAR_f><SACBW_f><SACBC_f><LACO_f>markers to disallow moving, deleting, or changing the border and opacity for the image.
[#number#9999 9999 9999 9999]to specify an in-string placeholder.
Your card number is. Add the
<LC_t><OID_f>markers to lock the layer and hide it in Object Inspector.
<R>marker to the layer name.
You should get the following layers in Photoshop after performing the steps above:
And your template may look like this:
The black rectangle in the middle defines the editable area. The marker combinations disable moving the card number, the company logo, and the text describing your terms. You can only change their content, not the location. The mask of the number placeholder enables a numeric entry only.
When you upload the template in Customer's Canvas, you get the following product:
Note that no element is displayed for the editable area rectangle in the Object Inspector since it cannot be modified by the user in Customer's Canvas.
If users want to add new elements to the product, they will be placed within the editable area.
The card number can be filled in either manually in the editor or using the
userInfo dictionary from your e-commerce system (refer to Working with User Data for more details).