Add legend in the product card

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;
}

    • Related Articles

    • Hide collection card with 0 product in collection list

      In collectionlist.liquid, add {% capture list_items %} {% for collection in section_collections limit: max_items %} {% if collection.products_count > 0 %} <div class="resource-list__item"> {% content_for 'block', type: '_collection-card', id: ...

    • Add “Description” title before the description on product page

      Add a custom liquid section in product page after add to cart button. Insert the following liquid in the custom liquid. {% if product.description != '' %} <br> <h3 style="color: #EC1C24; font-weight: 600;">DESCRIPTION & SPECIFICATIONS</h3> {% endif ...

    • Change swatch size on product card

      In base.css, find @media screen and (min-width: 750px) { /* desktop values */ --max-swatch-size: 32px; --max-pill-size: 16px; --max-filter-size: 28px; --scaling-factor: 0.65; } } Change --max-swatch-size: 32px; to --max-swatch-size: 50px;

    • Video carousel with product link

      {% doc %} @prompt I want a video carousel block with the followings: - unlimited videos, preferably adding thru the section - product thumbnail with product link, when click it goes to product page - desktop column: 3,4,5 - mobile column: 1,2 - ...

    • Enlarge swatch size in product page

      In product page customize, add the following code in custom css: .swatch-input__input + .swatch-input__label { --swatch-input--size: 4rem !important; }