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]

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 %}

  {%- 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
    -%}

    
  {%- else -%}
    

      

        
      

    

  {%- 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
    -%}

    

    
  {%- endif -%}

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 %}

{%- 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 }}”

{%- 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 -%}

{%- 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.selected_or_first_available_variant.available == false or quantity_rule_soldout -%} {{ 'products.product.sold_out' | t }} {%- else -%} {{ 'products.product.add_to_cart' | t }} {%- endif -%} {%- render 'loading-spinner' -%} {%- if show_dynamic_checkout -%} {{ form | payment_button }} {%- endif -%}

{%- endform -%} {%- else -%}

{{ 'products.product.sold_out' | t }}

{%- 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 }}”

{% render 'icon-unavailable' %}

{{ 'products.product.pickup_availability.unavailable' | t }}

{{ 'products.product.pickup_availability.refresh' | t }}

{%- endif -%}

[theycallmemakka]

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 %}

{%- 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
-%}

{%- else -%}

{%- 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
-%}

{%- endif -%}

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.

provide PDF Link to document on product page | Shopify Store

Hope this will helps…