As the online retailing market continues to grow, so too does the demand from our clients to create an online store for their businesses. While we are very confident in our ability to create an e-commerce store that not only looks amazing, but is equally as functional, we wanted to take our e-commerce skills to the next level, particularly with Shopify.

Shopify has a program called Shopify Experts. In order to become an Expert, you must submit an application containing 5 stores that you have created as well as descriptions and code examples of the work. This seemed like the perfect opportunity for us to not only prove to ourselves what we already knew, but to also gain certified validation that we are indeed Shopify Experts.

Screen Shot 2016-04-20 at 3.37.41 PM

As part of our application, we had to decide not only which stores to include, but what specific examples of code we wanted to show Shopify to prove our expertise. Here is one example from Oxygen Plus:

The client didn’t like the default image swap or lightbox treatment of images on the single product page so we just adapted and recreated it for jcarousel.js

<div class="jcarousel">
<ul>
{% for image in product.images %}
<li><img itemprop="image" src="{{ image | product_img_url: "large" }}" alt="{{ product.title | escape }}" /></li>
{% endfor %}
</ul>
</div><!-- end of jcarousel -->{% assign numImages= product.images | size %}
{% if numImages > 1 %}
<div class="jcar-controls">
<span class="jcarousel-control-prev jcar-control"><span class='arrow'><img src="{{ 'jcar-nav-left.png' | asset_url }}" /></span><span class="symbol"><img src="{{ 'jcar-nav-o.png' | asset_url }}" /></span></span> <span class="jcarousel-control-next jcar-control"><span class="symbol"><img src="{{ 'jcar-nav-plus.png' | asset_url }}" /></span><span class='arrow'><img src="{{ 'jcar-nav-right.png' | asset_url }}" /></span></span>
</div>
{% endif %}
</div>
<!-- end of jcarousel -->

What this code is doing is mixing the liquid code of Shopify and adding in some jQuery to create a carousel of images. The initial statement is creating a list using a for loop to display the images. The outer div with the class “jcarousel” indicates to the JavaScript that this is going to be the carousel. The next statement looks at the total number of images in the carousel and then checks to see if there is more than one image displayed. If there is, then the carousel navigation buttons are displayed as well.

While Shopify has a ton of very cool features right out of the box, there is always going to be something that the client requests that is not provided by Shopify so you either need to find an app that will do it, or create it yourself. In this case, we decided that we could create it so we put our Shopify expertise to work and created a nice jQuery carousel for our client.

One great thing about using Shopify as an e-commerce platform is that they store a lot of your product information behind the scenes, so you just have to know how to access that information to add special features to your store. On our site, Seattle Cedar, we have a minimum purchase price to receive free shipping. We wanted to create a way to notify our customers when they add a product to their cart if they were below the minimum purchase price for free shipping and how much more they would need to add to become eligible.

Here is the code that we implemented:


{% capture carttotal %}{{ cart.total_price | plus: product.price }}{% endcapture %}
{% assign carttotal = carttotal | plus:0 %}{% if carttotal and carttotal < 25000 %}<div class=”free-shipping-notice” style=”display: none;”>Your cart total is {{ cart.total_price | plus: product.price | money }}, to qualify for Free Shipping, you must add {{ “25000” | minus: carttotal | money }} to your cart.</div>{% endif %}

What this code is doing is pulling the current cart price and storing it in a variable. Then it adds the current product price to that variable. After the cart and product price are totaled, we compare that number with the number 25000 which represents our minimum purchase price. If the value of ‘carttotal’ is less than 25000, then the notice is displayed notifying the customer that they are currently not eligible for free shipping as well as how much more they would need to spend.

These are just a couple examples of the many ways that we have been able to apply our expertise within Shopify to meet a client’s needs. Our ultimate goal is to help clients to create successful online stores and becoming Shopify Experts is another step towards that end.