How to provide image upload option on the product page?

Scenario

You want to provide an option to upload an image on the product pages of your store.

Example

Steps

You can show some extra content on your product page with the help of metafields. StoreHippo provides the metafield functionality to provide additional data on the storefront and extended field in the admin panel. To provide the image upload field on the product page, you are required to create a metafield and then display it on the storefront.

Follow the below steps to add the metafield to a product page:

Adding metafield in Admin Panel

1. Go to Advance Settings > Metafields section in StoreHippo Admin Panel.
2. Click on Add New to add a metafield.
   
3. Select the entity "ms.products" from the drop-down in which you want to add the metafield. 
   
4. Now to define the fields, click on Add Field.
5. Enter the field name as "upload_image" and type as "string".
   
6. Click on the field settings and choose the Edit type as "checkbox" from the drop-down.
   
7. Click on Save to store the metafield.
8. Go to Products >  Products section in StoreHippo Admin Panel.
9. Add/edit a product.
10. Find the Upload Image metafield. Select the Upload Image checkbox.
    
11. Save the changes.

    Displaying Metafields on Storefront

12. Go to Design Theme from admin panel.
13. In the HTML section, click on Show all widgets.
    
14. Search for the Product widget.
    
15. Paste the following snippet in the product code wherever you wish to show the metafield. Here we paste it below the "Check COD availability" code.
    
    for VueJs code (New themes):

    <div v-if="product?.metafields?.metafield_name"> 
        <ms-form-file-upload :field="{'name':'metafield_name'}" :data="product.selected_options"> 
            <input type="file" @change="handleFileChange" id="metafield_id" placeholder="ms.filters.translate('Upload Image')" autocomplete="off" /> 
        </ms-form-file-upload> 
    </div>
    

    
    
    for angularJs code

    <div class="form-group" ng-if="product.metafields.<metafield_name> == 1">
        <div ms-widget="ms.instantFileUpload">
            <label class="option-name">Upload Image</label>
                    <input type="file" id="file" name="<metafield_name>"
                        ng-model="product.selected_options['<metafield_name>']" required/>
                            <div ng-if="uploading">
                                <p><i class="text-center ms-p-xs">
                                    <span class="fa fa-cog fa-spin ms-mr-xs"></span>
                                        <b> File is Uploading....</b></i>
                                 </p>
                            </div>
                            <div ng-if="!uploading">
                                <div ng-if="previewUrl">
                                    <img ng-src="{{previewUrl}}" style="height:100px;"/>
                                </div>
                            </div>
         </div>
    </div>​

    

16. Save the changes.
    
17. The metafield will now appear on your product page as shown below. Click on the Choose file to upload an image.