
## Overview
To emphasize the Black Friday sale, we created an alternative homepage banner designed to immediately capture the visitor's attention. The copy is minimal, focusing on the key selling point, the discount, and the limited timeframe for placing orders.

![Southpole 04.](/images/project/bfcm-hero_desk-after.png)

<hr>

## Before & After
### Desktop 🖥️
<div class="image columns-1 sm:columns-2 gap-8">

![Southpole 05.](/images/project/bfcm-hero_desk-before.png)
![Southpole 03.](/images/project/bfcm-hero_desk-after.png)
</div>

### Mobile 📱
<div class="image columns-1 sm:columns-2 gap-8">

![Southpole 05.](/images/project/bfcm-hero_mob-before.png)
![Southpole 03.](/images/project/bfcm-hero_mob-after.png)
</div>

Services

Black Friday homepage banner


## Challenge

This store provides quantity discounts to motivate purchasing multiple pairs of socks, but this information isn’t displayed on the product page, potentially leaving many customers unaware.

For those who know about the discounts, taking advantage of them isn’t intuitive. As the product page is lacking a quantity selector, customers must repeatedly go through the add-to-cart process.

<div class="image gap-8">

![Southpole 05.](/images/project/bulk-discount-bundle_desk-before.png)
</div>

## Solution

There are now four buttons, each for a different bundle. Each button informs the user about the original price, and the discounted bundle price. Also, the best-seller bundle is highlighted with a "BEST DEAL" badge.

Based on the selected quantity, the same number of variant selectors will appear. In each selector, you can choose a product variant and it's quantity.

In the example below, the 3 pairs bundle is selected. 1 yellow sock and 2 neon pink socks.
Once the user clicks the “Add to Basket” button, those variants will be added to the cart at once.

</div>

<div class="image gap-8">

![Southpole 03.](/images/project/bulk-discount-bundle_desk-after.png)
</div>

<hr>

## Before & After
### Desktop 🖥️
<div class="image gap-8">

![Southpole 05.](/images/project/bulk-discount-bundle_desk-before.png)
</div>

<div class="image gap-8">

![Southpole 03.](/images/project/bulk-discount-bundle_desk-after.png)
</div>

### Mobile 📱
<div class="image columns-1 sm:columns-2 gap-8">

![Southpole 02.](/images/project/bulk-discount-bundle_mob-before.png)
![Southpole 04.](/images/project/bulk-discount-bundle_mob-after.png)
</div>

Bulk discount bundle


## Overview
The initial collection page is a basic product grid listing the products with a minimum price caption.

<div class="image gap-8">

![Southpole 05.](/images/project/collections-add-to-cart_desk-before.png)
</div>

<hr>
Now, customers can add products directly from the collection page, making the shopping experience faster and more convenient, potentially increasing add-to-cart activity.

The elements feature key information for each product helping customers make informed decisions without opening the product pages. This includes the product rating, category and effect badges, as well as savings displayed in both percentage and per gram, highlighting the saving of purchasing larger amounts.

The product's total price updates when a different variant/amount is selected.

<div class="image gap-8">

![Southpole 05.](/images/project/collections-add-to-cart_desk-after.png)
</div>

<hr>

## Before & After
### Desktop 🖥️
<div class="image gap-8">

![Southpole 05.](/images/project/collections-add-to-cart_desk-before.png)
</div>

<div class="image gap-8">

![Southpole 03.](/images/project/collections-add-to-cart_desk-after.png)
</div>

### Mobile 📱
<div class="image columns-1 sm:columns-2 gap-8">

![Southpole 02.](/images/project/collections-add-to-cart_mob-before.png)
![Southpole 04.](/images/project/collections-add-to-cart_mob-after.png)
</div>

Collections add-to-cart


## Overview
Giving users the ability to search & immediately see the bestsellers matching their search term.

Displayed are their price, rating, and the bestseller is highlighted by showing it's featured image. Clicking on a search result will open the corresponding product page.

