The main product section for Shopify theme

main-product.liquid

<div class="container bg-white shadow-sm">
    <div class="row gx-5 p-5">
        <div class="col-6 main-product__image">
            <img src="{{ product.featured_image | image_url: width: 600 }}" alt="{{ product.featured_image.alt }}">
        </div>
        
        <div class="col-6 main-product__form">
            <h1>{{ product.title }}</h1>

            <div class="mt-3">{{ product.description }}</div>

            {% form "product", product %}
                <select name="id" id="variant-selector" class="visually-hidden mt-3">
                    {% for variant in product.variants  %}
                        <option value="{{ variant.id }}" {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %}>
                            {{ variant.title }}
                        </option>
                    {% endfor %}
                </select>
        
                <div class="swatches mt-3">
                    <p class="mb-2">Colour</p>
                    {% for variant in product.variants  %}
                        <button
                            type="button"
                            class="btn swatches__colour"
                            style="background: {{ variant.metafields.details.color }}"
                            data-variant-id="{{ variant.id }}"
                            data-variant-image="{{ variant.featured_image | image_url: width: 600 }}"
                        ></button>
                    {% endfor %}
                </div>

                <div class="mt-3">
                    <label for="quantity" class="form-label">Quantity</label>
                    <input type="text" class="form-control" id="quantity" name="quantity" min="1" value="1">
                </div>

                <input type="submit" value="Add to cart" class="btn btn-primary mt-3">
            {% endform %}
        </div>
    </div>
</div>

{{ "main-product.css" | asset_url | stylesheet_tag }}
{{ "main-product.js" | asset_url | script_tag }}

{% schema %}
{
    "name": "Main Product",
    "tag": "section",
    "class": "main-product",
    "presets": [
        {
            "name": "Main Product"
        }
    ]
}
{% endschema %}