Shopify integration

This tutorial covers a business case where you need users to upload image content to your store: printing business. As an owner of one, you decided to use Shopify because it provides a quick and an easy way to set-up an online store. You know how important it is to quickly get the right images from users. Uploadcare provides a fast image uploading and processing service. When combined, the two tools provide a truly simple and unique workflow for your store.

By the end of this tutorial you’ll have a ready tool for image uploads.

What you need to start

  1. Uploadcare account. Here is a quick video that will help you create one.
  2. Shopify account with Basic plan.

Step 1: Creating code snippets

On Shopify administrator page click “Online Store”, “Themes” → “Edit HTML/CSS”:

Edit theme

Now, create two new snippets. Name them uploadcare-settings and uploadcare-fields.

We need to create a proper widget configuration in uploadcare-settings.liquid:

<script charset="utf-8" src="https://ucarecdn.com/libs/widget/2.x/uploadcare.full.min.js"></script>
<script>
  UPLOADCARE_PUBLIC_KEY = 'demopublickey';
</script>

You should set the value of UPLOADCARE_PUBLIC_KEY to your project public key.

Put the following code in uploadcare-fields.liquid:

<p class="cart-attribute__field uploader-debut">
  <input id="uploader" type="hidden" data-images-only='true' data-crop="free" data-multiple='true' role="uploadcare-uploader" name="properties[custom image]" value="{{ properties['custom image'] }}">
</p>

This is an Uploadcare form field. You are already familiar with some of the options.

Note how we set the value attribute to properties['custom image']. This is a syntax to access a line item property value. See more about line items here.

Step 2: Placing snippets in templates

Add the following code to the theme.liquid before closing the </body> tag:

{% if template == 'product' %}
{% include 'uploadcare-settings' %}
{% endif %}

The following code should be placed in product-template.liquid

{% include 'uploadcare-fields' %}

The code can be added anywhere between <form> </form> tags.

Step 3: Additional template adjustments

We want your Shopify cart to display previews of uploaded images as item thumbnails. This way users get a better feeling of what they have ordered.

Let’s head over to cart-template.liquid and find the following line:

<img class="cart__image" src="{{ properties['custom image'] | img_url: '95x95', scale: 2 }}" alt="{{ item.title | escape }}">

Replace it with:

<img class="cart__image" src="{{ item.properties['custom image'] | append: 'nth/0/-/resize/95x/' }}"	alt="{{ item.title | escape }}" />

We will make a similar change to the order confirmation e-mail template.

Go to “Store Settings”, “Notifications”, then click “Order Confirmation”. Find the following line:

<img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>

Replace it with:

<img src="{{ item.properties['custom image'] | append: 'nth/0/-/resize/60x/' }}" alt="{{ item.title | escape }}" class="order-list__product-image" />

If you have other notifications turned on, e.g. Order Refund notification, then make similar changes to the corresponding templates.

Step 4: The widget styling (Optional)

Add the following code to the end of theme.scss.liquid

.uploader-debut .uploadcare-widget-button-open {
    padding: 0 10px;
    border: 1px solid #7796a8;
    background-color: #7796a8;
    color: #ffffff;
    border-radius: 2px;
    min-width: 50px !important;
    height: 35px !important;
    margin: 0px;
    font-size: 14px;
    text-align: center;
    line-height: 35px;
    max-width: 120px;
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
    font-family: "Work Sans","HelveticaNeue","Helvetica Neue",sans-serif;
};

This is just a sample styling. You can change the styling of the button to suit your store design. For more examples, see our visual tweaks.

Results

If everything is done correctly, you should see Uploadcare Widget on your product page:

Sample product page

Click “Add To Cart” and follow to cart page. You should be able to see image preview and info:

Cart page

Finally, after the purchase is completed you should recieve an e-mail that looks like this:

Purchase confirmation e-mail

Conclusion

We have just finished tutorial on how to integrate Uploadcare into Shopify.

For fine-grained integration, i.e third-party themes, accounting for product thumbnails or any other custom requirements message us at help@uploadcare.com. To stay updated on our stuff, please follow us on Twitter.

We’re always happy to help with code, integration, and other stuff. Search our site for more info or post your question in our Community Area.