Shopify Integration

20 Minutes to Integrate

This guide covers adding customizable products to a Shopify store by integrating Uploadcare Uploadcare File Uploader and implementing JavaScript API to allow product customizations. We’ll also make use of Image Transformations to render resized image previews of your customized Shopify products.

Shopify is an ecommerce platform that allows you to build online stores. However, you can add static item images only for your items. Uploadcare can help you create custom-print sweatshirts, mugs with a logo, etc. Specifically, we’ll be building a product page for a customizable framed print:

Shopify Product Page

A user uploads an image and selects a frame template. After making any changes, users will see a preview of the product updated in real time.

Let’s get started.

Before We Begin

Make a Shopify Account

If you don’t have one yet, create a Shopify account. It’s free for a 14-day period. We’ll go with the Debut theme, but you can pick any one you like. 🦄

Create an Uploadcare Account

Same here: if you aren’t with us yet, sign up. Once you have an account, navigate to your Dashboard to create a new Project or discover API keys for an existing one. To go through the steps of this guide, you will need the Public API Key, which tells Uploadcare which project your file uploads should go to. The key can be found either in the API Keys tab or in the top right corner of your project’s dashboard.

A screenshot of Uploadcare Project Dashboard

Now that everything is set up, we should prepare some assets.

Step 1. Preparing Assets

Let’s say the physical dimensions of the framed print are 200×300 mm and the frame width is 20 mm. The pixel dimensions are 400x600px and 40px, respectively. We’ll be using three frame templates for our product. Here’s what the frames look like (by the way, we generated these previews with Uploadcare 🙌):

Frame template #1 (brown, cherry wood)
Frame Template 1, 400x600px
Frame template #2 (white, maple wood)
Frame Template 2, 400x600px
Frame template #3 (dark, walnut wood)
Frame Template 3, 400x600px

Now, grab the frame images and upload them to your Uploadcare project. There are many ways to do that, but we’ll use the quick one.

Go to your Dashboard, select one of your projects, and hit Files in the sidebar. You will see the list of files uploaded to that project. Hit Upload a file to add the prepared assets. If you don’t have any files uploaded yet, you can drag and drop the images onto the page.

A screenshot of the drag and drop interface

We’ll use one Uploadcare project for both storing our frame templates and uploading the print images. That’s necessary for the Overlay Transformation to work properly. Once your assets are in place, find their CDN URLs and save them somewhere. To do this, hover your mouse over a single frame and use the Copy URL button.

A screenshot of an Uploadcare Image URL

Now it’s time to get the ball rolling with Shopify.

Step 2. Setting Up the Product

Navigate to the Shopify admin panel to create your product. Go to the Products section and hit the Add product button. Fill out all the necessary fields such as product name, description, price, etc. Now, let’s use Shopify’s built-in uploader to upload a product image. Click Add media from URL, select Add image from URL and upload a frame image from a CDN URL you saved previously. You’ll only have to do this for a single image. Use Frame Template 1; we’ll need the other two later.

Shopify’s product editor page

Fill in the inventory so we can add the item to the cart later. Also, make sure that Product Status is set to Active to make it actually appear in the store. Click Save to apply the changes.

You’ll also need to disable the image zoom effect for the uploaded product pictures to ensure our customized products will work correctly. Go to the Admin panelOnline storeСustomize. Click on the section selector in the header and pick Product pages. Hit Product pages in the sidebar and uncheck Enable image zoom. This way Shopify won’t interfere with our upcoming image resize feature.

Shopify Image Zoom

We’ve just added a product to your shop! 🚀 Now let’s make it customizable.

Step 3. Adding the File Uploader

Now, we’ll need some prints to customize. Your users will upload them, so we need to add the File Uploader by including the Uploadcare library.

Shopify allows modifying themes, so let’s add some code. It’s quite simple: go to the Admin panel, hit Online store, Actions, and select Edit code. Create a new file in the Snippets section. Name it uploadcare-settings.liquid, and add the uploader <script> element followed by another element containing your Public API Key. The following lines will do the trick:

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

Add another snippet named uploadcare-fields.liquid. We’ll be adding an <input> element that'll become the uploader button. Put the following lines in the snippet:

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

As you see, our <input> comes with some attributes. Here’s what they do:

  • data-images-only tells the file uploader to accept images only.
  • data-crop defines the aspect ratio of the file uploader image crop. 8:13 stands for the aspect ratio of the rectangle within our frame templates.
  • value="{{ properties['custom image'] }} defines the default image you see when the file uploader dialog opens. The file uploader works as a form field; it gets the CDN URL of the uploaded file as a value. Using Shopify liquid syntax, we can link the input value with a product line item.

Add the following lines to the theme.liquid file placed in the Layout section right before the closing </body> tag:

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

