Ecommerce Shopify WordPress Discussion

Shopify JSON formatted template code errors issue

I've been working on a product customization widget code for a client's e-commerce website that I previously created in HTML, which worked well, but now needs to match the JSON code to align with his newly installed website's template format. I keep getting certain code line error messages from Shopify in the edit code admin mode, and despite my days of efforts to fix it, Shopify's error notes don't specify what the actual errors are, which has made it difficult. If anyone more JSON code/Shopify template 'North' knowledgeable has a few minutes to direct message me here, I would be so appreciative if I could respond with the snippet of code I've been working with, unsuccessfully so far, and get your direct feedback in case you see the errors I can't make out. Thank you! First I'll provide you with the original HTML code that is located above the original theme for my client's e-commerce shopify website via index.liquid page - Then, I'll provide the original HTML code I made that worked well after creating it and saving it to a new 'section' then entering the 'section code' into the 'index.liquid' template within my client's original theme, which was a free template offered by Shopify for new e-commerce paid members called 'Boundless'. Then I'll paste in what is the end HTML code for that same index.liquid template for the boundless theme website. Next, what I'll paste is the JSON code I tried to create (as I'm JSON-new) and put into the index.json template the same way, not really knowing where to insert it though within certain pre-created code (look for the customization chart section of code input as I am copy/pasting the entire code from this index.json page right now for reference, unlike how I separated sections of HTML code for prior theme website index.html code page above). Lastly, I'll paste what I also need help with - I created a product-customization.liqud page in the 'sections' part of admin edit code tool and this is the code that isn't working or showing up at all. <!-- /templates/index.liquid --> {% comment %} Define your section markup, using `section.settings.[setting_name]` to access specific settings. * Sections do not have access to global liquid variables. {% endcomment %} {% assign slider_enabled = true %} {% section 'slideshow' %} <div class="hero__header"> <div class="action-area"> {% include 'action-bar' %} </div> </div> </div> {{ content_for_index }} {% section 'customization-chart' %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* Add your custom styling here */ body { margin: 0; font-family: 'YourFont', sans-serif; /* Replace 'YourFont' with your desired font */ } #buy-button-container { display: flex; justify-content: center; align-items: center; height: 100vh; } </style> </head> <body> <div id="buy-button-container"> <div id='product-component-1697576261507'></div> <script type="text/javascript"> /*<![CDATA[*/ (function () { var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js'; if (window.ShopifyBuy) { if (window.ShopifyBuy.UI) { ShopifyBuyInit(); } else { loadScript(); } } else { loadScript(); } function loadScript() { var script = document.createElement('script'); script.async = true; script.src = scriptURL; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script); script.onload = ShopifyBuyInit; } function ShopifyBuyInit() { var client = ShopifyBuy.buildClient({ domain: 'my-city-teez.myshopify.com', storefrontAccessToken: 'cd5e428dae687c2fe371e58ddb1ca7f8', }); ShopifyBuy.UI.onReady(client).then(function (ui) { ui.createComponent('product', { id: '7301883003035', node: document.getElementById('product-component-1697576261507'), moneyFormat: '%24%7B%7Bamount%7D%7D', options: { /* Your options here */ }, }); }); } })(); /*]]>*/ </script> </div> </body> </html> <!-- /templates/index.liquid --> {% comment %} Define your section markup, using `section.settings.[setting_name]` to access specific settings. * Sections do not have access to global liquid variables. {% endcomment %} {% assign slider_enabled = true %} {% section 'slideshow' %} <div class="hero__header"> <div class="action-area"> {% include 'action-bar' %} </div> </div> </div> {{ content_for_index }} {% section 'customization-chart' %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* Add your custom styling here */ body { margin: 0; font-family: 'YourFont', sans-serif; /* Replace 'YourFont' with your desired font */ } #buy-button-container { display: flex; justify-content: center; align-items: center; height: 100vh; } </style> </head> <body> <div id="buy-button-container"> <div id='product-component-1697576261507'></div> <script type="text/javascript"> /*<![CDATA[*/ (function () { var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js'; if (window.ShopifyBuy) { if (window.ShopifyBuy.UI) { ShopifyBuyInit(); } else { loadScript(); } } else { loadScript(); } function loadScript() { var script = document.createElement('script'); script.async = true; script.src = scriptURL; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script); script.onload = ShopifyBuyInit; } function ShopifyBuyInit() { var client = ShopifyBuy.buildClient({ domain: 'my-city-teez.myshopify.com', storefrontAccessToken: 'cd5e428dae687c2fe371e58ddb1ca7f8', }); ShopifyBuy.UI.onReady(client).then(function (ui) { ui.createComponent('product', { id: '7301883003035', node: document.getElementById('product-component-1697576261507'), moneyFormat: '%24%7B%7Bamount%7D%7D', options: { /* Your options here */ }, }); }); } })(); /*]]>*/ </script> </div> </body> </html> {% schema %} { "name": "Section name", "settings": [] } {% endschema %} {% stylesheet %} {% endstylesheet %} { "widget": { "title": "Customize Your T-Shirt or Hat", "thumbnails": { "productType": { "T-Shirt": "path/to/tshirt-thumbnail.jpg", "Hat": "path/to/hat-thumbnail.jpg" }, "color": { "Red": "path/to/red-thumbnail.jpg", "Blue": "path/to/blue-thumbnail.jpg", "Green": "path/to/green-thumbnail.jpg" }, "logo": { "Logo 1": "path/to/logo1-thumbnail.jpg", "Logo 2": "path/to/logo2-thumbnail.jpg", "Logo 3": "path/to/logo3-thumbnail.jpg" } }, "options": [ { "label": "Text", "type": "text", "id": "text-input", "placeholder": "Enter your text" }, { "label": "Color", "type": "select", "id": "color-select", "options": ["Red", "Blue", "Green"] }, { "label": "Product Type", "type": "select", "id": "product-type-select", "options": ["T-Shirt", "Hat"] }, { "label": "Logo", "type": "select", "id": "logo-select", "options": ["Logo 1", "Logo 2", "Logo 3"] } // Add more customization options as needed ], "button": { "label": "Shop Now", "id": "shop-now-button" } } } <div id="customization-widget"> <h2>{{ widget.title }}</h2> <!-- Add logic to display thumbnails based on selected options --> {% for type in widget.thumbnails.productType %} <img src="{{ widget.thumbnails.productType[type] }}" alt="{{ type }} Thumbnail"> {% endfor %} <!-- Add logic to generate dropdowns --> {% for option in widget.options %} {% if option.type == "select" %} <label for="{{ option.id }}">{{ option.label }}:</label> <select id="{{ option.id }}"> {% for item in option.options %} <option value="{{ item }}">{{ item }}</option> {% endfor %} </select> {% endif %} {% endfor %} <button id="{{ widget.button.id }}">{{ widget.button.label }}</button> </div> {% javascript %} {% endjavascript %}
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.