uploadcaredocs

Shopify Integration
20 Minutes to Integrate

Shopify is one of the biggest E-commerce platforms allowing to build online stores with the great user experience.

The platform provides all you need to add products and track your sales process. However, it treats products as “static” entities. E-commerce is a highly competitive landscape where you crave the user engagement. Personalization is key, this guide covers adding customizable products to a Shopify store by integrating Uploadcare.

Prints in custom frames, custom-print sweatshirts, mugs with a photo: that’s what Uploadcare can help with.

Uploadcare is an end-to-end platform that handles file uploads, storage, processing, and delivery. In this guide, we’ll integrate Uploadcare Widget into a Shopify store to get media from users, and implement JavaScript API to allow product customizations. We’ll also make use of Image Transformations to render previews of your customized products.

Specifically, we’ll be building a product page for a customizable framed print: a user uploads an image and selects a frame template. On making any changes, users will see a preview of the product updated in real time.

Let’s get started.

Before We Begin

Make Shopify Account

In case you don’t have on 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 to your liking 🦄

Create 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 that tells Uploadcare which project your uploads should go to.

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

Step 1. Preparing Assets

Let’s take that physical dimensions of the framed print are 200×300 mm. The frame width is 20 mm. The pixel dimensions are 400x600px and 40px respectively.

We’ll be using 3 frame templates for our product. Here’s how the frames look like (btw, we generated those previews with Uploadcare 🙌):



Frame Template 1, 400x600px


Frame Template 2, 400x600px


Frame Template 3, 400x600px

Now, grab those frame images and upload them to your Uploadcare project. There are many ways to do that, but we’ll stick with 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 new files” to add the prepared assets.

We’ll use one Uploadcare project for both storing our frame templates and uploading print images. That’s for the Overlay Transformation to work properly.

Once your assets are in place, check out their CDN URLs and keep them somewhere. Just go with the “Copy Link Address” thing, we’ll use those later. Now it’s time to get the ball rolling with Shopify.

Step 2. Setting Up Product

Navigate to the Shopify admin panel to create our 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. Then, click “Add image” and upload a frame image from a CDN URL you saved previously. You’ll only have to do it for a single image. Use “Frame Template 1,” we’ll need the other two later. Click “Save” to apply changes.

You’ll also need to disable the image zoom effect for your product image to ensure our customized products will work correctly. Go to “admin panel” > “online store” > “customize.” Click on the section selector in the header and pick “product pages.” Hit “product pages” in the sidebar and uncheck “image zoom.”

We’ve just added a product to your shop 🚀 Let’s go further and make it customizable.

Step 3. Adding Widget

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

Let’s make some coding happen since Shopify allows modifying themes. 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 holding 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 will turn into 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:

  • the data-images-only tells the widget to accept images only.
  • data-crop defines the aspect ratio of the in-widget 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 widget dialog opens. The widget works as a form field; it gets a 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 anywhere within it:

{% include 'uploadcare-fields' %}

There you go. You have just added the uploading widget to your product page. Users can now add their prints; our next step is about letting 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 <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>

Replace the frame_N_UUID entries with the frame image UUIDs you uploaded previously. frame_1_UUID should then hold the UUID of your product title image.

What we just did was linking the selector value with the Frame inline property. It’s needed to make the live preview 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;

That’s what we got:

  • A widget instance.
  • Elements to interact with.
  • Variables holding uploaded image URLs and UUID of a selected frame.

Add the following next:

widget.onUploadComplete(function (fileInfo) {
    uploadedImage = fileInfo.cdnUrl;
    productImage.src = uploadedImage + '-/resize/320x520/-/stretch/fill/-/resize/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 + '-/resize/320x520/-/stretch/fill/-/resize/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 a 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 so, we’ll use the combination of resize and stretch transformations. First, we resize an 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 holding the frame.

Step 6. Customizing Cart

The cart page shows the title image as a product preview by default.

Head over to cart-templte.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: '-/resize/150x/' }}" alt="{{ item.title | escape }}" />

Let’s show the print image reference and the name of the selected frame. In the same file, find a div element with the cart__meta-text class.

<div class="cart__meta-text">
...
</div>

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 same changes to Shopify email templates. For instance, to the order confirmation email (“Store settings” > “Notifications” > “Order confirmation”).

Results

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

Shopify product page

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

Shopify cart page

Conclusion

Yay, you have just created a customizable product. The flexibility of Uploadcare now powers your Shopify store.

We’re always there to help. If you have any questions, just post those around our community area.

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.