Personalization

1. Click “Online Store” in the left menu

2. Click Actions and select “Edit Code”

3. Select “cart.liquid” under “Templates” in the left menu. Please note, depending on your Shopify theme, the contents of the cart.liquid template can be found in /sections/cart-template.liquid. 

4. Search for “<img src=” in the code. It will look something like the following:

<a href=”{{ item.url }}”> <img src=”{{ item | img_url: ‘small’ }}” alt=”{{ item.title | escape }}” > </a>

 

5. Add the following after the </a> that wraps the <img …> tag.

{% assign property_size = item.properties | size %} {% if property_size > 0 %} {% for p in item.properties %} {% unless p.last == blank %} <div class="{{ p.first }}" style="display:none">{{ p.last }}</div> {% endunless %} {% endfor %} {% endif %}

6. Add the following at the very bottom of the file:

<script> jQuery(function(){ jQuery("p:contains('YourDesign')").css("display","none"); jQuery("._YourDesign").each(function( i ) { img_url = $(this).html(); img_width = $(this).siblings("a").children("img").width(); jQuery(this).siblings("a").children("img").attr("src", img_url.replace(/&amp;/g, "&")); jQuery(this).siblings("a").children("img").width(img_width); }); }); </script>

FREQUENTLY ASKED QUESTIONS 

Q: If I already have the app installed, do I need to sign up again or make any changes to use the personalization feature?

A: Personalization is automatically added to the app, but we highly recommend following step 3 in the above instructions to ensure the best experience for your customers.

Q: What products are available for personalization?

A: ALL products except for embroidery products.

Q: What if the Customization button does not appear on your product page in the place of the “Add to Cart” button?

A: Make sure that you have not inadvertently removed the CustomCat code snippet from the Description HTML. Sometimes bulk editing apps can delete HTML code as well. 
This is required code so be cautious when editing your product description.
 

To confirm the correct Personalization Code is present, click the show html button (“<>”) this snippet of code should be present at the very top:

<div id="cc-overlay" style="display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.7); z-index: 2;"><img src="//api.mylocker.net/images/loading.gif" /></div>
<script src="//customcat.mylocker.net/js/ccCustomize.min.js?v=10.6.0" type="text/javascript"></script><script src="//customcat.mylocker.net/js/customize.shopify.min.js?v=10.6.0" type="text/javascript"></script><script>// <![CDATA[
document.getElementById("cc-overlay").style.display ="block";
// ]]></script>

If the tip above does not fix your issue, send an email to contact@customcat.com with the link to the product that does not show “customize”, your theme, cart.liquid txt file and any information describing your issue.

Q: What if an unnecessary text is showing during the “Add to Cart” step?

A: Please make sure you have added the “Add to Cart” code (which you can find under “Steps 3-6” on this page) in the appropriate place in your theme files.

Q: If I already have the app installed, do I need to sign up again or make any changes to use the personalization feature?

A: Personalization is automatically added to the app, but we highly recommend following step 3 in the above instructions to ensure the best experience for your customers.

Q: What if product image in the cart does not show the customized text from the previous step?

A: Please make sure you have added the “Add to Cart” code (which you can find under “Steps 3-6” on this page) in the appropriate place in your theme files.

Q: How can I add a new font for my personalization?

A: Email the font name and font file (if possible) to contact@customcat.com. CustomCat will do a full licensing search to make sure we have the rights to use the font and that the font has all of our required characters. Please note that we love suggestions but will have to look into each request.

Q: Can I use special characters (Kanji, accents, etc.)?

A: No. Kanji, Emojis, Foreign Characters, Accents, and other special characters cannot be used and will result in unintended characters printing on your products. Characters on your keyboard such as ?, !, $, etc. can be used without issue. We strongly recommend mentioning this verbiage in your FAQs.  

 

Recent Posts

Stay up to date! Sign up for our newsletter to receive updates on all things CustomCat!

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on pinterest
Pinterest
Close Menu

Login or Sign Up

This option is only available on the main CustomCat website.
Follow this link to be redirected to customcat.com. 

Subscribe to the Blog

Enter your email address to subscribe to this blog and receive notifications of new posts by email.