How I hacked Wix to create Microcopy Inspirations

Coding no longer needed to build a good website

Sridhar Rajendran
4 min readAug 27, 2018
Unclear website copy

Ever encountered a horrible copy like this and didn’t know what to do? I sure have a couple of times.

But then I chuckle when I see something like this.

Good microcopy

Words can engage, elevate or infuriate people depending on how they are used. As a designer I understand the importance of copy on websites and mobile apps.

Design patterns have made life easy for designers. Knowing when and how to use a pattern saves a lot of time. Sites like Pttrns.com curate the good examples of interfaces and act as source of inspirations. Developers have GitHub to find re-usable code libraries.

But there are not many options for copywriters. The current options are browsing Pinterest and Google image search to find examples of copy. So it got me thinking. And Microcopy Inspirations was born.

Before building an entire website I wanted to assess the product-market fit. So the first Minimum Viable Product (MVP) started as a Medium Publication. I collected a few examples of good microcopy and posted one each day on Medium. At the end of two weeks, I could see some engagement in the comments section and on Twitter. Phase 2 begins now.

Stats on Medium publication

Wix is my preferred site for website development. I used it for developing my portfolio siteand in love with the platform. I wanted the design to be simple and clean. Pttrns.com acted as a reference to what I wanted to build. And a self-imposed criteria of minimal to no code.

The developer in me played around with the various components in Wix and figured out a hack. Which sites have a list of items and filters?

ECOMMERCE!

I hit gold when I discovered the Wix Store app. The beauty of it — you can build an entire eCommerce website with ZERO coding. I could edit the description of products and tweak the layout to display only the title and hide all the other field associated with a product such as price, size, colour, etc. Replace the stock images with screenshots of copy and all set.

However there was one BIG snag.

There can be only 9 categories of filters. Anything beyond that involved coding. Over my dead body!

Image credit: GIPHY

I spent an hour mulling my options. I even considered learning to work in the Wix code editor. And then a light bulb went on. There are 3 important components in the site

  • Listing of all items
  • Individual page for each item
  • Filters

The first two worked fine with Wix Stores. The problem was the default filters — so I ditched it. I used a couple of standard hyperlinks and set each to a different page.

On each page, I used the products page component and filtered the category I wanted to display.

Voila now we have a fully functioning site.

Image credit: GIPHY

Sure it isn’t the best implementation but it gets the job done. And the best part is no coding. I don’t think the designers at Wix would have envisioned someone using their eCommerce app to build a site such as this.

The goal of Microcopy Inspirations is to serve as a source of inspiration for copywriters/UX writers. It’s time designers and writers got together to create some kick-ass interfaces.

Originally published at www.sridhar.design.

--

--