WordPress integration of a 6-page site including e-commerce store, advanced product filtering, responsive layouts, 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:
We thoroughly discussed the project, emphasizing on the e-commerce functionality. Some of the questions we asked were:
Based on the initial requirements and further discussion we prepared a summary of the project’s requirements:
The time frame for the project was 14 Business Days
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.
Initially we converted the provided Adobe Illustrator files to Adobe Photoshop files ( the so-called “AI to PSD phase” ). Then we sliced all images.
We used media queries to create the tablet and mobile layouts.
Since there were no designs provided for some elements of the site, we improvised and created the responsive layouts at our best judgement.
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.
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.
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.
Let’s create a fully functional e-commerce site!
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.
Then we integrated the e-commerce functionality by using WooCommerce.
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.
Check out the video below the see the whole thing in action
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.
WordPress integration of a one-page multilingual site including responsive work, retina support, custom animations, and parallax effects.
WordPress integration of а two-page site including drag & drop custom page builder, parallax effects, and animations.
