Skip to main content

Add Custom Downloadable Files

Add downloadable file links to your product pages using metafields.

Advanced Tutorial

Verified for the Debut theme only. May require adjustments for other themes.

Step 1: Create a Liquid Snippet​

Create downloadable-files.liquid in Snippets:

<div class="downloadable-file-wrapper">
  {%assign custom_files = product.metafields.product_files %}
  {%if custom_files.size > 0 %}
    <h3>Downloadable links</h3>
    <ul>
      {% for file in custom_files %}
        {% assign file_key = file | first %}
        {% assign file_link = file | last %}
        <li class="downloadable-file-item">
          <span>{{file_key}}: </span>
          <a href="{{file_link}}" target="_blank">
            <span class="downloadable-file-value">Download</span>
          </a>
        </li>
      {% endfor %}
    </ul>
  {%endif%}
</div>
<br/>

Step 2: Include in Product Template​

{% render "downloadable-files" %}

Step 3: Add CSS​

.downloadable-file-item {
  margin-bottom: 10px;
}
.downloadable-file-value {
  text-decoration: underline;
}

Step 4: Populate Metafields​

In Metafield Studio, create metafields under the product_files namespace. Use descriptive names as the key (e.g., "User Manual", "Spec Sheet") and the file URL as the value.