Design Studio
      Back to home
      1. Knowledge base
      2. Design Studio
      3. Design Studio

      How to add a placeholder

      Adding and defining placeholders is simple, intuitive and can greatly reduce the time spent on designs.

      What is a placeholder? 

      A placeholder is a tool used to designate an area on a product that adds an image or text, such as a logo or a name and number. 
      These can be used to set a default that your customer won't be able to change, or as an area where they can add anything they like.

      How to add a placeholder

      STEP 1

      Create the Placeholder

      Navigate to the dashboard Design > Studio Editor > Studio Settings > Placeholders > Open Editor > Add New.

      STEP 2 

      Set your placeholder

      1. A red rectangle, or your placeholder, will be added to the 2D pattern.

      2. Continue to add as many placeholders as you like.

      3. Enable each placeholder to make it visible for the end-user.

      4. Enter the Internal ID (this is for internal reference).

      5. Enter the placeholder title in all the languages you have available.

      STEP 3 (OPTIONAL)

      Modify the placeholder 

      You can resize, rotate and reposition the shape of the placeholder.

      When you resize the placeholder, the width and height of the placeholder will be updated. Changing the orientation of the placeholder will update the degrees.

       
      STEP 4

      Define the placeholder rules

      1. Define the number of items a placeholder can contain - the minimum is 1. An error will occur if the number of items field is left blank.
      2. You can upload one or multiple images (eg. logos) in SVG file format. If you upload multiple images, you can set one of them to be the default image, which will appear when first loading the Design Studio. You can also set default text.
      3. If you want images and text to be updated by the user, enable Step 5. The user will then be able to upload their own images or add their own text to a predefined placeholder.
      4. You can also allow the image or text to be adjusted inside of the placeholder (i.e. repositioned and rescaled) by enabling Step 5.
      5. After all the updates have been made, save.

        Be sure to assign a placeholder to one or to multiple design templates and define whether the placeholder can contain text, image or both. Make sure to save the placeholders regularly.

        image.png

         

        STEP 5

        Assign the placeholder to the personalization tab

        1. Click Studio Settings > Design Steps > Select new step > Placeholder/Personalization.

        2. Click on the dropdown.

        3. And add a group.

        image.png

        4. Enter the personalization title and assign the placeholder. You can either select multiple or single. In case of multiple, all the placeholders of a particular group can be assigned a text or image. In case of single, only one placeholder of a particular group can be assigned a text or an image.

        In this example, we are grouping and naming the button. In this case, it's a type of personalization, and it's going to be a field for a name.
        There is no save button, once entered, please refresh the page. After the page loads, you will see that this button will be part of the list.

        Assign the placeholder, and then refresh the page. This is where you can assign multiple placeholders to their respective categories.

        You've now set your first placeholder! 🎉

        Reload your browser page to see the updated changes and see the placeholders in your Design Studio.