Shopify integration

This tutorial is about implementing media uploads in your Shopify project. That is especially useful if your business processes involve receiving user-generated media or processing images.

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

Before we begin

Before proceeding with the integration, let’s make sure everything is in place:

  1. Shopify account.
  2. Uploadcare account.
  3. Uploadcare free API keys.

Once you create an Uploadcare account, navigate to your dashboard to create a new project or discover API keys for an existing one. You will need a public key: it defines a target project user uploads will go to.

If you plan uploading non-image content, add billing info to your account.

Step 1: Creating code snippets

On the Shopify admin page, click “Online Store,” “Themes” → “Actions” → “Edit code”

Edit theme

Create two new snippets named uploadcare-settings and uploadcare-fields respectively.

uploadcare-settings.liquid will hold a widget configuration:

<script>UPLOADCARE_PUBLIC_KEY = 'YOUR_PUBLIC_KEY';</script>
<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js" data-integration="Shopify"></script>

Put the following code in uploadcare-fields.liquid to further adjust the widget behavior:

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

The above snippet also enables the Uploadcare form field. The input element can be modified to hold any number of local widget options. Note the value attribute was set to properties['custom image']. That is the syntax to access a line item property value. Learn more about line items here.

The data-images-only option sits in the widget config to provide a fail-safe experience when working with accounts on the Free plan with no billing info added: those only allow image uploads.

Step 2: Placing snippets in templates

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

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

In turn, the following line should be put in product-template.liquid anywhere within the <form> element:

{% include 'uploadcare-fields' %}

Step 3: Additional template adjustments

Now, we will make your Shopify cart show previews of uploaded images as item thumbnails. This will provide a better user experience by showing what they just ordered.

Head over to cart-template.liquid and discover 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”, hit “Order Confirmation.” Find the following:

<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, implement similar changes in the corresponding templates.

Step 4: Uploadcare Widget custom styling (Optional)

This section shows how you can customize the appearance of your widget dialog. Add the following CSS 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 an example of adjusting widget styles sample styling. For more examples, see our docs on visual tweaks.

Results

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

Sample product page

Hit “Add To Cart” and navigate to the cart page. You should be able to see image preview and info:

Cart page

Finally, upon completing the purchase, you should get an e-mail that looks like this:

Purchase confirmation e-mail

Conclusion

Yay, you have just implemented media uploads in your Shopify project.

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.