{"id":15647543,"url":"https://github.com/lookininward/shopify-demo","last_synced_at":"2026-01-08T06:05:25.612Z","repository":{"id":115752000,"uuid":"187500001","full_name":"lookininward/shopify-demo","owner":"lookininward","description":null,"archived":false,"fork":false,"pushed_at":"2019-05-27T23:20:06.000Z","size":766,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-05T00:46:29.052Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Liquid","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lookininward.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-19T16:17:02.000Z","updated_at":"2019-05-27T23:20:35.000Z","dependencies_parsed_at":"2023-07-02T20:47:42.097Z","dependency_job_id":null,"html_url":"https://github.com/lookininward/shopify-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lookininward%2Fshopify-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lookininward%2Fshopify-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lookininward%2Fshopify-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lookininward%2Fshopify-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lookininward","download_url":"https://codeload.github.com/lookininward/shopify-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246257934,"owners_count":20748483,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-03T12:19:48.723Z","updated_at":"2026-01-08T06:05:25.534Z","avatar_url":"https://github.com/lookininward.png","language":"Liquid","funding_links":[],"categories":[],"sub_categories":[],"readme":"### Application: Plus Support Front End Developer\n###### By: Vinoth Michael Xavier\n\n\n#### Step 1. Create alternative product template that allows personalization\n\nCreated a new file: `sections/product-customizable-template.liquid`.\n\nAdded custom form fields for:\n* custom text engraving to product (optional line item)\n* option to wrap products individually (required line item)\n\nThen applied the new template to products.\n\n---\n\nNext, updated settings in: `config/settings_schema.json`\n\nThese settings allow merchants to configure:\n- custom text engraving to product\n  - toggle on/off\n  - set maxlength of engraving text\n\n- option to wrap products individually\n  - toggle on/off\n  - set custom message for customers\n\n---\n\n#### 2. Create order form with Shopify's AJAX API\nCreated a new file: `templates/page.order-form.liquid`.\nCreated new page called 'Order' in Shopify Admin and selected new template.\nAdded new menu item in navigation to go directly to order form page.\n\nThe order form allows customers to:\n- add multiple products to cart at once\n- select options (including line item properties), quantity for each product\n- on click to go directly to checkout\n\nThe order form uses jQuery to:\n- watch and validate any changes to quantity input\n- watch and validate any changes to engraving input\n- validate number of products selected\n- create and display notifications for errors and loading state\n- collect form data, build payloads, and make requests synchronously (API requirement for variants)\n- upon successful submission, redirect to the checkout page\n\n---\n\n#### 3. How results were achieved, merchant's guide for functionality\nThe steps above are for developers to understand the path taken to build this functionality. In scenarios where we make changes to an existing codebase, it's desirable to re-use as much of the assets as possible.\n\nProduct data can be accessed in the liquid template, so use liquid to display product data. jQuery is an existing asset, so use jQuery to handle the form validation and submission. There are existing DOM patterns and CSS classes, so reuse as much as possible, only adding something new if an equivalent doesn't already exist.\n\n---\n\n#### Instruction for Merchants:\n\nHi there, thank you so much for using our custom theme! Itching to try out the new features? Head on over to the [Theme](https://devs-beyond-borders.myshopify.com/admin/themes) page in the Store Admin and click 'Customize'.\nThen click on 'Theme Settings' and you'll see the two new options we've recently added:\n- Product Packaging\n- Custom Engraving\n\n**Product Packaging**:\nToggling this setting on allows customers to opt-in for individually wrapped packages. We hope to help bring down your environmental footprint and packaging costs! This is a required option for customers when turned on. You can also add a custom message to your users to provide more information about this opt-in packaging option you are offering.\n\n\n**Custom Engraving**: Toggling this setting on allows customers to add a custom engraving text up to a character limit of the merchant's choosing. You can allow for text up to 100 characters in length. This is not a required input field.\n\nThese options, when enabled, will appear on the product and bulk order pages. Selected options will be displayed in the cart and checkout pages.\n\n---\n\n#### References\n- [Get customization information for products](https://help.shopify.com/en/themes/customization/products/features/get-customization-information-for-products)\n- [Configuring theme settings](https://help.shopify.com/en/themes/development/theme-editor/settings-schema)\n- [Add an order form to your store](https://help.shopify.com/en/themes/customization/forms/add-order-form)\n- [Add, remove, or edit menu items in your online store](https://help.shopify.com/en/manual/sell-online/online-store/menus-and-links/editing-menus)\n- [Add, remove, or edit pages](https://help.shopify.com/en/manual/sell-online/online-store/pages)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flookininward%2Fshopify-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flookininward%2Fshopify-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flookininward%2Fshopify-demo/lists"}