Discover the product-template.liquid file under the Sections category, find the <form> element, and put the following somewhere within it:

{% include 'uploadcare-fields' %}

In this example, we decided to put the snippet right before the variants selector dropdown like in the screenshot below:

Shopify’s code editor

There you go! You’ve just added the file uploader to your product page. Users can now add their prints; our next step will let them pick frames.

Step 4. Adding Frame Selector

Let’s add a selector that will allow users to pick a frame for an uploaded print. In product-template.liquid, add the following within the form:

In product-template.liquid add the following within <form>:

<div class="selector-wrapper product-form__item">
    <label for="frame">Frame</label>
    <select required class="required product-form__input" id="frame" name="properties[Frame]" >
      <option data-frame-id="frame_1_UUID" value="Frame 1">Frame 1</option>
      <option data-frame-id="frame_2_UUID" value="Frame 2">Frame 2</option>
      <option data-frame-id="frame_3_UUID" value="Frame 3">Frame 3</option>
    </select>
</div>
Shopify Code Editor

Replace the frame_N_UUID entries with the frame image UUIDs you uploaded previously. You can copy those almost the same way we did with the URLs:

Uploadcare Dashboard

frame_1_UUID should then contain the UUID of your product title image. What we just did was link the selector value with the Frame inline property. It’s necessary to make the live preview option work, which is the next step.

Step 5. Making Live Preview Work

In this step, we’ll be adding JavaScript code that changes the product image every time a user uploads a print and picks a frame.

Navigate back to uploadcare-settings.liquid and add the following lines to the <script> element:

  var widget = uploadcare.Widget('[role=uploadcare-uploader]');
  var productImage = document.querySelector('.product-featured-img');
  var frameSelector = document.getElementById('frame');
  var uploadedImage = null;
  var currentFrame = frameSelector.options[frameSelector.selectedIndex].dataset.frameId;

Here's what we've got:

  • A file uploader instance.
  • Elements to interact with.
  • Variables containing uploaded image URLs and UUID of a selected frame.

Add the following next:

widget.onUploadComplete(function (fileInfo) {
    uploadedImage = fileInfo.cdnUrl;
    productImage.src = uploadedImage + '-/scale_crop/320x520/-/stretch/fill/-/scale_crop/400x600/-/overlay/' + currentFrame + '/';
    // clears the default srcset of the product image
    productImage.dataset.srcset = productImage.srcset = '';
});

frameSelector.addEventListener('change', function (e) {
    currentFrame = e.target.options[e.target.selectedIndex].dataset.frameId;
    if (uploadedImage !== null) {
      productImage.src = uploadedImage + '-/scale_crop/320x520/-/stretch/fill/-/scale_crop/400x600/-/overlay/' + currentFrame + '/';
    }
});

When a user uploads an image or selects a frame, this snippet above gets the value (UUID) of that frame and layers it over the uploaded image, if any.

Here are some details:

  • uploadedImage holds the URL of the uploaded print image. We will be layering a frame over it, but we need to add extra surrounding pixels first.
  • To do that , we’ll use a combination of resize and stretch transformations. First, we resize the image to the size of the in-frame rectangle. Then we stretch it back to the frame rectangle.
  • stretch/fill prevents the resizing and fills the surrounding area with white pixels.
  • We then apply overlay to add a new layer containing the frame.

Step 6. Customizing the Cart

The cart page shows the title image as a product preview by default. Head over to cart-template.liquid and find the following line:

<img class="cart__image{% if item.image == null %} hide{% endif %}" src="{{ item | img_url: 'x190' }}" alt="{{ item.image.alt | escape }}" ata-cart-item-image>

Replace it with:

<img class="cart__image{% if item.image == null %} hide{% endif %}" src="{{ item.properties['custom image'] | append: '-/resize/150x/' }}" alt="{{ item.image.alt | escape }}" data-cart-item-image>

Let’s show the print image reference and the name of the selected frame. In the same file, find the ul element with the product-details class.

<ul class="product-details...
...
</ul>

Replace its contents with:

{% for p in item.properties %}
{% unless p.last == blank %}
  <div>
    {{ p.first }}:
    {% if p.last contains 'https://' %}
      <a href="{{ p.last }}">Link</a>
    {% else %}
      {{ p.last }}
    {% endif %}
  </div>
{% endunless %}
{% endfor %}

You can also apply the same changes to Shopify email templates, for instance, to the order confirmation email (Store settingsNotificationsOrder confirmation).

Results

If everything is correct, your product page should now look like this:

Shopify Product Page

You should now see the uploaded image and custom product fields:

Shopify Cart Page

Conclusion

Yay! You have just created a customizable product. The flexibility of Uploadcare is now enhancing your Shopify store.

We’re always here to help. If you have any questions, just post them in our community area.