How to change zoom button position on product page

Store Design
,

Topic summary

A user wants to reposition the zoom button on their product page to appear directly underneath the product image.

Proposed Solution:

  • Access the theme code editor via Online Store → Theme → Edit code
  • Modify the section-main-product.css file by adding CSS targeting .product-modal__opener.product__media-icon:hover
  • Apply specific margin adjustments (margin-top: 40px, margin-left: -14px)

Current Status:
The original poster acknowledges the CSS solution but seeks further clarification on positioning the button to the right and directly under the photo. The discussion remains open with the positioning question unanswered.

Summarized with AI on November 12. AI used: claude-sonnet-4-5-20250929.
2

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your section-main-product.css file and paste the following code at the bottom:

.product__modal-opener:hover .product__media-icon{
    margin-top: 40px;
    margin-left: -14px;
}