SHOPIFY
FRONT-END DEVELOPMENT

THEME CUSTOMIZATIONSUI/UX EXPERIENCE IMPROVEMENTSUI/UIX to HTML

Background pictures displaying sites actually worked on

UNDERPROTECTION

PRODUCT SIZE GUIDE

UI/UIX | Fullfilment Optimization

PLATFORM Shopify CODING HTML, SCSS, JavaScript
Commissioned by Eight One Media, Denmark
Visit website →

Why

The size guide was created by their designers. They needed to have it on the site but didnt want to crowd up the page and have it available in an elegant fashion.

How

Using a Modal (popup) window. First, the theme's javascript/css assets was inspected and this theme required an additional library. Then a simple modal library was used, taking into account the small file size its mobile-friendliness.

Need this too?

Please contact me if you need something of the kind. You will find a contact form at the bottom of this page.

LOOP DE LOOP

DESIGN TO CODE (PSD to HTML)

DESIGN TO CODE

DESIGN PDFPLATFORM ShopifyCODING HTML, SCSS, JavaScript, Liquid
Commissioned by Eight One Media, Denmark
Visit website →

Why

They had the design of the site already made. To make things easier, the design was made based on a Shopify theme. The only missing part was for WOWD to take the theme and make it look like the design

How

The process is commonly called PSD to HTML. First, the theme customizer is hit and any color, fonts and what ever else is editable is configured. Then, images are sliced, style is coded for all responsive sizes. But current CSS stays intact. JavaScript is added when necessary to reproduce the intended user experience created by the designer.

Need this too?

Please contact me if you need something of the kind. You will find a contact form at the bottom of this page.

IVYLEE

DESIGN TO CODE (INDESIGN to HTML)

DESIGN TO CODE

DESIGN IndesignPLATFORM ShopifyCODING HTML, SCSS, jQuery, Liquid
Commissioned by Eight One Media, Denmark
Visit website →

Why

They had the design of the site already made. As many designers do, the design was built based on a Shopify theme. WOWD took the theme and made it look like the design

How

Need this too?

Please contact me if you need something of the kind. You will find a contact form at the bottom of this page.

KIDS RIDE SHOTGUN

GEO-LOCATION POPUP

GEO-LOCATION POPUP WINDOW

DESIGN static imagePLATFORM ShopifyCODING HTML, SCSS, jQuery, AJAX, Liquid
Commissioned by Found, New-Zealand
Visit website → US | AU | NZ | UK | EU

What

The Geo-location popup window, as we agreed to call this project, is actually a notification that appears if the location of the customer is outside a perimeter. In our case, it is based on a preferred shipping zone. The customer is given a choice to visit another Shopify store which includes their location within that other store's shipping zone, or is the closest to their location... if that makes sense. In other words, all sites can ship worldwide but each store is its own franchise.

Why

This company ships from many Shopify stores. In order to offer competitive prices on shipping, they needed a solution to redirect the customer to the proper store with the correct shipping zone.

Shopify does not as of the moment of this writing, offer for a store to have more than one address. While Shopify does offer several addresses to ship FROM, this was not the option correct for them.

How

Found wanted to offer their client an elegant way to sniff out their location. This meant that using the browser's Geolocation API available for JavaScript was not an option. So the script sends an AJAX request to Telize, an offsite REST API service offering information on the location of the customer.

Once the site is aware of where the customer is from, a modal window is presented with 2 flags representing the country for the Shopify store on the left, and on the left, suggests the customer to go to their nearest store.

There are other choices at the bottom as well that can be added as more Shopify stores are created.

Time of development

The first revision was released within a month. The last version was released in late January.

Development

We had previously worked on other geo-location notifications at and UBCO Bikes and Hotmilk Lingerie.

The first version was simple and included the US and New-Zealand. It had settings in the theme customizer .

The main one being the user location redirect settings. There, you pick the country of the Shopify store and the countries for the other stores along with their urls.

The second one being a Cookie setting. Letting the client decide if the customer wishes to disregard the suggestion, that this customer is not going to be notified for X-amount of days. This simply allows to control the expiration date of the cookie, which is set to 3 days by default, if turned on. If turned off, the cookie is set to remember for 1 year.

The third and last setting lets the store owner add a drop-down menu of all the available stores, in case the customer decides to visit another store or inadvertently closed the popup for any reason.

Need this too?

Please contact me if you need something of the kind. You will find a contact form at the bottom of this page.

UpWork Showcase

CRAFTSISTERS

UI/UIX CUSTOMIZATIONS

DESIGN NonePLATFORM ShopifyCODING HTML, SCSS, Liquid
Commissioned by Eight One Media, Denmark
Visit website →

Why

The labels on the masonry layout on the front-page needed tweaking in order to make sure they displayed responsively. The client also needed to expand the amount of columns in their mega-menu. Lastly, the theme was modified to show the variant option under each product in the collection template.

How

For the labels, @media was used in the SCSS file. A combination of LIQUID/SCSS was used for the mage-menu. And for the collection template, LIQUID/SCSS was used.

Need this too?

Please contact me if you need something of the kind. You will find a contact form at the bottom of this page.