Why causes main image no not be visivle on desktop and moblie?

orhl1234
Shopify Partner
87 0 4

https://3j63uslbnd1tf41b-61846847737.shopifypreview.com

for some reason both on desktop and mobile the main image is not visible on the product page!

does anybody know why?

Replies 8 (8)

Pari2
Shopify Partner
1 0 0

Hi 

I just checked your website in this has some JavaScript and some code errors.
By edit some code it can be solved. see atteched.


orhl1234
Shopify Partner
87 0 4

do you know what error and where?

PageFly-Noah
Shopify Partner
1283 227 260

 

This is Noah from PageFly - Shopify Page Builder App

Hi @orhl1234  I have check this issue and in DOM element href value a don have value url image it show "#" . 
You need contact theme and send this image to fix it. Because they is manage this theme.

PageFlyNoah_0-1714811627735.png

Thank you.

Best regards,

Noah | PageFly

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

orhl1234
Shopify Partner
87 0 4

hi
i just found out that a custom button that I added to the product page made this issue.

but why?

 

this code 

<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Popup</title>
    <style>
        /* Style for the popup */
        .popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            border: 2px solid black;
            z-index: 1000;
            animation: popupAnimation 0.3s ease-out;
            max-height: 80%; /* Set maximum height for the popup */
            overflow-y: auto; /* Enable vertical scroll when content exceeds max height */
        }

        /* Style for the overlay */
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }

        /* Animation keyframes */
        @keyframes popupAnimation {
            from {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.5);
            }
            to {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
        }

        /* Style for close button */
        .close-button {
            position: absolute;
            top: 5px;
            right: 5px;
            cursor: pointer;
            font-size: 20px;
            background: none; /* Remove background */
            border: none; /* Remove border */
        }

        /* Centering the h2 element and making it bold and underlined */
        .popup h2 {
            text-align: center;
            font-weight: bold;
            text-decoration: underline;
        }

        /* Style for paragraph text */
        .popup p {
            font-size: 15px;
            padding-top: 6px; /* Add top padding */
            padding-bottom: 6px; /* Add bottom padding */
        }

        /* Style for email link */
        .email-link {
            text-decoration: underline;
        }

        /* Style for Bra size */
        .bra-size, .panties-garter-size {
            font-weight: 600; /* Semi-bold */
        }

        /* Style for even rows */
        table tr:nth-child(even) {
            background-color: #F6F6F6;
        }

        /* Media query for mobile devices */
        @media only screen and (max-width: 768px) {
            .popup {
                width: 100%;
            }
            table {
                width: 100% !important;
            }
            table tr:first-child th,
            table tr:first-child td {
                font-size: 15px;
                font-weight: 800; /* Font size for the first row */
            }
            table tr:not(:first-child) th,
            table tr:not(:first-child) td {
                font-size: 15px;
            }
            
            /* Adjust font size for the second row on mobile */
            table tbody tr:nth-child(2) {
                font-size: 20px !important;
            }
        }

        /* Style for the second row on desktop */
        table tbody tr:nth-child(2) {
            font-size: 20px;
        }

        /* Style for table header cell containing "Fits (Dress Size)" */
        th:nth-child(2) {
            text-align: center;
        }

        /* Style for table data cells containing "0-4" and "4-10" */
        td:nth-child(2), /* for "0-4" */
        td:nth-child(3) { /* for "4-10" */
            text-align: center;
        }
    </style>




     <button type="button" onclick="openPopup()" style="background: none; border: none; text-decoration: underline;">Size Guide</button>

    <div class="overlay" id="overlay"></div>
    <div class="popup" id="popup">
        <h2>SIZE GUIDE</h2>
        <p>Our bras and panties&amp;garter are flexible and have adjustable straps.</p>
        <h4 class="bra-size">Bra size</h4>
        <p>Choose based on the cup size(A , B , C , D , DD) as the band size is flexible</p>
         <button type="button" class="close-button" onclick="closePopup()">X</button>
        <table border="1">
            <tbody>
                <tr>
                    <th colspan="4" style="text-align: left;" class="panties-garter-size">PANTIES &amp; GARTER SIZE</th>
                </tr>
                <tr>
                    <th>Sizes</th>
                    <th>Fits <br> (Dress Size)</th>
                    <th>Waist<br> (inch)</th>
                    <th>Hip <br>(inch)</th>
                </tr>
                <tr>
                    <td>XS/S</td>
                    <td>0-4</td>
                    <td>24-27.5"</td>
                    <td>34-37.5"</td>
                </tr>
                <tr style="background-color: #F6F6F6;">
                    <td>M/L</td>
                    <td>4-10</td>
                    <td>28-31.5"</td>
                    <td>38-40.5"</td>
                </tr>
            </tbody>
        </table>
        <p>*Currently 30A, 36D , 38D, 38DD are unavailable Sizes</p>
        <p style="margin-top: 10px;">If you have any questions about the size, you can reach out via the live chat or <a href="https://exteasy.shop/pages/contact" class="email-link">email</a> us at <span style="text-decoration: none;">exteasy@exteasy.store</span></p>
    </div>

    <script>
        // Function to open the popup
        function openPopup() {
            document.getElementById("overlay").style.display = "block";
            document.getElementById("popup").style.display = "block";
        }
        // Function to close the popup
        function closePopup() {
            document.getElementById("overlay").style.display = "none";
            document.getElementById("popup").style.display = "none";
        }
    </script>

 

