How to take advantage of Shopify's Cart Drawer and Line Item Properties

What I’ve been thinking about:

Line item properties are custom form fields that you can add to the product page, allowing customers to make choices or add information about a product. For example, if you offer product engraving, then you can use line item properties to let customers enter the text that they want engraved on the product. It allows merchants to collect custom information for each item added to the cart.

Last week, one client from Australia wanted their customers to attach an image to customize their item before adding it to the cart. In addition, they needed to change the user's instructions for each product they wish to enable this file upload input.

We thought the best way to do this would be to create a custom metafield definition. In doing so, if the merchant added a metafield definition on a product, that input field with file upload instructions would show up on the front-end:

‍

We also needed to change the encoding of the form to allow files to be sent through a POST:

This worked well. But only when JavaScript was disabled. Unfortunately, this approach failed to add the file upload line property to the cart with the drawer cart enabled.

We looked into the code and found that because the form submit data was serialised via AJAX, it did not send the file upload. The Dawn theme had the same issue in a previous version.

To solve for that, we can use the FormData object. But in order to use it with the jQuery AJAX call, you must set some additional properties:

One of those cases which can make you waste hours, but you can fix them in less than 10 minutes!

3 links you can’t miss:

• Liquid Ajax Cart. It’s not new, but as I talked about the cart, I wanted to share it. It’s a fantastic library cart using Bundled Rendering. So easy to use!
• Google Local Inventory Sync. New release: Now available in the Shopify Google channel: Enable local product inventory sync to help merchant products get discovered in Google search results.
• Partners Town Hall. Don’t miss the Town Hall of this June 28th. Let’s see what they have to offer!

One app I like:

Plugin by Blarlo

I like the translation apps that use the GraphQL Admin API from Shopify. Even though front-end translation apps like Weglot usually translate your content faster, I don’t think they are a good option for multilingual stores.

Instead I’ve been recommending my clients to use translation apps like Transcy. But lately, we’ve had performance issues or I found them to miss essential features such as “Glossary”.

I have now a better solution: Plugin. It has a glossary feature, and I love that the team behind it is a well-known translation agency that has Shopify as a client: Blarlo. This app enables you to translate your website with vetted human translators.