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(/&/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 removed the CustomCat code snippet (below). The personalization feature requires CustomCat to add the code to the product description during the export to Shopify step.
IF EDITING HTML IN DESCRIPTION MAKE SURE THE SCRIPT IS LEFT IN TACT.
If you edit the product and click the show html button (“<>”) this snippet of code should be present:

<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=9.9″ type=”text/javascript”></script>
<script src=”//customcat.mylocker.net/js/customize.shopify.min.js?v=9.9″ type=”text/javascript”></script>
<script>document.getElementById(“cc-overlay”).style.display =”block”;</script>
 

If the previous step does not explain 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 “Step 3” 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 “Step 3” 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: How can I edit the checkout.liquid page on Shopify if an unnecessary text is showing? 

A: For most Shopify users, the checkout page template cannot be accessed from the template editor and are generated by Shopify. If you are Shopify plus customer, you can completely edit the layout of the checkout page with checkout.liquid and checkout.scss.liquid files in the theme editor section in your Shopify store admin panel. 

Q: What if the wrong image is displaying on my cart page? 

A: Remove the snippet of code in STEP 6  and add the following code at the very bottom of the cart.liquiud page:
 
 

Recent Posts

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

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.

Join 29 other subscribers