Sold-out swatch overlay to make them more visible

Sold-out swatch overlay to make them more visible

In variant-picker-styles.liquid, add the following before {% endstylesheet %}

/* Dim unavailable non-swatch buttons */ .variant-option__button-label:not(.variant-option__button-label--has-swatch):has([data-option-available='false']) { opacity: 0.4; cursor: not-allowed; } /* Dim unavailable swatches */ .variant-option__button-label--has-swatch:has([data-option-available='false']) { opacity: 0.45; cursor: not-allowed; }

    • 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 swatch size on product card

      In swatch-styles.liquid, 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;

    • Remove/hide Sold out Badge for out of stock Products

      In base.css file, add this code at the bottom: .grid__item .card-wrapper:has(.price--sold-out) .card--media .card__badge { display: none !important; }

    • Make a image banner section overlay with another at the top

      In the image banner section, paste the following in custom css: @media screen and (min-width: 750px){ .banner { position: relative; z-index: -20; margin-top: -180px; padding-bottom: 50px; }}

    • Push the sold out variant to the end in variant picker

      Go to variant-main-picker.liquid, search for {%- for product_option_value in product_option.values -%} and replace with: {%- assign available_option_values = product_option.values | where: "available", true -%} {%- assign unavailable_option_values = ...