Add legend in the product card

Find <fieldset class="variant-option variant-option--buttons variant-option--swatches"> in variant-swatches.liquid,

Add the following before the above:

<!-- ADD THIS LEGEND -->
<div class="swatch-legend">
<span class="swatch-legend__option-name">{{ product_option.name }}: </span>
<span class="swatch-legend__value" data-swatch-legend="{{ product_resource.id }}">
{%- if allow_preselection -%}
{%- for product_option_value in product_option.values -%}
{%- if product_option_value.selected -%}{{ product_option_value.name }}{%- break -%}{%- endif -%}
{%- endfor -%}
{%- else -%}
{{ product_option.values.first.name }}
{%- endif -%}
</span>

</div>
<!-- END LEGEND -->



In base.css, add the styling at your preference:
.swatch-legend {
display: flex;
gap: 4px;
font-size: 11px !important;
margin-block-end: 0 !important;
width: 100%;
color: rgb(var(--color-foreground-rgb));
padding-bottom: 2px !important;
}