What was the business problem that the client faced?

One of our clients, windfalllumber.com, has dozens of variants of products which differ mainly  in color only. They wanted to improve the search ability on their site so that when a visitor searches for a particular color, all relevant results are returned. Also, the client wanted the search results to display individual variants, not simply their parent product, which is the typical Shopify search result.

Shopify by default only searches the product title and product description. This could cause a problem (no or incomplete results) if , for instance a visitor searches for “green” and the parent product of a “green” variant does not have “green” in the title or product description.

They needed a way to tag their variants according to likely color search keywords. Shopify does not provide the ability to assign tags to their variants, only the parent product. They needed an app to replicate the ability to add tags to variants.

MetaFields Editor by Webify Technologies

MetaFields Editor is a FREE and simple to use app that we frequently use as a general problem solver where Shopify does not allow the ability to add metafields (additional data) to a product or variant within the dashboard.

Within the app (screenshot below) we were able to add variant “tags” to specific variants that are helpful to pinpoint a variant during a search on the site. These are not only likely color keywords, e.g. “red, auburn, etc…” but other descriptive terms for texture, e.g. “smoothe”, or the variants practical use, e.g. “walls”.

Metafields Editor does NOT work with Shopify’s search automatically. Custom coding needed to be added to the search results to search and filter by variant tag. However the alternatives to tagging variants by way  of metafields were far messier and utterly impractical for a variant search to work.

Consider another possible use for this app. In the Shopify dashboard, for any product you can only enter data such as title, description, sku, weight, collection and a few other items. However what if each of your products has an MSDS (material safety) pdf associated with it? Where would you enter the link to each product’s pdf in the dashboard? In the product description? Perhaps, but that’s not ideal.

With the Metafields Editor, you would simply go to the app, select the product (or variant) you wish to add the pdf link to,  and then add a namespace, select a value type, add the key of the metafield- “pdf”, in this example- and the value of the metafield – a url to a pdf file on the server.

In your theme’s templates, metafields values can easily be retrieved using roughly the following liquid syntax: {{ product.metafields.namespace.key }} or {% assign someValue= product.metafields.namespace.key %} or

{{ variant.metafields.namespace.key }}

What other apps did you look at besides?

There are other metafield apps out there such as Product Metafields +   and Metafields2. Both of these are premium yet affordable apps. They could no doubt allow us to solve our variant metafield problem and have a few more custom features than Metafields Editor. However once again, Metafields Editor is free and simple. When we can solve a problem using something that is simpler, we go with simpler.

Did you consider building something custom in the liquid template?

As mentioned above, we did need to considerable coding in our search results template to use these new variant tag metafields to produce relevant results.

In our code, we had to first off, query for all of our stores products. As we ‘looped’ through each product, we had to loop through each product’s variants. With each variant, we checked against the variant’s metafield whose key is “tag”, and then checked to see if the value of that metafield contains the keyword from the user’s search (whatever the user entered into the site’s search box). If there was a match for any particular variant, we displayed the variant’s featured image and title with a link to the parent product’s page with the variant’s id affixed to the url.

This is quite a departure from Shopify’s typical product search, which typically displays only the parent product of variant that matches the search, but not the matching variant itself.

Did the app solve all of the client problems? Any issues once you setup?

In summary, we were able to provide for the customers request: to search for individual variants by way of variant “tags”. The only issue for our client and any of our client’s who’ve used this metafield app, is that they cannot simply add the metafields to the products or variants directly in the Shopify dashboard under the product edit pages; it involves an extra step. Perhaps someday Shopify will finally add the ability for shop owners to do that. Metafields for products and variants do exist behind the scenes, but you have to use an app to add and edit them.

We recently undertook and completed a large project for the City of Bellevue and Puget Sound Energy called Urban Smart Bellevue. The Urban Smart campaign was created to raise awareness about energy conservation for businesses in metropolitan areas. Our ultimate goal for the project was simple: take a design and turn it into a functioning website. However, with most large scale projects, there was a lot of coordination and communication needed to complete the site.

The Design

After we received the design, we created a development site on our server with a fresh WordPress installation and starting chopping up the design files. We went through our normal process of starting from the top down on the design, from there we decided to take a look at unique features of the site that would require extra time to implement.

The Animated Graphic

The most unique feature on the Home page was the third section down labeled, “Energy-saving actions, powerful results.” We took this photo from its .jpg format and sliced each individual piece out into it’s own .png. Then, using some jQuery, we set a scroll point so when the viewer reached a certain point on the page, the images would start sliding into place. To create the sliding effect, we primarily used CSS transitions and absolute positioning. The only Javascript we used was to start the sliding action, set timers on each image to dictate when it would start to slide into place, and then update the absolute positioning to determine the end position of the image. Using the opacity, transition, and absolute positioning properties of CSS is what allowed us to create the fade-in and sliding effects on the images.

The Custom Posts

We added a slideshow plugin and then used a parallax jQuery plugin to add the parallax effect on the image above the footer. The rest of the design for the Home page was pretty straightforward. One of the more complicated aspects of building a site for a client is to create ways for them to easily input new content to the site without needing any coding experience. While WordPress provides a great interface to do this with standard page templates, when you are working with a custom design where  you can’t just place all of the content in a block of text, you need to get a little creative with plugins or your code.

