Project Case Study

Sweet Blinds WordPress E-Commerce

WordPress integration of a 6-page site including e-commerce store, advanced product filtering, responsive layouts, retina support.

  • Custom WordPress Theme
  • WooCommerce Store
  • Advaced Product Filtering
  • Color Variations
  • Gravity forms
  • Retina support


We were provided with Adobe Illustrator files and shared in Dropbox assets. There were 3 layered AI files - for desktop, tablet and mobile view.



Our client requested a responsive e-commerce and full retina-quality WordPress site. The main requirements were:

  • E-Commerce functionality
  • Advanced product filtering
  • Color variations
  • Templates: Home, About, Blog, Blog Detail, Shop, Product.
  • Responsive layouts
  • Manageable from the WordPress administration sections

Clearing up the details

We thoroughly discussed the project, emphasizing on the e-commerce functionality. Some of the questions we asked were:

  • "Is there an existing site for 'Sweet Blinds' or is this a new company?"
  • "Can we expect a list of the products, categories or will they be added upon completing the project?"
  • "Which payment gateway will be used?"
  • "Some of the functionality requires additional premium plugins. Can we have them provided?"
  • "Can we style the e-commerce pages without available designs at our best judgement?"

And we started...

The time frame for the project was 14 Business Days

Step 1


The new project was submitted in our client area. Scott ( project manager ) reviewed all information and discussed the details with our client. The specific e-commerce functionality was additionally discussed with our lead programmers.

Step 2

AI to PSD, Slicing

Initially we converted the provided Adobe Illustrator files to Adobe Photoshop files ( the so-called “AI to PSD phase” ). Then we sliced all images.

Step 3

HTML Coding

After slicing the images we created the HTML markup by following our coding standards. We paid special attention to the specific WooCommece layouts for the products, product single and checkout templates..

Step 4

CSS Coding

The next phase was the creation of the CSS styles.

Responsive version
Responsive version
Step 5

Responsive version

We used media queries to create the tablet and mobile layouts.

Project preview
Project preview

Since there were no designs provided for some elements of the site, we improvised and created the responsive layouts at our best judgement.

Step 6

E-Commerce styles & misc

Since the plugin WooCommerce that we integrated contained specific HTML markup, firstly we had to create the WordPress backbone, then set the WooCommerce templates, and finally styled them in compliance with the provided designs.

Project preview

To make the feedback and QA process smoother, we used a bug tracking tool called Bugherd. It really helped our client to add notes and request tweaks in an intuitive way.

Step 7

Fine tuning

We did a quality assurance of all pages, then tested the site on mobile and tablet devices. The front-end phase of the project was completed.

We paid attention to both the appearance and the quality of the code, so that it met our coding standards. Finally, we sent a preview of the static HTML files to our client.

Project preview
The static site is ready!

WordPress integration

Let’s create a fully functional e-commerce site!

Wordpress integration
Step 8

Base WordPress integration and blog

During the initial WordPress integration we took the static HTML files and created the backbone of the WordPress site. The header, footer, default templates ( archive, 404, search results ) and blog templates ( blog and blog post ) were finished.

Custom fields
Step 9

WooCommerce integration

Then we integrated the e-commerce functionality by using WooCommerce.

Additionally, our client requested a custom functionality for advanced product filtering and custom color variations.

Products population and payment gateway setup

As there were just a few products in the provided design files we additionally created sample products so that we could test the filtering functionality, color variations and e-commerce templates.

We installed the Beanstream Payment Gateway plugin and enabled this payment method on the site.

Step 10

Final Touches and QA

We tested the overall site functionality and paid special attention to the e-commerce functionality and shopping cart. After everything fulfilled the project requirements and passed our QA tests we installed the project on our staging server for a client’s review.


The project is ready!

Check out the video below the see the whole thing in action

Project preview

All the hard work is done

We created an archive with the source files and uploaded the project to our preview server. Our client received a responsive e-commerce WordPress site.


Project Estimate

14 Business Days
Previous / ArtSchool

WordPress integration of a one-page multilingual site including responsive work, retina support, custom animations, and parallax effects.

  • Custom WordPress Theme
  • Multilingual Support
  • Responsive
  • Custom Animations
  • Content transfer
  • Gallery with popups
  • Parallax
Next / The Train Station

WordPress integration of а two-page site including drag & drop custom page builder, parallax effects, and animations.

  • Custom WordPress Theme
  • Page Builder with Sections
  • Responsive
  • Custom Animations
  • Google Maps
Project preview

This Is Our Web Let’s shape it together!

© htmlBoutique 2008-2016. All Rights Reserved