How to update a customized template

You've customized your shop's template to make it uniquely yours - great job taking that initiative! However, those custom touches have a side effect: your template will no longer receive automatic updates, meaning you miss out on new features and bug fixes. Let's explore what this means and how to keep your shop both personalized and up-to-date.

What Happens When You Customize Your Template? 🤔

When you modify your template's code (whether HTML, CSS, or JavaScript):

• ❌ Auto-updates for your template are automatically disabled

• ❌ New features, bug fixes, and design improvements won't reach your store

• ❌ If you manually update later, you'll lose your custom changes

This doesn't mean you shouldn't customize - it just means you need a strategy!

Two Smart Paths Forward 🛣️

Option 1: Update and Re-customize

This approach involves updating your template to get new features, then adding your customizations again afterward.

Pros:

• You get all the latest template features and improvements

• You maintain full control over your customizations

Cons:

• You'll need to reapply your changes after every update

• This creates more work long-term

Option 2: Move Customizations to Integration Code Sections (Recommended!)✨

This is our recommended approach for most sellers - moving your custom code to the designated Head or Body integration code sections.

Pros:

• Your customizations stay intact even when the template updates

• You continue receiving automatic updates with new features

• Less maintenance headache in the long run

Cons:

• May require some initial help to migrate complex customizations

How to Keep Your Customizations While Updating 🔄

Step 1: Backup Your Current Code

Before making any changes, save a copy of your custom code. Look for the "Download Template" button in the template code section of your shop designer - this will create a zip file containing all your current template code (including any custom pages you've created). This backup is your safety net!

⚠️ Important heads up! Your downloaded template file should be used as a reference only. Avoid the temptation to copy/paste all your old code into the new template - this breaks things! Instead, we recommend moving your custom modifications to the Integration Code sections whenever possible.

Step 2: Move Customizations to Integration Sections

Whenever possible, place all your custom code (scripts, styles, and tracking codes, font links, etc.) in the Head or Body integration code sections instead of editing the template directly.

Examples of Integration Code

For custom CSS, you’ll place your custom CSS between <style> tags in the Head section like the example below:

<style> /* Your custom styles here */ .product-title { font-family: 'Montserrat', sans-serif; font-size: 24px; color: #3a5a78; } .sale-badge { background-color: #e74c3c; color: white; padding: 5px 10px; border-radius: 4px; } </style>

Similarly, to add a custom Google font, add the font link in the Head section like this:

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">

To add custom JavaScript, the Body section is usually best. Add your code inside <script> tags like this:

<script> // Your custom JavaScript here document.addEventListener('DOMContentLoaded', function() { // Add a special message to product pages if (document.querySelector('.product-page')) { const messageEl = document.createElement('div'); messageEl.className = 'special-announcement'; messageEl.textContent = 'Free shipping on orders over $50!'; document.querySelector('.product-details').appendChild(messageEl); } }); </script>

Step 3: Get Help from AI Tools

Not sure how to move your customizations? AI tools like ChatGPT or Claude can help! Try prompts like:

"I need to move this custom CSS from my template code to the Head integration section. Can you help format it correctly? (paste code)"

or

"How can I convert this template modification into code that will work in the integration section instead? (paste code)"

You can also ask it if it recommends you place the code in the Head or Body section if you're not sure.

Step 4: Compare Old and New Code

If you need to update the template while keeping specific customizations, try using a free diff checker tool (like diffchecker.com) to see what's changed between your customized version and the updated template.

Smart Customization Practices for Sellers 💡

• Use integration sections whenever possible - they're specifically designed for your custom code and won't be overwritten when you update

• Keep detailed notes about what you've customized and why for future reference

• Start small with essential customizations before making major changes

• Consider hiring help for complex customizations that can't be moved to integration sections

Remember: The goal is finding the perfect balance between making your store unique and keeping it technically up-to-date!

Understanding Support for Custom Code 🔍

When you customize your template code:

• Basic integration code questions fall within our standard support

• Extensive template modifications place your store in a custom configuration

• Our team may have limited ability to troubleshoot highly customized templates

• Each custom setup is unique, making standardized support challenging

Finding Community Help for Advanced Customizations

For complex customizations that go beyond basic integration sections:

• Reddit communities dedicated to e-commerce and web development can sometimes provide helpful guidance

• Stack Overflow can be an excellent resource for specific coding questions

• Developer forums related to HTML, CSS, and JavaScript offer specialized support

• Consider hiring a freelance developer for particularly complex implementations. Fiverr and Upwork can be a good place to start if you don't know anyone off hand

If you reach out to our support team about advanced customizations, we'll do our best to help where we can, but please understand that highly customized templates fall outside our standard support scope and may require assistance from external developers.

Happy customizing! 🎨