Creating customizable products in your Shopify store not only increase your customer satisfaction, it also increases your conversion rate. Here is a method to add custom options for your Shopify product and convert it into personalized product - Go to Shopify store page and search for "Advanced Product Customizer" app or you can directly the the Shopify app page by clicking on this link Advanced Product Customizer . Install Advanced Product Customizer app for free in your Shopify store From the application dashboard, enable to app embed block to complete the installation process Click "Product Custom Options" From the Shopify products list, select the product on which you want to add custom options. Advanced Product Customizer offers Image Swatch, Color Swatch, Text box, File Upload, Radio, Checkbox, Date Picker and more. Here is the a demo video for adding custom option for a Shopify product -
Here is the script to load json array-
<head> <title>Page Title</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <div id="images">test</div> </body>
var dictionary =[ {"id":"0","name":"ABC"}, {"id":"1","name":"DEF"} , {"id":"2","name":"PQR"}, {"id":"3","name":"xyz", "name2":"xyz2"} ]; $(function (){ for (var ke in dictionary ) { if (dictionary.hasOwnProperty(ke)) { var id = dictionary [ke].id; var name = dictionary [ke].name; //create a anchor element using id. //when user clicks on this id open data //related to this $('#images').append('<br/><div id="' +id+'" data-name="'+name+'">'+id+'</div>'); } } $('#images').on('click', 'div', function(e){ //document.write (e); //document.write ( e.target.attr('name')docum var values = getValues (e.target.id ); var count = 0; for (var key in values) { if (values.hasOwnProperty(key)) { if(count > 0) { document.write (values[key]);} count++; } } }); }); function getValues(id){ for (var ke in dictionary ) { if (dictionary.hasOwnProperty(ke)) { if(id==dictionary [ke].id) return dictionary [ke]; } } }
Comments
Post a Comment