Skip to content
Contact us
  • There are no suggestions because the search field is empty.

Can you provide the instructions and code for setting up the Shopify personalization section?

Step-by-step guide and source code to add a personalization field to your Shopify product pages.

Step 1: Install the code

    1. Open your Shopify admin and go to Online Store.
    2. On your published theme, click **on the three dots next to customize and select Edit Code.
    3. In the code editor, scroll down in the left sidebar, to find a folder called Sections.
    4. Select “main-cart-items.liquid”
    5. Search for “escape” 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>

            6.   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 %}

          7.   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>

     

    Tips for use:

    Updating your theme

    When you download an updated version of your theme, it won’t have this code in the sections/main-cart-items.liquid. You just need to add the code again using the steps above.

    Shopify Personalization FAQs

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

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

    -To confirm the correct Personalization Code is present, you should perform the following:

    1. Log into the Shopify Admin with your login credentials.
    2. Navigate to Products -> Select on the product you would like to update.
    3. Click the Show HTML button to view the HTML code for the content inside the rich text editor:

    shopify.personalization-1

    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="//app.customcat.com/js/ccCustomize.js?v=11.8.5" defer type="text/javascript"></script><script src="//app.customcat.com/js/customize_shopify.js?v=11.8.5" defer type="text/javascript"></script><script>document.getElementById("cc-overlay").style.display ="block";</script><p> </p>
    <ul>

        4. Make sure to save your changes if needed.

    Q: What happens if I update my Shopify theme?

    A: If you update your Shopify theme, the custom code you added will not be included in the updated version. You will need to manually add the code again using the steps provided in the instructions.

    Q: Can I use this code with any Shopify theme?

    A: This code should work with most Shopify themes, but it’s always a good idea to test it on a backup of your theme first to ensure compatibility.

    Q: What if the custom code breaks my theme?

    A: If the custom code causes issues with your theme, you can remove it by reverting the changes you made in the main-cart-items.liquid file. Always keep a backup of your theme before making any changes.

    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.

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

    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 right to use the font and that the font has all of our required characters. Please note that we love suggestions but we have to look into each request.