index-shop/site/templates/product.php

<?php
$shopifyHandle = $page->shopifyHandle()->or($page->slug());

snippet('header', ['title' => $page->title(), 'template' => 'shop']);
?>

<main>
    <nav class="store__nav">
        <a href="<?= $site->homePage()->url() ?>"><?= t('backToShop') ?></a>
    </nav>

    <section class="section__product"
             data-product-loader
             data-shopify-handle="<?= $shopifyHandle ?>"
             data-language="<?= $kirby->language()->code() ?>">

        <div class="product-loading">
            <p><?= t('loading') ?></p>
        </div>

        <div class="product-content" style="display: none;">
            <div class="col-left">
                <div class="hero">
                    <h2 class="p__baseline-big" data-product-title></h2>
                    <p class="p__baseline-big" data-product-price></p>
                </div>

                <div class="details" data-product-details></div>

                <div class="product-options" data-product-options style="display: none;">
                    <ul class="product-options__list" data-product-options-list></ul>
                </div>

                <?php snippet('buy-button') ?>
            </div>

            <div class="product-gallery swiper">
                <div class="swiper-wrapper" data-product-images></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
                <div class="swiper-pagination"></div>
            </div>
        </div>

        <div class="product-error" style="display: none;">
            <p><?= t('productNotFound') ?></p>
        </div>
    </section>
</main>

<?php snippet('structured-data-product') ?>
<?php snippet('footer', ['scripts' => ['product']]) ?>