PageFly-Noah
Shopify Partner
1283 227 260

HI @orhl1234  where is the file have this code  ?
I mean what name this file ?
Thank you !

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

orhl1234
Shopify Partner
87 0 4

https://nlstga3dedfdevvx-61846847737.shopifypreview.com

the button is "size guide".

 

i added it as a liquid code section

 

looking forward for you response

orhl1234_0-1714985013724.png

 

PageFly-Noah
Shopify Partner
1283 227 260

please add again code here :

<style>
        /* Style for the popup */
        .popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            border: 2px solid black;
            z-index: 1000;
            animation: popupAnimation 0.3s ease-out;
            max-height: 80%; /* Set maximum height for the popup */
            overflow-y: auto; /* Enable vertical scroll when content exceeds max height */
        }

        /* Style for the overlay */
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }

        /* Animation keyframes */
        @keyframes popupAnimation {
            from {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.5);
            }
            to {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
        }

        /* Style for close button */
        .close-button {
            position: absolute;
            top: 5px;
            right: 5px;
            cursor: pointer;
            font-size: 20px;
            background: none; /* Remove background */
            border: none; /* Remove border */
        }

        /* Centering the h2 element and making it bold and underlined */
        .popup h2 {
            text-align: center;
            font-weight: bold;
            text-decoration: underline;
        }

        /* Style for paragraph text */
        .popup p {
            font-size: 15px;
            padding-top: 6px; /* Add top padding */
            padding-bottom: 6px; /* Add bottom padding */
        }

        /* Style for email link */
        .email-link {
            text-decoration: underline;
        }

        /* Style for Bra size */
        .bra-size, .panties-garter-size {
            font-weight: 600; /* Semi-bold */
        }

        /* Style for even rows */
        table tr:nth-child(even) {
            background-color: #F6F6F6;
        }

        /* Media query for mobile devices */
        @media only screen and (max-width: 768px) {
            .popup {
                width: 100%;
            }
            table {
                width: 100% !important;
            }
            table tr:first-child th,
            table tr:first-child td {
                font-size: 15px;
                font-weight: 800; /* Font size for the first row */
            }
            table tr:not(:first-child) th,
            table tr:not(:first-child) td {
                font-size: 15px;
            }
            
            /* Adjust font size for the second row on mobile */
            table tbody tr:nth-child(2) {
                font-size: 20px !important;
            }
        }

        /* Style for the second row on desktop */
        table tbody tr:nth-child(2) {
            font-size: 20px;
        }

        /* Style for table header cell containing "Fits (Dress Size)" */
        th:nth-child(2) {
            text-align: center;
        }

        /* Style for table data cells containing "0-4" and "4-10" */
        td:nth-child(2), /* for "0-4" */
        td:nth-child(3) { /* for "4-10" */
            text-align: center;
        }
    </style>




     <button type="button" onclick="openPopup()" style="background: none; border: none; text-decoration: underline;">Size Guide</button>

    <div class="overlay" id="overlay"></div>
    <div class="popup" id="popup">
        <h2>SIZE GUIDE</h2>
        <p>Our bras and panties&amp;garter are flexible and have adjustable straps.</p>
        <h4 class="bra-size">Bra size</h4>
        <p>Choose based on the cup size(A , B , C , D , DD) as the band size is flexible</p>
         <button type="button" class="close-button" onclick="closePopup()">X</button>
        <table border="1">
            <tbody>
                <tr>
                    <th colspan="4" style="text-align: left;" class="panties-garter-size">PANTIES &amp; GARTER SIZE</th>
                </tr>
                <tr>
                    <th>Sizes</th>
                    <th>Fits <br> (Dress Size)</th>
                    <th>Waist<br> (inch)</th>
                    <th>Hip <br>(inch)</th>
                </tr>
                <tr>
                    <td>XS/S</td>
                    <td>0-4</td>
                    <td>24-27.5"</td>
                    <td>34-37.5"</td>
                </tr>
                <tr style="background-color: #F6F6F6;">
                    <td>M/L</td>
                    <td>4-10</td>
                    <td>28-31.5"</td>
                    <td>38-40.5"</td>
                </tr>
            </tbody>
        </table>
        <p>*Currently 30A, 36D , 38D, 38DD are unavailable Sizes</p>
        <p style="margin-top: 10px;">If you have any questions about the size, you can reach out via the live chat or <a href="https://exteasy.shop/pages/contact" class="email-link">email</a> us at <span style="text-decoration: none;">exteasy@exteasy.store</span></p>
    </div>

    <script>
        // Function to open the popup
        function openPopup() {
            document.getElementById("overlay").style.display = "block";
            document.getElementById("popup").style.display = "block";
        }
        // Function to close the popup
        function closePopup() {
            document.getElementById("overlay").style.display = "none";
            document.getElementById("popup").style.display = "none";
        }
    </script>

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

orhl1234
Shopify Partner
87 0 4

not working 😞

I kept the code the store so you could check it.