Create new page using html, java script and css

Technical Q&A
1 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My WordPress-like Website</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .container {
            display: flex;
        }

        .content {
            background-color: #f2f1f1;
            max-width: 320px;
            height: 500px;
            padding: 10px;
            margin-left: 75px;
            font-size: 12px;
        }

        .content ul {
            list-style: square;
        }

        .content ul li {
            padding-top: 5px;
            margin-bottom: 10px;
        }
        .ul-content{
            background-color: white;
            padding: 2px;
        }

        .thumbnail-container {
            display: flex;
            justify-content: center;
            margin-top: 90px;
        }

        .thumbnail {
            width: 80px;
            height: 60px;
            margin: 0 12px;
            cursor: pointer;
        }

        .large-image-container {
            flex: 1;
            text-align: center;
        }

        #largeImage {
            max-width: 100%;
            max-height: 100%;
        }
        @media screen and (max-width: 600px) {
            .container {
                display: block;
            }
            .content{
                margin-top: 15px;
                margin-left: 20px;
            }
            .thumbnail {
            width: 60px;
            height: 50px;
            margin: 0 15px;
            cursor: pointer;
        }
        .thumbnail-container {
            margin-top: 40px;
        }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="product-container">
            <div class="large-image-container" id="largeImageContainer">
                <img src="" alt="Large Image" id="largeImage">
            </div>
            <div class="thumbnail-container">
                <img src="https://denikpharm.com/files/products/thumb/1637917142_Ototropin.jpeg.jpeg" alt="Front" class="thumbnail" onclick="showProductDetails('https://denikpharm.com/files/products/1637917142_Ototropin.jpeg.jpeg', getInitialProductContent())">
                <img src="https://denikpharm.com/files/products/thumb/1637917163_ototropin...jpeg.jpeg" alt="Back" class="thumbnail" onclick="showProductDetails('https://denikpharm.com/files/products/1637917163_ototropin...jpeg.jpeg', getOtotropinBackContent())">
                <img src="https://denikpharm.com/files/products/thumb/1637489463_Corrected%20Cap%20Eva.jpg.jpg" alt="Side" class="thumbnail" onclick="showProductDetails('https://denikpharm.com/files/products/1637489463_Corrected%20Cap%20Eva.jpg.jpg', getCorrectedCapContent())">
                <img src="https://denikpharm.com/files/products/thumb/1637489486_Corrected%20Cap%20Eva1.jpg.jpg" alt="upper" class="thumbnail" onclick="showProductDetails('https://denikpharm.com/files/products/1637489486_Corrected%20Cap%20Eva1.jpg.jpg', getCorrectedCapEva())">
            </div>
        </div>
        <div class="content" id="productContent">
            <!-- Content will be dynamically updated using JavaScript -->
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var largeImageContainer = document.getElementById('largeImageContainer');
            var largeImage = document.getElementById('largeImage');
            var productContent = document.getElementById('productContent');

            // Set the initial large image and content (replace URLs with actual data)
            largeImage.src='https://denikpharm.com/files/products/1637917142_Ototropin.jpeg.jpeg';
            productContent.innerHTML = getInitialProductContent();

            console.log('Initialized with initial content');
        });

        function showProductDetails(imageUrl, content) {
            var largeImageContainer = document.getElementById('largeImageContainer');
            var largeImage = document.getElementById('largeImage');
            var productContent = document.getElementById('productContent');

            // Set the source of the large image
            largeImage.src=imageUrl;

            // Update the content based on the selected image
            productContent.innerHTML = content;

            // console.log('Changed content for image: ', imageUrl);
        }

    function getInitialProductContent() {
    return `<h3>TEMPORECT Pro</h3>
    <hr style="color: white">
    <p>TEMPORECT Pro: New Revolutionary New Packaging for Heat and Temperature sensitive Drugs.</p>
    <hr style="color:white">
    <ul>
        <li>In our continuous effort to provide our users purest, safest and effective peptides, We have taken another revolutionary step in peptide packaging.</li>
        <li>We have come up with TEMPORECT Pro, a temperature and shock proof packaging which will not only safeguard peptides from getting damage during transportation and storage caused by Heat, Sunlight and stress, it will provide ease in transportation without worrying about outside temperature.</li>
    </ul>
    <hr style="color: white;">
    <p>
        With Years of research and rigorous testing, we have made sure that our new packaging stands out against heat, sunlight and External stress, Provide you the exact efficacy and potency you are promised for.
    </p>`;
}

