[Mini Tutorial]
Uploading Shopify Assets

Front-end developers really enjoy working with Shopify’s Liquid framework. It’s flexible and versatile, and truly helps developers build awesome eCommerce websites. Sometimes these online stores might require a host of different images or other assets, such as pdfs, to add content to the site. For example, a book publishing site might want to host sample pdfs to give the users a glimpse of what they might have to offer. The assets folder can host such files, which can be linked to a url provided by Shopify.

Related: Mini Tutorial: 5 Tips for Better Shopify Theming

Uploading Shopify Assets:

Uploading pdfs can be done manually of course, using Shopify’s admin panel. Assets can uploaded to the Assets folder which is located under Themes > YourTheme > Edit HTML/CSS. But what if you need to update a bunch of pdfs or images regularly, so that users have the most up to date content? Fortunately, the gurus at Shopify have provided us developers, with an endpoint that allows us to upload assets.

You can check out the various endpoints here. I’ll gladly show you how to upload a pdf using their API!

There are two ways of uploading an asset using the API:

1. Linking a Source:


If you have the image hosted on a server or if you are linking an external image outside of Shopify, then you can use the following endpoint and pass the key and the source of the image.
sh

PUT /admin/themes/828155753/assets.json
{
  "asset": {
    "key": "assets/shopify.pdf",
    "src": "http://demacmedi.com/shopify.pdf"
  }
}

A key, is the path to the asset in the Shopify themes folder and the source is the link to the asset. The endpoint call requires the Shopify theme id that the asset is associated to. In the case of the above example, the theme id is 828155753.

2. Uploading an encoded file:

Sometimes, a client might request us to upload numerous files from an FTP server to Shopify. These files can be encoded into base64, which can then be uploaded to Shopify.
If you plan to use .NET, to integrate these files, then the following piece of code might prove useful.

private static string EncodeFile(FileInfo files)
{
  var encodedFile = "";
  if (files.Extension.ToLowerInvariant().Equals(".pdf"))
  {
    var pdfBytes = File.ReadAllBytes(files.FullName);
    encodedFile = Convert.ToBase64String(pdfBytes);
  }

   return encodedFile;
}

The string returned from this method, can be assigned to the attachment key in the following JSON string. Once the following PUT request is made, the pdf will be uploaded in the assets folder.

PUT /admin/themes/828155753/assets.json
{
  "asset": {
    "key": "assets/shopify.pdf”,
    "attachment": "R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==\n"
  }
}

The response to the above endpoints contains a public url which links to the asset directly. This url can be used to retrieve the asset in the browser.

HTTP/1.1 200 OK
{
  "asset": {
    "key": "assets/shopify.pdf",
    "public_url": "https://cdn.shopify.com/s/files/1/0006/9093/3842/t/1/assets/shopify.pdf?2",
    "created_at": "2010-07-12T15:31:50-04:00",
    "updated_at": "2014-10-10T13:52:37-04:00",
    "content_type": "image/gif",
    "size": 43,
    "theme_id": 828155753
  }
}

Until next time, Happy Coding.

Shopify is scaling its platform, to accommodate clients who have larger catalogues. Uploading additional images and other assets, is a feature that can be leveraged when importing products that might have a host of assets associated with them. I will keep my blogs updated with the recent Shopify API goodies, so stay posted and make sure you subscribe to receive all the best Demac content directly to your inbox.

Related: How to Fetch All Products Using Shopify Pagination