<div class="image gap-8">

![Southpole 05.](/images/project/predictive-search-bar_desk-after.png)
</div>

<hr>

## Before & After
### Desktop 🖥️
<div class="image gap-8">

![Southpole 05.](/images/project/predictive-search-bar_desk-before.png)
</div>

<div class="image gap-8">

![Southpole 03.](/images/project/predictive-search-bar_desk-after.png)
</div>

### Mobile 📱
Mobile users can now search for products immediately without opening a separate menu.
<div class="image columns-1 sm:columns-2 gap-8">

![Southpole 02.](/images/project/predictive-search-bar_mob-before.png)
![Southpole 04.](/images/project/predictive-search-bar_mob-after.png)
</div>

Predictive search bar


## Challenge

This store’s product must be customized for each car model to fit, making it essential for the merchant to collect the correct model on purchase.

Previously, getting the model was handled through a simple text field where the customer types in their model manually.

With this approach customers can input incorrect or incomplete information, preventing the merchant from knowing the customer's car model, and fulfilling the order.

<div class="image gap-8">

![Southpole 05.](/images/project/car-model-selector_desk-before.png)
</div>

## Solution

To guarantee customers send the correct car model, the text field is replaced by dropdowns that only give real car options to pick from.

After purchasing the product, the selected car model is then displayed for each order inside the Shopify Admin.

The car model data gets fetched from <a href="https://carapi.app/" target="_blank" rel="noreferrer noopener">CarAPI</a>.

Like most API's, <a href="https://carapi.app/" target="_blank" rel="noreferrer noopener">CarAPI</a> forbids other websites to fetch data through their front-end (For developers - trying it will cause a CORS error). Usually, this data would be requested from your site's back-end.

Unfortunately, Shopify doesn't allow adding backend code into a store (unless you setup & host a custom Shopify application, which probably is overkill just for data fetching).

To navigate around this issue, we're taking advantage of <a href="https://www.cloudflare.com" target="_blank" rel="noreferrer noopener">Cloudflare's</a> Workers feature to act as a light-weight backend.

Our <a href="https://www.cloudflare.com" target="_blank" rel="noreferrer noopener">Cloudflare</a> Worker is able to fetch data from <a href="https://carapi.app/" target="_blank" rel="noreferrer noopener">CarAPI</a>, and because we're able to set up our <a href="https://www.cloudflare.com" target="_blank" rel="noreferrer noopener">Cloudflare</a> Worker to accept requests from our store's front-end (without triggering a CORS error), we can request the <a href="https://carapi.app/" target="_blank" rel="noreferrer noopener">CarAPI</a> data for our store through our Worker.

This approach offers additional benefits. Our <a href="https://carapi.app/" target="_blank" rel="noreferrer noopener">CarAPI</a> credentials are not being leaked on the front-end & the fetched data can be cached. Like so, data only get's fetched once in a while for a potential refresh, instead of needing to fetch data for every single visitor. This makes model options show up almost instantly & a smaller <a href="https://carapi.app/" target="_blank" rel="noreferrer noopener">CarAPI</a> plan is needed, as we may not reach the request limit of a smaller plan.

<div class="image gap-8">

![Southpole 03.](/images/project/car-model-selector_desk-after.png)
</div>

<hr>

## Before & After
### Desktop 🖥️
<div class="image columns-1 sm:columns-2 gap-8">

![Southpole 05.](/images/project/car-model-selector_desk-before.png)
![Southpole 03.](/images/project/car-model-selector_desk-after.png)
</div>

### Mobile 📱
<div class="image columns-1 sm:columns-2 gap-8">

![Southpole 05.](/images/project/car-model-selector_mob-before.png)
![Southpole 03.](/images/project/car-model-selector_mob-after.png)
</div>


Recent Works

Black Friday homepage banner

Bulk discount bundle

Collections add-to-cart

Predictive search bar

Car model selector