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

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

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