Change swatch size on product card

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
Alert
--max-swatch-size: 50px;

    • Related Articles

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

    • Change Sale Badge to % off

      In card-product.liquid {% comment %} {{- 'products.product.on_sale' | t -}} {% endcomment %} {%- assign percent = card_product.compare_at_price | minus: card_product.price | times: 100 | divided_by: card_product.compare_at_price | round -%} Save {{ ...

    • Change displayed size images in Multicolumn section

      At the multicolumn section, paste the following: .multicolumn-card__image-wrapper--third-width { width: 20% !important; }

    • 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: ...

    • Dynamic SKU on product page

      In edit code, add the following liquid in Block. {% doc %} @prompt Create a dynamic SKU display that automatically updates when product variants are changed without requiring a page refresh. The SKU should be visible on the product page and change ...