front page of nine golden swans website

Case Study: Dazzling Jewelry Shop Site Redesign

I was approached by a gemologist and jewelry designer who already had a great WordPress site that had been running for years. It was a fairly simple yet nice-looking jewelry shop site, based on the Noir theme, which is optimized for WooCommerce. Here’s how the front page of her site looked at the time:

screen capture of original nine golden swans website

She wanted to bring her site to the next level by making the front page reflect the beauty of her custom jewelry, with a series of photos and shop thumbnails. She also wanted to significantly change the topbar, header and nav menu, adding a search bar and putting the logo in line with the nav.

The site speed was also a bit slow, so naturally she wanted to see if I could make it run faster.

Jessica gave me a mockup PDF to work from, which I love because while it can be a challenge to execute everything well, there was no mystery about what she wanted.

And what about those challenges? Here’s how it went…

Challenges

The first thing I did was dive into her site and see what was what. I headed for the customizer, because with a lot of themes these days, there’s a ton of stuff you can change just by choosing options there. Unfortunately, there wasn’t much that she wanted to accomplish that I could simply change in the customizer. I suppose if there had been, she wouldn’t have needed my help.

The next step was to look at the theme files and see if there would be a relatively easy way to make changes to the header and nav menu by editing the code. I could see that there were things I could do, but before creating a child theme and changing the code, I wanted to explore a third option: Elementor.

Elementor: not for every client

If you’re not familiar, Elementor is a powerful page builder for WordPress. Not only can you create WYSIWIG pages, you can create custom headers, footers, sidebars and essentially build a new theme using templates. Jessica was concerned that after I used Elementor, she wouldn’t be able to add products, posts and pages the way she used to.

It was super important for her to have her site remain exactly as it was, aside from the new front page and nav menu. I had to figure out another solution, which was option 2: Make a child theme and edit the code.

The other challenge was to layout her front page without Elementor. While I’ve become adept at doing layout with Gutenberg, it’s not a powerful WYSIWIG page builder (yet).

Another fly in the ointment was that the theme hadn’t been updated in some time. I was getting a pesky notification from WooCommerce that it would need to be updated to run the latest version of the plugin.

Solutions

The first thing I did was contact the theme author to see if there were any updates on the horizon. He told me that unless there were bugs, he had no plans to update. I thought that the WooCommerce issue was a bit of a bug, but I didn’t quibble. However, I noticed that WC was giving me instructions for how to update WooCommerce within the theme, to make it updatable. It turns out that I only had to download some PHP from WooCommerce and insert it into the theme’s template files. Vóila! Updated.

CSS for flavor

The next thing I wanted to tackle was getting the front page to look like Jessica’s mockup. I had everything in place in the editor, but cover images didn’t have the right text formatting, columns were wonky, and the testimonial plugin was not behaving nicely. CSS to the rescue.

I created classes for just about every block on the page. Then I went to the customizer to apply CSS styling to everything. I think it may be the longest Additional CSS section I’ve ever written. Normally, I would have put it into the style.css file, but I knew that Jessica would want to tweak things later herself.

The customizer is the best solution for that, so in it went.

Customizer showing CSS code

The biggest challenge I faced was reconstructing the topbar and nav menu. I won’t get into the nitty gritty details of the PHP code here, but by creating a child theme and tweaking the template files, I was able to make everything happen.

Mobile first?

The last step was to make sure everything looked good on mobile. I say last step, but it’s something we discussed early on and it was on top of my mind while I was designing the new site. Making a site mobile responsive is tricky. These days, you really need to think mobile first. At the same time, you need to make sure things still look great on the desktop, using all that nice real estate. It’s a weird balancing act. Again, CSS to the rescue.

A few weeks after launch, Jessica had added new products and pages, but the site was suddenly looking very… wrong:

Her official new product launch was supposed to be happening in days, and suddenly the site looked like it was 1996. Ultimately I found the culprit: A caching plugin that had gone rogue. It had even messed with the .htaccess file. With the plugin deleted and the lingering data erased, things were back to normal.

Results

The site turned out fantastic. Jessica was able to edit the front page herself, adding in her new products and beautiful images of her jewelry. You can check out her site at https://ninegoldenswans.com. Read what she had to say about working with me.

Screen capture of nine golden swans redesigned website front page
Most of the front page…

Learn more!

Sign up to receive my latest website tips directly in your inbox.

I’ll never send you spam or share your email address.
Find out more in our Privacy Policy.


Posted

in

by

Tags:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *