"i only speak liquid" #5: Custom Product Options Without An App

Hey all 👋!

Welcome to 'i_only_speak_liquid', where active Shopify developers like me (Anthony) share learnings we face daily. This is my first edit of 'i_only_speak_liquid', and there will be more in the coming weeks, excited to be here & contribute!

PS: I'm an expert on Storetasker and work with some pretty great clients on the platform, alongside some external clients in Australia. Storetasker allows me the freedom to scale up and down my workload to suit my business. Whether you're after a full-time workload, or a part-time gig. Apply here if you want in.

What I’ve been thinking about:

Online Store 2.0 and JSON templates have been around for a little while now but... why don't more themes let merchants add custom product options / input fields to the Product Form?

I've worked with a number of clients that were reliant on apps to add elements as simple as a Text Field to collect Names for Personalisation, or a Text area Field to collect Gift Messages.

Using JSON templates in Online Store 2.0, you can very simply build out additional Blocks inside the Product Information Section. This empowers merchants to set up templates with custom options as they need.

It's pretty simple to add a new Block to main-product.liquid as part of the Product Form - right where all the other Case / When statements are.. Let's make the new block a Text Input.

And then we add our schema:

And now we have a Block for a Text Input field on the Product page. You can easily extend this functionality to Text Areas, Checkboxes, and other input types so Merchants can build basic functionality for their customisable products, without an app.

3 links you can’t miss:

• Shopify Unite: Unite is back and the tickets went on sale last week. If this is the first you've heard about it, chances are you missed the chance to buy tickets, but still worth giving the waitlist a shot. If you're attending Melbourne, let me know and we'll meet up for a drink!

• Shopify UI Elements Generator: A handy tool to generate liquid for Line Item Properties, Cart Attributes and more. I have horrible memory so this comes in handy whenever I need a quick copy and paste.

• Thingtesting: A great (and quick) reference to find modern DTC brands that mostly have great looking sites and UX. Use them as inspo for your clients and builds.

One app I like:

Matrixify by ITissible

My favourite import/export tool for Shopify. This recommendation comes from my eComm Manager days and is something I still use and teach to clients that work with larger catalogues / complex product data.

• Export whatever you need in bulk

  • Almost any field for Products, Pages, Collections and more

• Manipulate all your data in gSheets

  • So you can use all your VLOOKUPs and ensure your data is accurate and on point.

• Reimport it

  • Update/merge with the existing data, create new data, or delete it.

Matrixify is super powerful and lets you control every aspect of the import/export process. It's 100x better than the native import/export functionality. No affiliation here, just a massive, massive fan.

One learning as a freelancer:

Learn to tease the source of the problem out of your clients, rather than just actioning your clients solutions.

Clients often come to you with a solution they need actioned, without fully understanding the problem they're solving, or the range of tools available to them to solve the problem.

Your role as a freelance developer is part Product Owner too.

Teasing the problem out of your client, and then designing a solution and its requirements with your client is hugely important. It will often result in quicker development time with less revisions (and happier clients).

Hope you enjoyed my first edition. If you've got any feedback, or better ways to do the things I touched on, let me know your thoughts!

Speak soon,

AV