// Define content for each product image
function getOtotropinBackContent() {
    return `<h3>TEMPORECT Pro</h3>
    <hr style="color: white">
    <p>TEMPORECT Pro: New Revolutionary New Packaging for Heat and Temperature sensitive Drugs.</p>
    <hr style="color:white">
    <ul>
        <li>In our continuous effort to provide our users purest, safest and effective peptides, We have taken another revolutionary step in peptide packaging.</li>
        <li>We have come up with TEMPORECT Pro, a temperature and shock proof packaging which will not only safeguard peptides from getting damage during transportation and storage caused by Heat, Sunlight and stress, it will provide ease in transportation without worrying about outside temperature.</li>
    </ul>
    <hr style="color: white;">
    <p>
        With Years of research and rigorous testing, we have made sure that our new packaging stands out against heat, sunlight and External stress, Provide you the exact efficacy and potency you are promised for.
    </p>
    <div class="ul-content">
        <ul>
        <li>
            The bag is made of high quality Nylon and EPR for heat and Shock resistance.
        </li>
        </ul>`;
}

// Define content for each product image
function getCorrectedCapContent() {
    return `<h3>TEMPORECT Pro</h3>
    <hr style="color: white">
    <p>TEMPORECT Pro: New Revolutionary New Packaging for Heat and Temperature sensitive Drugs.</p>
    <hr style="color:white">
    <ul>
        <li>In our continuous effort to provide our users purest, safest and effective peptides, We have taken another revolutionary step in peptide packaging.</li>
        <li>We have come up with TEMPORECT Pro, a temperature and shock proof packaging which will not only safeguard peptides from getting damage during transportation and storage caused by Heat, Sunlight and stress, it will provide ease in transportation without worrying about outside temperature.</li>
    </ul>
    <hr style="color: white;">
    <p>
        With Years of research and rigorous testing, we have made sure that our new packaging stands out against heat, sunlight and External stress, Provide you the exact efficacy and potency you are promised for.
    </p>
    <div class="ul-content">
    <ul>
    <li>Heat resistant DUAL LAYER SILVER coating inside the bag preserves the efficacy of the medicine for a longer period.</li>
    <li>Added Cushioing to protect Vials from Physical damage caused by shock and stress during transportation and storage.</li>
    </ul>
    </div>`;
}

function getCorrectedCapEva(){
    return `<h3>TEMPORECT Pro</h3>
    <hr style="color: white">
    <p>TEMPORECT Pro: New Revolutionary New Packaging for Heat and Temperature sensitive Drugs.</p>
    <hr style="color:white">
    <ul>
        <li>In our continuous effort to provide our users purest, safest and effective peptides, We have taken another revolutionary step in peptide packaging.</li>
        <li>We have come up with TEMPORECT Pro, a temperature and shock proof packaging which will not only safeguard peptides from getting damage during transportation and storage caused by Heat, Sunlight and stress, it will provide ease in transportation without worrying about outside temperature.</li>
    </ul>
    <hr style="color: white;">
    <p>
        With Years of research and rigorous testing, we have made sure that our new packaging stands out against heat, sunlight and External stress, Provide you the exact efficacy and potency you are promised for.
    </p>
    <div class="ul-content">
    <ul>
    <li>Special TEMPORECT Pro Ice packs, made using Nano Silver Atom help maintain the temperature inside the box for a longer period.</li>
    </ul>
    </div>`
}
    </script>
</body>
</html>

I want create a page by using the above code. When I paste the code in the page editor, it is not working.
Please help me out here

2

Go to Online Store > Themes, click the 3 dots (More Options) next to the customize theme button, and click Edit Code.

On the left-hand side, scroll to the template section and click “Add a new template”. Then select page, liquid, and the name of your page template. Here is will you will add all of your html, css, and js.

When you go back to the page you created, you can delete all of the code and text. Then on the right hand side under “Theme Template” you will select the template you made on the backend.

I would avoid using the head and body tags as shopify already provides this in the theme.liquid page.

3

I am doing this, but it is not working dynamically as per my code. Any alternative solution