How to show delivery time on product page?

Scenario

You want to show the delivery time on your product pages.

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 delivery time on the product page, you are required to create a metafield and then display the data on the storefront.

Follow the below steps to add the delivery 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 "Delivery Time" and type as String.
   
6. Click on Save to store the metafield.
7. Go to Products >  Products section in StoreHippo Admin Panel.
8. Add/edit a product.
9. Find the Delivery time metafield. Enter the delivery time in the field.
   
10. Save the changes.
    

    
    Displaying Metafields on Storefront
    
    

11. Go to Design Theme from the admin panel.
12. In the HTML section, click on Show all widgets.
    
13. Search for the Product widget.
    
14. 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.
    

    <p ng-if="product.metafields.delivery_time"><b>{{"Delivery Time:"|msTranslate}}</b>{{product.metafields.delivery_time}}</p>​

    

15. Save the changes.
    
16. The metafield will now appear on your product page as shown below.