Product media zoom option

[tomoyanakano]

Why are these changes introduced?

Fixes #733

What approach did you take?

• add zoom options（enable or disable）to main product
• add zoom options（enable or disable）to featured product
• edit product thumbnail
  • add media zoom argument
  • if media zoom == 'disable' show product__media without modal-opener

I have to improve code more in product thumbnail（line: 114）

    <div style="width: 100%;"> 
      <div class="product__media media media--transparent gradient global-media-settings" style="padding-top: {{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100 }}%;">

I think it would be class.
how should I name the element that has widht: 100% style?

Other considerations

I think it would be able to disable zoom by remove or invalidate javascript

Testing steps/scenarios

• able to disable zoom on main product (desktop and mobile)
• able to disable zoom on featured product (desktop and mobile)

Demo links
Please include a link to a demo store that includes preconfigured sections and settings to allow reviewers to easily test the features you are working on.

• Store
• Editor

Checklist

• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility