Cen

rkato1131
Shopify Partner
3 0 0

I am trying to create a theme app extension for the products page in which a modal is displayed to the user prior to adding a product to their cart. However, I can't seem to get the modal centered on the page itself - it is always centered over the product information to the right of the product picture. 

 

picture.png

Is it possible to get this modal centered within this theme app extension? My application is multi-tenant so I don't want to have to edit a theme directly to accomplish this. Here is the css I am using for the modal:

 

 

 

  .modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 600px;
    min-height: 400px;
    padding: 10px;
    border: 1px solid black;
    background-color: lightgray;
    color: black;
    box-shadow: 10px 10px 5px #888888;
    border-radius: 5px;
    z-index: 100;
  }

 

 

 

Replies 0 (0)