Enlarge swatch size in product page

Enlarge swatch size in product page

In product page customize, add the following code in custom css:

Idea
.swatch-input__input + .swatch-input__label {
  --swatch-input--size: 4rem !important;
}

    • Related Articles

    • Display bundle items in product page

      Add Metafields to Bundle Product Example metafield: Namespace & key: custom.bundle_items Type: List of Products (this is the ideal type for linking individual Shopify products) Assign Metafields to Bundle Product: Go to the bundle product in your ...

    • Request for Quote button in product page

      In customize theme, add custom liquid in default product template. Please the code as below. Note: the rule is when the price is '0'. {% if product.selected_or_first_available_variant.price == 0 %} <a href="https://wa.me/60162261314?text={{ 'I would ...

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

    • Insert product weight into product page

      In custom liquid, insert the following: Weight: {% for variant in product.variants %}{{variant.weight | weight_with_unit }}{% endfor %}

    • Increase Page width

      Go to base.css Find "narrow" Replace with "wide" e.g: .page-width--wide { max-width: 72.6rem; padding: 0; }