Hurt Koszulkowo
Hurt.koszulkowo.com is a Polish wholesale e-commerce website that sells mostly blouses and t-shirts. They have various versions of upper body clothes, distinguished by text and style.
Thanks to successful development of first detail e-commerce website (koszulkowo.pl), BG Sp. z o.o. Sp.K (website owner) asked Pagepro for help with building the wholesale website - hurt.koszulkowo.pl.
Requirements
Hurt.koszulkowo.pl needed to be adjusted especially for companies, which look for wholesalers. Therefore, we had to deliver the tool, where they can publish the products and collect payments from customers, putting emphasis on B2B clients.
The most important feature was a tool for sending detailed inquiry. However, our overall goal was to attract clients attention, so we needed to deliver modern looking and interactive website.
Our services included:
- PSD to HTML conversion
- WordPress Custom Theme development
- Custom E-commerce System development
- Cross browser & device testing
- WPML plugin implementation
- WP All Import plugin implementation
- Yoast Seo plugin implementation
- Advanced Custom Fields(ACF) PRO implementation
- Pipedrive integration
- Google Analytics integration
- MailChimp integration
The Cooperation
BG Sp. z o.o. Sp.K was actively participating in development process of the website. Becoming wholesaler was quite big change for them. Therefore, to make sure that website features meet new business model requirements, we were working closely together.
- HTML5
- CSS3
- SASS
- Adobe Photoshop
- SVG Sprites
- jQuery
- jQuery
- Webpack
- GULP
- BrowserStack
- WordPress
- Advanced Custom Fields PRO
Should we get it done?
Let's talk about you now!
Tell us about your challenge, and let's get the ball rolling.
Time frame
Whole project took us 6 weeks.
Step 1 KICK OFF
Firstly, we needed to check if we have all needed materials for coding. Therefore as the first step, Bartosz (UX/UI Designer) has started preparation of the design, keeping the style of koszulkowo.pl website.
He delivered PSD & JPG design files, SVG icons, basic requirements and animation examples on different websites. Once initial design was created we passed it to client evaluation. It’s important for us that client always takes part in our design creation process and we frequently make sure that client accepts every template or part of a design.
Step 2 Management
The project was actually split into 2 stages - HTML/CSS building and Custom E-commerce System on WordPress platform development.
Front-end Development Stage
We always prefer to split front-end development from other phases because it is much faster and has less potential risks of bugs appearing. Especially, when we could use our dedicated tool for HTML&CSS - SASS starter (LibSASSerPlate).
Custom E-commerce System Stage
After preparing HTML & CSS we've planned to implement static files into Custom E-commerce System.
Step 3 HTML coding
After planning project architecture we always start with building HTML. We are making sure if code is split into tiny, easy to reuse HTML components.
BEM Methodology
BEM (Block, Element, Modifier) is an open source technology for developing websites that need to be created quickly and maintained over many years. BEM is used in the front-end development of all Pagepro services.
Step 4 (S)CSS coding
SCSS structure needs to be well-designed and should be refactored during project life time. Using easy to understand variables for colors and sizes is a must have. It makes code reusable and easier to understand for other developers.
Step 5 Responsive version
We used Gridle Breakpoints to create the tablet and mobile layouts.
Step 6 First Q&A Stage
Before starting development of Custom E-commerce System on WordPress (Back-End works) we always do Q&A stage first. At this stage we're testing the website on all modern browsers.
Our Q&A assistant is making sure that everything looks the way designer wanted and works smoothly on all devices. We're doing testing on real devices and on emulated versions using BrowserStack.
This stage is always conducted before WordPress integration, because it is much easier and faster to do bug fixes on static HTML & CSS templates.
Step 7 Custom E-commerce System Development
During the Custom E-commerce System & WordPress integration we took the static HTML files and created the backbone of the WordPress site. We're using ACF Pro as a background for modules with dedicated content managing settings.
We've launched the website on test server with some pre populated content just to verify if everything is editable and displayed as it should.
Step 8 PRODUCTS IMPORTING & TUTORIAL CALL
After we had made sure that everything is working properly, we face quite a challenge with products import from XLS file. Despite the fact that we used “WP All Import” external plugin, we needed to overwrite great part of it.
After successful implementation, we always make tutorial call with screen-sharing during which we show client how to manage content on created website.
Step 9 FINAL Q&A AND UAT
In every E-commerce project, we put emphasis on testing site, taking on consideration things like: page loading speed, displaying in different devices and on modern browsers.
We paid special attention to the way each section of the site could be managed. We tested the functionality and installed the project on our staging server for a client review.
Have a similar case? Use our experience!
Talk to our expert and see what we can to do push your project further.
