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.

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:

Missing product json (Dawn based themes)

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 }},
 "vendor": "{{ product.vendor }}",
 "images": {{ product.images | json }},
 "featured_image": {{ product.featured_image | json }},
 "options": {{ product.options | json }},
 "media": {{ product.media | json }},
 "tags": {{ product.tags | 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 -%}

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" >