One of the sections on the Urban Smart site where we needed to add some custom content management was in the Upcoming Events and News Feed sections. The content in these sections is updated in one section of the WordPress dashboard and then automatically updates both the Home page as well as the News and Events page. We did this using a custom post type plugin which generates a new tab in the dashboard for News and Upcoming Events. From there, the client can easily input new content and that content is added to the site when they update.

The Stuff Behind the Scenes

(you can skip this section if you aren’t interested in how this is done)

When we use the custom post type plugin. Essentially what we are doing is using the plugin to create a new post in the database with a unique post type. In this case we used it for the Upcoming Events and News Feed post types. Each of the post types has custom fields that are associated with it. So when the data is stored, it is tied to to the specific post type. When you want to output this data, you will need to query the post type by creating an array that stores the post type information and a loop that cycles through the array. Within the array, you can apply parameters to filter the data as needed such as the number of posts that are returned in the array, the ordering of the posts (ASC, DESC, etc.), as well as custom fields within the post type.

Here is an example of an array and the query:

$args = array('post_type'=>'custom-post-type', 'order' => 'ASC', 'posts_per_page' => 3);
query_posts($args);

Once you have created your array and loop, you will need to call the custom field data within the loop using the get_post_meta WordPress function. Here is a sample of code that we used to store the data for the location of an Upcoming Event:

$time = get_post_meta($post->ID, 'wpcf-custom-field-slug', true);

This PHP variable stores the value for the specified custom field which you can then add to your HTML to dynamically output the data as you can see in the Upcoming Events section of the Home page.

The Back Pages

After we finished the design for the Home page, we needed to finish designing the back pages. These pages were, and generally are, less sophisticated and complex than the Home page. However there was still some customization needed to meet the design. As mentioned earlier we needed to use the News and Upcoming Events custom post types to update the content on the  page. We also needed to create some custom fields that would appear on the About Us and the How it Works pages. To make the content easy to update, but still fit the design, we needed to use custom fields for the different sections of the pages. If you look at the About Us page, you can see how the content is split into two section, the top section with the white background, and the lower section with the blue background. In this case, we needed to create two separate content sections in the dashboard where the client can add content for each section. We also needed to create custom page templates for each of the pages since they each have a unique design. With a simple site, you can generally just use a default template for the back pages as they will all look the same structurally and just the content itself changes from day to day. With this site, the design was intended to make each page stand out in its own way. Generally, the more complicated the design, the more you will need to use custom fields to simplify the content management for a non-technical client.

The Responsive Design

As with all of our sites, we needed to make this site responsive. However there was a little more pressure to get the design right with the Urban Smart Bellevue project because we were provided with such a detailed design for the full site, but we weren’t given any information for the responsive design. Luckily, we are rarely given a responsive design so we have a lot of experience converting a desktop design of a site to the mobile version without much instruction. Sometimes when you are reducing the size of the screen, you as a developer have to sacrifice some of the content as it won’t all fit in a mobile design. Fortunately for us, the design we were given was designed in such a way that we were able to fit all of the content into the responsive design. Check the site out on your phone or tablet and see what you think of our responsive design.

The Summary

We managed to finish the site in time for them to launch their campaign. There is always a sense of accomplishment when you finish any project, but this one was a little more special than normal because it was a big project for a big client with a small amount of time to launch the site.

This is the first in a series of articles discussing WordPress and it’s functionality as a content management system.

As a web development firm, we take great pride in creating websites that not only look amazing, but are practical for our clients. We could start with nothing and build the entire site from scratch, and while it would still look amazing, as soon as we handed it over to the client, they would have no idea what to do with it.

WordPress allows us to hand them a product that they can then go in and update and feel that they are actually getting some added value beyond the initial design and build of their site. While there are cases where we might not use WordPress due to a request by the client (such as an e-commerce site), for the most part, we like to use WordPress because of the ease-of-use and huge community of support.

The Dashboard

The WordPress dashboard acts as a kind of “middle-man” between the code and client. For instance, it allows a non-tech user to login and update content on a page without actually having to go into the code files and write some HTML. While WordPress, by default, makes it very easy to navigate and utilize the dashboard, we as developers can take it step further by using custom themes, plugins, and our ability as coders.

Custom Themes

We are able to build custom themes because of our familiarity with WordPress. These custom themes can be tailored to almost any need or design requested by the client. Whether the client has a product list such as Seattle Cedar where the products all need to be categorized and displayed in a certain order, or this RORR site where there are a lot of custom functions and features built in such as a licensing agreement pop-up, we are able to create themes that are tailor-made for our client’s needs.

The pop-up pictured above serves a specific purpose that was requested by the client. They wanted to make sure that none of the downloadable content on a specific page would be clickable without the user first accepting the licensing agreement. To do this we actually used WordPress’ default page template, but we needed to know if we were on a certain page so we modified the template to detect the page using a built-in WordPress function, is_page(). Depending on the page, if we wanted the pop-up to appear, we used an include statement to add the pop-up to the page. Using a JavaScript function, we were able to generate the pop-up using an on-click function. Essentially what it says is when a user clicks one of the links, they are then prompted by the licensing agreement. If they accept, they are able to download the files. If they decline, they are redirected to the home page. The final key component of our function was to make sure that once they accepted the agreement, they wouldn’t have to go back through and accept the agreement again during that browser session if they were to click on another downloadable file.

This is just one example of how we customize a page template within a custom theme. Rarely do we encounter a client that just wants a plain, cookie-cutter website so we use custom themes because they give us the flexibility to meet all of the client’s needs.