Fix featured product not working

If you setup a featured product on your homepage and the upload is not showing, follow the steps below to make sure your theme supports featured product uploads. 

Product targeting

For the featured product upload to work, it's required to select a product, single or multiple products are supported.

"All products" does not work with featured products. 

Theme fix

The app needs to find the product information on the featured product, some themes do not use a standard way of making this product information available, in that case we have to add it to the theme. 

Open the Shopify Admin theme editor, navigate to    Online Store > Themes,  [More actions] > Edit Code.

Search for "featured" in the search bar to find the featured product liquid code (The actual file name can vary based on your specific theme):

In the liquid file, add the following code:

{% unless product == empty %}
  <script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
  </script>
{% endunless %}

IMPORTANT: make sure to not add the code at the top of the template, the best location is right before the "{% schema %}" tag:

If the {{ product | json }} expression only returns a string with the product handle e.g "your-product", you might have to change the code to manually provide the product attributes: 

{% unless product == empty %}
  <script type="application/json" id="ProductJson-{{ section.id }}">
    {
        "id": {{ product.id }},
        "handle": "{{ product.handle }}",
        "variants": {{ product.variants | json }},
        "images": {{ product.images | json }},
        "featured_image": {{ product.featured_image | json }},
        "options": {{ product.options | json }},
        "media": {{ product.media | json }}
    }  
  </script>
{% endunless %}

Now the app should find the featured product information and show the upload on your featured products.

Multiple product forms fix

If you have multiple featured products, the app has too find the right product form to add the upload to.  

In most cases this will work automatically. Some themes overwrite the product form id, in this case you will have to the "data-product-form" attribute to the product form:

{%- capture form_product_id -%}{{ product.id }}{%- endcapture -%}
{%- form 'product', product, id: form_id, data-product-form: form_product_id -%}

Dawn theme

The new Shopify Dawn theme does not include the required product information for the app to find the featured products on the homepage.  To support featured products, we have to edit the template to add the <script> tag with the ProductJson at:
?key=sections/featured-product.liquid&line=271

{% unless product == empty %}
     <script type="application/json" id="ProductJson-{{ section.id }}">
         {
          "id": {{ product.id }},
          "handle": "{{ product.handle }}",
          "variants": {{ product.variants | json }},
          "images": {{ product.images | json }},
          "featured_image": {{ product.featured_image | json }},
          "options": {{ product.options | json }},
          "media": {{ product.media | json }}
         }  
    </script>
 {% endunless %}
                      
{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
      <div data-upload-lift="{{ product.id }}"></div>

 ....

Installment form

The payment terms form on the Dawn featured product template is not marked as the installment form.  To fix it we have to change the following line in the template at:
?key=sections/featured-product.liquid&line=253

FROM:
{%- form 'product', product -%}

TO: 
{%- assign product_form_installment_id = 'product-form-installment-' | append: section.id -%}
{%- form 'product', product, id: product_form_installment_id -%}

 ....
 <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
 {{ form | payment_terms }}
{%- endform -%}

Live preview

If you use the Live Product Options app to show a live preview, the Dawn theme also requires a custom attribute "data-live-preview" on the media gallery in the template at:
?key=sections/featured-product.liquid&line=37

<media-gallery data-live-preview="{{ product.id }}" id="MediaGallery-{{ section.id }}" role="region" aria-label="{{ 'products.product.media.gallery_viewer' | t }}" data-desktop-layout="stacked" >