Download button on free digital products

[technase]

We are offering some digital products for free to our customers and want to simplify the process by eliminating the checkout process.
Instead, we’d like to place a direct download button where the "Add to Cart" or "Buy" button would typically be. I’ve created a separate template for free products, but I'm having trouble adding a button that allows users to directly download the digital file without going through the checkout process. 

An example of the product is 
https://testingstoresandthemes.myshopify.com/products/digital?_pos=1&_psq=free+book&_ss=e&_v=1.0
storefront password: lock

any help is greatly appreciated 

[theycallmemakka · Accepted solution]

Hi @technase 

This has to be done by using meta fields. You can follow this process to create the meta fields and update the code. 

Create product meta field

Step 1: Go to Settings > Custom data > Products

Step 2: Create "Add definition"

Step 3: Create a definition named "Free digital product". The type should be set to "File"

Step 4: Save the meta field

Code changes:

If you are using latest version of the dawn theme you can replace the file "buy-buttons.liquid" with below codes:

Note: Please take backup of your original files before making any changes to them.

{% comment %}
  Renders product buy-buttons.
  Accepts:
  - product: {Object} product object.
  - block: {Object} passing the block information.
  - product_form_id: {String} product form id.
  - section_id: {String} id of section to which this snippet belongs.
  - show_pickup_availability: {Boolean} for the pickup availability. If true the pickup availability is rendered, false - not rendered (optional).

  Usage:
  {% render 'buy-buttons', block: block, product: product, product_form_id: product_form_id, section_id: section.id, show_pickup_availability: true %}
{% endcomment %}
<div {{ block.shopify_attributes }}>
  {%- if product != blank -%}
    {%- liquid
      assign gift_card_recipient_feature_active = false
      if block.settings.show_gift_card_recipient and product.gift_card?
        assign gift_card_recipient_feature_active = true
      endif

      assign show_dynamic_checkout = false
      if block.settings.show_dynamic_checkout and gift_card_recipient_feature_active == false
        assign show_dynamic_checkout = true
      endif
    -%}

    <product-form
      class="product-form"
      data-hide-errors="{{ gift_card_recipient_feature_active }}"
      data-section-id="{{ section.id }}"
    >
      <div class="product-form__error-message-wrapper" role="alert" hidden>
        <span class="svg-wrapper">
          {{- 'icon-error.svg' | inline_asset_content -}}
        </span>
        <span class="product-form__error-message"></span>
      </div>

      {%- form 'product',
        product,
        id: product_form_id,
        class: 'form',
        novalidate: 'novalidate',
        data-type: 'add-to-cart-form'
      -%}
        <input
          type="hidden"
          name="id"
          value="{{ product.selected_or_first_available_variant.id }}"
          {% if product.selected_or_first_available_variant.available == false
            or quantity_rule_soldout
            or product.selected_or_first_available_variant == null
          %}
            disabled
          {% endif %}
          class="product-variant-id"
        >

        {%- if gift_card_recipient_feature_active -%}
          {%- render 'gift-card-recipient-form', product: product, form: form, section: section -%}
        {%- endif -%}

        <div class="product-form__buttons">
          {%- liquid
            assign check_against_inventory = true
            if product.selected_or_first_available_variant.inventory_management != 'shopify' or product.selected_or_first_available_variant.inventory_policy == 'continue'
              assign check_against_inventory = false
            endif
            if product.selected_or_first_available_variant.quantity_rule.min > product.selected_or_first_available_variant.inventory_quantity and check_against_inventory
              assign quantity_rule_soldout = true
            endif
          -%}
          {% if product.metafields.custom.free_digital_product %}
            <a href="{{ product.metafields.custom.free_digital_product | file_url }}" class="product-form__submit button button--full-width button--secondary" download>
              <span>Download</span>
            </a>
          {% else %}
            <button
              id="ProductSubmitButton-{{ section_id }}"
              type="submit"
              name="add"
              class="product-form__submit button button--full-width {% if show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}"
              {% if product.selected_or_first_available_variant.available == false
                or quantity_rule_soldout
                or product.selected_or_first_available_variant == null
              %}
                disabled
              {% endif %}
            >
              <span>
                {%- if product.selected_or_first_available_variant == null -%}
                  {{ 'products.product.unavailable' | t }}
                {%- elsif product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
                  {{ 'products.product.sold_out' | t }}
                {%- else -%}
                  {{ 'products.product.add_to_cart' | t }}
                {%- endif -%}
              </span>
              {%- render 'loading-spinner' -%}
            </button>
            {%- if show_dynamic_checkout -%}
              {{ form | payment_button }}
            {%- endif -%}
          {% endif %}
        </div>
      {%- endform -%}
    </product-form>
  {%- else -%}
    <div class="product-form">
      <div class="product-form__buttons form">
        <button
          type="submit"
          name="add"
          class="product-form__submit button button--full-width button--primary"
          disabled
        >
          {{ 'products.product.sold_out' | t }}
        </button>
      </div>
    </div>
  {%- endif -%}

  {%- if show_pickup_availability -%}
    {{ 'component-pickup-availability.css' | asset_url | stylesheet_tag }}

    {%- assign pick_up_availabilities = product.selected_or_first_available_variant.store_availabilities
      | where: 'pick_up_enabled', true
    -%}

    <pickup-availability
      class="product__pickup-availabilities quick-add-hidden"
      {% if product.selected_or_first_available_variant.available and pick_up_availabilities.size > 0 %}
        available
      {% endif %}
      data-root-url="{{ routes.root_url }}"
      data-variant-id="{{ product.selected_or_first_available_variant.id }}"
      data-has-only-default-variant="{{ product.has_only_default_variant }}"
      data-product-page-color-scheme="gradient color-{{ section.settings.color_scheme }}"
    >
      <template>
        <pickup-availability-preview class="pickup-availability-preview">
          <span class="svg-wrapper">
            {{- 'icon-unavailable.svg' | inline_asset_content -}}
          </span>
          <div class="pickup-availability-info">
            <p class="caption-large">{{ 'products.product.pickup_availability.unavailable' | t }}</p>
            <button class="pickup-availability-button link link--text underlined-link">
              {{ 'products.product.pickup_availability.refresh' | t }}
            </button>
          </div>
        </pickup-availability-preview>
      </template>
    </pickup-availability>

    <script src="{{ 'pickup-availability.js' | asset_url }}" defer="defer"></script>
  {%- endif -%}
</div>

If you are using any old version of dawn theme, you can provide me the buy-buttons.liquid codes and i will write the updated code.

After making all the chanegs, you can go to the respective proucts and add the free download files. All the products that has this file will show the download link.

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[theycallmemakka · Accepted solution]

Hi @technase 

This has to be done by using meta fields. You can follow this process to create the meta fields and update the code. 

Create product meta field

Step 1: Go to Settings > Custom data > Products

Step 2: Create "Add definition"

Step 3: Create a definition named "Free digital product". The type should be set to "File"

Step 4: Save the meta field

Code changes:

If you are using latest version of the dawn theme you can replace the file "buy-buttons.liquid" with below codes:

Note: Please take backup of your original files before making any changes to them.

{% comment %}
  Renders product buy-buttons.
  Accepts:
  - product: {Object} product object.
  - block: {Object} passing the block information.
  - product_form_id: {String} product form id.
  - section_id: {String} id of section to which this snippet belongs.
  - show_pickup_availability: {Boolean} for the pickup availability. If true the pickup availability is rendered, false - not rendered (optional).

  Usage:
  {% render 'buy-buttons', block: block, product: product, product_form_id: product_form_id, section_id: section.id, show_pickup_availability: true %}
{% endcomment %}
<div {{ block.shopify_attributes }}>
  {%- if product != blank -%}
    {%- liquid
      assign gift_card_recipient_feature_active = false
      if block.settings.show_gift_card_recipient and product.gift_card?
        assign gift_card_recipient_feature_active = true
      endif

      assign show_dynamic_checkout = false
      if block.settings.show_dynamic_checkout and gift_card_recipient_feature_active == false
        assign show_dynamic_checkout = true
      endif
    -%}

    <product-form
      class="product-form"
      data-hide-errors="{{ gift_card_recipient_feature_active }}"
      data-section-id="{{ section.id }}"
    >
      <div class="product-form__error-message-wrapper" role="alert" hidden>
        <span class="svg-wrapper">
          {{- 'icon-error.svg' | inline_asset_content -}}
        </span>
        <span class="product-form__error-message"></span>
      </div>

      {%- form 'product',
        product,
        id: product_form_id,
        class: 'form',
        novalidate: 'novalidate',
        data-type: 'add-to-cart-form'
      -%}
        <input
          type="hidden"
          name="id"
          value="{{ product.selected_or_first_available_variant.id }}"
          {% if product.selected_or_first_available_variant.available == false
            or quantity_rule_soldout
            or product.selected_or_first_available_variant == null
          %}
            disabled
          {% endif %}
          class="product-variant-id"
        >

        {%- if gift_card_recipient_feature_active -%}
          {%- render 'gift-card-recipient-form', product: product, form: form, section: section -%}
        {%- endif -%}

        <div class="product-form__buttons">
          {%- liquid
            assign check_against_inventory = true
            if product.selected_or_first_available_variant.inventory_management != 'shopify' or product.selected_or_first_available_variant.inventory_policy == 'continue'
              assign check_against_inventory = false
            endif
            if product.selected_or_first_available_variant.quantity_rule.min > product.selected_or_first_available_variant.inventory_quantity and check_against_inventory
              assign quantity_rule_soldout = true
            endif
          -%}
          {% if product.metafields.custom.free_digital_product %}
            <a href="{{ product.metafields.custom.free_digital_product | file_url }}" class="product-form__submit button button--full-width button--secondary" download>
              <span>Download</span>
            </a>
          {% else %}
            <button
              id="ProductSubmitButton-{{ section_id }}"
              type="submit"
              name="add"
              class="product-form__submit button button--full-width {% if show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}"
              {% if product.selected_or_first_available_variant.available == false
                or quantity_rule_soldout
                or product.selected_or_first_available_variant == null
              %}
                disabled
              {% endif %}
            >
              <span>
                {%- if product.selected_or_first_available_variant == null -%}
                  {{ 'products.product.unavailable' | t }}
                {%- elsif product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
                  {{ 'products.product.sold_out' | t }}
                {%- else -%}
                  {{ 'products.product.add_to_cart' | t }}
                {%- endif -%}
              </span>
              {%- render 'loading-spinner' -%}
            </button>
            {%- if show_dynamic_checkout -%}
              {{ form | payment_button }}
            {%- endif -%}
          {% endif %}
        </div>
      {%- endform -%}
    </product-form>
  {%- else -%}
    <div class="product-form">
      <div class="product-form__buttons form">
        <button
          type="submit"
          name="add"
          class="product-form__submit button button--full-width button--primary"
          disabled
        >
          {{ 'products.product.sold_out' | t }}
        </button>
      </div>
    </div>
  {%- endif -%}

  {%- if show_pickup_availability -%}
    {{ 'component-pickup-availability.css' | asset_url | stylesheet_tag }}

    {%- assign pick_up_availabilities = product.selected_or_first_available_variant.store_availabilities
      | where: 'pick_up_enabled', true
    -%}

    <pickup-availability
      class="product__pickup-availabilities quick-add-hidden"
      {% if product.selected_or_first_available_variant.available and pick_up_availabilities.size > 0 %}
        available
      {% endif %}
      data-root-url="{{ routes.root_url }}"
      data-variant-id="{{ product.selected_or_first_available_variant.id }}"
      data-has-only-default-variant="{{ product.has_only_default_variant }}"
      data-product-page-color-scheme="gradient color-{{ section.settings.color_scheme }}"
    >
      <template>
        <pickup-availability-preview class="pickup-availability-preview">
          <span class="svg-wrapper">
            {{- 'icon-unavailable.svg' | inline_asset_content -}}
          </span>
          <div class="pickup-availability-info">
            <p class="caption-large">{{ 'products.product.pickup_availability.unavailable' | t }}</p>
            <button class="pickup-availability-button link link--text underlined-link">
              {{ 'products.product.pickup_availability.refresh' | t }}
            </button>
          </div>
        </pickup-availability-preview>
      </template>
    </pickup-availability>

    <script src="{{ 'pickup-availability.js' | asset_url }}" defer="defer"></script>
  {%- endif -%}
</div>

If you are using any old version of dawn theme, you can provide me the buy-buttons.liquid codes and i will write the updated code.

After making all the chanegs, you can go to the respective proucts and add the free download files. All the products that has this file will show the download link.

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[technase]

That's amazing.. 
This is the code for buy button, the theme I am using is dawn version 13.0.1

{% comment %}
Renders product buy-buttons.
Accepts:
- product: {Object} product object.
- block: {Object} passing the block information.
- product_form_id: {String} product form id.
- section_id: {String} id of section to which this snippet belongs.
- show_pickup_availability: {Boolean} for the pickup availability. If true the pickup availability is rendered, false - not rendered (optional).

Usage:
{% render 'buy-buttons', block: block, product: product, product_form_id: product_form_id, section_id: section.id, show_pickup_availability: true %}
{% endcomment %}
<div {{ block.shopify_attributes }}>
{%- if product != blank -%}
{%- liquid
assign gift_card_recipient_feature_active = false
if block.settings.show_gift_card_recipient and product.gift_card?
assign gift_card_recipient_feature_active = true
endif

assign show_dynamic_checkout = false
if block.settings.show_dynamic_checkout and gift_card_recipient_feature_active == false
assign show_dynamic_checkout = true
endif
-%}

<product-form
class="product-form"
data-hide-errors="{{ gift_card_recipient_feature_active }}"
data-section-id="{{ section.id }}"
>
<div class="product-form__error-message-wrapper" role="alert" hidden>
<svg
aria-hidden="true"
focusable="false"
class="icon icon-error"
viewBox="0 0 13 13"
>
<circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
<circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
<path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
<path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
</svg>
<span class="product-form__error-message"></span>
</div>

{%- form 'product',
product,
id: product_form_id,
class: 'form',
novalidate: 'novalidate',
data-type: 'add-to-cart-form'
-%}
<input
type="hidden"
name="id"
value="{{ product.selected_or_first_available_variant.id }}"
{% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
disabled
{% endif %}
class="product-variant-id"
>

{%- if gift_card_recipient_feature_active -%}
{%- render 'gift-card-recipient-form', product: product, form: form, section: section -%}
{%- endif -%}

<div class="product-form__buttons">
{%- liquid
assign check_against_inventory = true
if product.selected_or_first_available_variant.inventory_management != 'shopify' or product.selected_or_first_available_variant.inventory_policy == 'continue'
assign check_against_inventory = false
endif
if product.selected_or_first_available_variant.quantity_rule.min > product.selected_or_first_available_variant.inventory_quantity and check_against_inventory
assign quantity_rule_soldout = true
endif
-%}
<button
id="ProductSubmitButton-{{ section_id }}"
type="submit"
name="add"
class="product-form__submit button button--full-width {% if show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}"
{% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
disabled
{% endif %}
>
<span>
{%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
{{ 'products.product.sold_out' | t }}
{%- else -%}
{{ 'products.product.add_to_cart' | t }}
{%- endif -%}
</span>
{%- render 'loading-spinner' -%}
</button>
{%- if show_dynamic_checkout -%}
{{ form | payment_button }}
{%- endif -%}
</div>
{%- endform -%}
</product-form>
{%- else -%}
<div class="product-form">
<div class="product-form__buttons form">
<button
type="submit"
name="add"
class="product-form__submit button button--full-width button--primary"
disabled
>
{{ 'products.product.sold_out' | t }}
</button>
</div>
</div>
{%- endif -%}

{%- if show_pickup_availability -%}
{{ 'component-pickup-availability.css' | asset_url | stylesheet_tag }}

{%- assign pick_up_availabilities = product.selected_or_first_available_variant.store_availabilities
| where: 'pick_up_enabled', true
-%}

<pickup-availability
class="product__pickup-availabilities no-js-hidden quick-add-hidden"
{% if product.selected_or_first_available_variant.available and pick_up_availabilities.size > 0 %}
available
{% endif %}
data-root-url="{{ routes.root_url }}"
data-variant-id="{{ product.selected_or_first_available_variant.id }}"
data-has-only-default-variant="{{ product.has_only_default_variant }}"
data-product-page-color-scheme="gradient color-{{ section.settings.color_scheme }}"
>
<template>
<pickup-availability-preview class="pickup-availability-preview">
{% render 'icon-unavailable' %}
<div class="pickup-availability-info">
<p class="caption-large">{{ 'products.product.pickup_availability.unavailable' | t }}</p>
<button class="pickup-availability-button link link--text underlined-link">
{{ 'products.product.pickup_availability.refresh' | t }}
</button>
</div>
</pickup-availability-preview>
</template>
</pickup-availability>

<script src="{{ 'pickup-availability.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
</div>

[theycallmemakka · Accepted solution]

Hi @technase ,

Thank you for the response. You can replace the code with below codes:

{% comment %}
Renders product buy-buttons.
Accepts:
- product: {Object} product object.
- block: {Object} passing the block information.
- product_form_id: {String} product form id.
- section_id: {String} id of section to which this snippet belongs.
- show_pickup_availability: {Boolean} for the pickup availability. If true the pickup availability is rendered, false - not rendered (optional).

Usage:
{% render 'buy-buttons', block: block, product: product, product_form_id: product_form_id, section_id: section.id, show_pickup_availability: true %}
{% endcomment %}
<div {{ block.shopify_attributes }}>
{%- if product != blank -%}
{%- liquid
assign gift_card_recipient_feature_active = false
if block.settings.show_gift_card_recipient and product.gift_card?
assign gift_card_recipient_feature_active = true
endif

assign show_dynamic_checkout = false
if block.settings.show_dynamic_checkout and gift_card_recipient_feature_active == false
assign show_dynamic_checkout = true
endif
-%}

<product-form
class="product-form"
data-hide-errors="{{ gift_card_recipient_feature_active }}"
data-section-id="{{ section.id }}"
>
<div class="product-form__error-message-wrapper" role="alert" hidden>
<svg
aria-hidden="true"
focusable="false"
class="icon icon-error"
viewBox="0 0 13 13"
>
<circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
<circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
<path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
<path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
</svg>
<span class="product-form__error-message"></span>
</div>

{%- form 'product',
product,
id: product_form_id,
class: 'form',
novalidate: 'novalidate',
data-type: 'add-to-cart-form'
-%}
<input
type="hidden"
name="id"
value="{{ product.selected_or_first_available_variant.id }}"
{% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
disabled
{% endif %}
class="product-variant-id"
>

{%- if gift_card_recipient_feature_active -%}
{%- render 'gift-card-recipient-form', product: product, form: form, section: section -%}
{%- endif -%}

<div class="product-form__buttons">
{%- liquid
assign check_against_inventory = true
if product.selected_or_first_available_variant.inventory_management != 'shopify' or product.selected_or_first_available_variant.inventory_policy == 'continue'
assign check_against_inventory = false
endif
if product.selected_or_first_available_variant.quantity_rule.min > product.selected_or_first_available_variant.inventory_quantity and check_against_inventory
assign quantity_rule_soldout = true
endif
-%}
  {% if product.metafields.custom.free_digital_product %}
      <a href="{{ product.metafields.custom.free_digital_product | file_url }}" class="product-form__submit button button--full-width button--primary" download>
        <span>Download</span>
      </a>
  {% else %}
    <button
    id="ProductSubmitButton-{{ section_id }}"
    type="submit"
    name="add"
    class="product-form__submit button button--full-width {% if show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}"
    {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
    disabled
    {% endif %}
    >
    <span>
    {%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
    {{ 'products.product.sold_out' | t }}
    {%- else -%}
    {{ 'products.product.add_to_cart' | t }}
    {%- endif -%}
    </span>
    {%- render 'loading-spinner' -%}
    </button>
    {%- if show_dynamic_checkout -%}
    {{ form | payment_button }}
    {%- endif -%}
  {% endif %}
</div>
{%- endform -%}
</product-form>
{%- else -%}
<div class="product-form">
<div class="product-form__buttons form">
<button
type="submit"
name="add"
class="product-form__submit button button--full-width button--primary"
disabled
>
{{ 'products.product.sold_out' | t }}
</button>
</div>
</div>
{%- endif -%}

{%- if show_pickup_availability -%}
{{ 'component-pickup-availability.css' | asset_url | stylesheet_tag }}

{%- assign pick_up_availabilities = product.selected_or_first_available_variant.store_availabilities
| where: 'pick_up_enabled', true
-%}

<pickup-availability
class="product__pickup-availabilities no-js-hidden quick-add-hidden"
{% if product.selected_or_first_available_variant.available and pick_up_availabilities.size > 0 %}
available
{% endif %}
data-root-url="{{ routes.root_url }}"
data-variant-id="{{ product.selected_or_first_available_variant.id }}"
data-has-only-default-variant="{{ product.has_only_default_variant }}"
data-product-page-color-scheme="gradient color-{{ section.settings.color_scheme }}"
>
<template>
<pickup-availability-preview class="pickup-availability-preview">
{% render 'icon-unavailable' %}
<div class="pickup-availability-info">
<p class="caption-large">{{ 'products.product.pickup_availability.unavailable' | t }}</p>
<button class="pickup-availability-button link link--text underlined-link">
{{ 'products.product.pickup_availability.refresh' | t }}
</button>
</div>
</pickup-availability-preview>
</template>
</pickup-availability>

<script src="{{ 'pickup-availability.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
</div>

Once the code has been replaced, and the meta fields is created, the button show correctly.

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

[gr_trading]

Hi @technase ,

Request you to refer the below video how you can enable download link for files.

Hope this will helps...