Styling By Jodi – Homepage

My mother, a cosmetologist of many years, recently moved back to my area, and started back to work. In the past, she used to work off of a paper appointment book, and only accepted cash or check payments. But this is 2018, and as the local web design firm’s advertisements like to say “If you don’t have a website, you don’t exist.” So, for both my own learning, and to help her expand her clientele, I’ve taken on the task of applying technology to her trade.

The first step was enabling card payments. For this we chose Square; it’s a well known organization, with a good track record, and the fees are reasonable. Square is actually fairly straightforward to setup; add some items/services, plug in a reader, and start swiping. What I didn’t realize is that Square offers full POS functionality, with services like appointment management and even gift cards. But, these were accessible via one off links. So, rather than have her spam links on Facebook all day, and hope someone uses them, we took it a step further, and created a webpage for her business.

Having used WordPress for my portfolio, I stuck to it for her site as well. Ran the basic install, let her pick a theme, and then took to customization. The challenge here lies with the theme she chose; many of its options are not configurable (like the color of the tagline under her title, which was bright pink). To resolve this required more than just the usually Additional CSS option in WordPress; some of the theme files had to be modified to suit (the primary style.css file for instance).

Once we had a theme figured out, adding action-ability to the site was my primary focus (I’ll let her manage the content via WordPress posts). As designed, the site offers a button to book appointments, and an email link. But, I had entries for address and phone number, as well as functionality for Gift Cards and Appointment booking from Square, so I wanted to enable all of this.

Obviously, WordPress doesn’t allow you to inject HTML into its fields (I first tried adding an anchor with an href that way). To enable links on the address and phone number, I had to edit the php files for the header and footer manually. The only challenge to this was finding the correct files for each, and finding the entries. I ended up adding anchors with hrefs to the address (pointing to the Google Maps entry for the sal0n she works at), and the phone number (a tel href, mostly for mobile devices).

Square, thankfully, provides code to embed their appointment software, but not their gift card ordering site (which required a standard link). In the end, I embedded the appointment booking into a WordPress page (allowing us to keep the same design), and linked to the gift card ordering site from the homepage.

Having done all that, customers can now reach her by phone or email directly from the site, get directions without having to open a new page, buy gift cards, or browse her services and appointment openings from a single source. That seems pretty solid for my first attempt at something like this. The only thing lacking is a little graphic design work to add logos and such (but sadly, I’m not much of an artist).

 

One thought to “New Webpage: Focusing on Action-ability.”

  • Tylor

    More recently some of the features have expired, due to requiring subscriptions, and a lack of action on her part (can’t build a site without content and promotion). I’m still working on this with her; we’ll see where this goes.

Leave a comment