Templates

What are templates?

Templates are available in our Pro plan and allow you to create designs that your customers can easily work off of.  An example would be the design below:

image.png

Unless your customers name was Megan, they would need to update this design with the correct personalization.

When the customer clicks into this design they are prompted to update the text on that template.  Once they update it, they can easily add to cart and checkout.

image.png

Another example would be the design below:

image.png

If someone was shopping your store and liked this design they need to update a couple things.  The photos and the personalized text ("The Anderson's").

When clicking into this template the customer is prompted to update the images and the personalized text.

image.png

With templates you can help inspire your customers with endless design ideas.  Since you as the storeowner can add your own fonts, patterns and clipart you can really add an infinite number of templates using your own art.

How do I add templates?

Once you a PRO account you will be able to create the template designs from your Customized administration portal.  Follow these steps to add templates to your store:

1. From the Templates menu in the Customized administration screen click Add New Template

2. Create your template design and click Add Template. See tips below for creating optimal templates.

3. You will see your newly created template in the main screen of templates.

4. Assign the template a name.  Note: This will be visible by your customers.

5. If the item is personalized with name or monogram check the Personalized box.  If checked, this will bring the customer directly to first layer of text when entering the template.

6. Click the Update Design button.

7. Assign Products by clicking the assign products button.  Select the products you want to make this template design for.  We recommend selecting products that have similar shapes and sizes.

8. Click the Add Template to Store button to create the template on your Shopify store.

Once that is clicked Customized will create the Template product in your Shopify store.  The templates are created as Products in your Shopify store.  To view them click into the Products section of your Shopify Admin.

Now that you have templates created you need to make sure your customers can customize and buy them.

To do this we need to update your Product theme pages.  To update your product pages in your theme, follow theme instructions below.

Template Tips

Creating templates is extremely powerful way to engage with your customers.  Follow these tips for the most successful templates:

  • When creating a template, uploaded artwork will not be retained.  Use the upload feature for photos and items you want the customer to replace in the template.  If the artwork should remain on the template use stored backgrounds, patterns and cliparts from your store.
  • If you include personalized text or monograms make it the first layer of text.  This way when you have the personalized box checked, it will take your customer to the correct layer of text to edit.
  • Assign templates to products that are relatively close in size.  For example, don't use a phone case template for a coffee mug.  This could create an undesired look for your template.


Theme Instructions

On a custom template product you need to have the customer design the product before they can add the item to the shopping cart.

To do this, you need to put Customize This Product button in place of the add to cart button.

Find add cart submit button and add if statement to add customize button. This is typically found in the product.liquid or product-template.liquid file.

For example, button shows like following

<button type="submit" name="add" class="action_button add_to_cart {% if show_payment_button %} action_button--secondary {% endif %}" data-label={{ add_to_cart_label | json }}>
  <span class="text">{{ add_to_cart_label }}</span>
  <svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" class="checkmark">
    <path fill="none" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"/>
  </svg>
</button>

Replace it with following

{% if product.type == 'Bare Product' %}
  <a href="/pages/customize" class="action_button add_to_cart">Customize this Product</a>
{% elsif product.type == 'Custom Product' %}
  <a href="/pages/customize?product_id={{ product.id }}" class="action_button add_to_cart">Customize this Product</a>
{% else %}
  <button type="submit" name="add" class="action_button add_to_cart {% if show_payment_button %} action_button--secondary {% endif %}" data-label={{ add_to_cart_label | json }}>
    <span class="text">{{ add_to_cart_label }}</span>
    <svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" class="checkmark">
      <path fill="none" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"/>
    </svg>
  </button>
{% endif %}