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 %}
Turbo Multi-language Translator
Make the better internet purchasing globaly
Turbosify SEO Speed Booster
5.0 (7)
•
Free plan available
•
Free plan available
Get better conversions by improving store loading speed
Installed
Turbo Multi-language Chat - AI Customer service in one hand
- Shopify: Automatic Discount Detail On Product Detail Page
- Megamenu implementation on Shopify Store. CSS gets messed up
- how to update total on click plus and minus button shopify cart page
- Many issues trying to register webhooks for customs shopify app. Was working till it wasnt
- How to get content of the home page in Shopify Storefront API?
