Change the size of the variation swatches on shop

This topic has 4 replies, 2 voices, and was last updated 2 years, 11 months ago ago by Olga Barlow

  • Avatar: Jennifer
    Jennifer
    Participant
    January 25, 2022 at 15:39

    Hi there,

    I looking for a way to making the squares of the variation swatches smaller on shop page.
    If its possible, make smaller only on mobile version.

    I found this topic, but it seems to only being for single product page.
    https://www.8theme.com/topic/change-the-size-of-variation-swatches-skins-attribute/

    regards,

    3 Answers
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    January 25, 2022 at 17:12

    Hello,

    At this moment it’s 18px x 16px https://prnt.sc/26j6bkx Are you sure that you want to make it smaller? What size do you want for the mobile version for the variation swatches?

    Regards

    Avatar: Jennifer
    Jennifer
    Participant
    January 25, 2022 at 22:30

    Hi Olga,

    thank you for your reply.
    I think a height of 14px would be okey.
    Something like 16px x 14px?

    Thanks in advance,
    Jenn

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    January 26, 2022 at 12:42

    Hello,

    Add the below code to Theme Options > Custom CSS

    @media only screen and (max-width:992px){
        ul.st-swatch-size-normal li.type-label {
            min-width: 16px;
            max-width: 16px;
        }
        ul.st-swatch-size-normal li.type-label a, ul.st-swatch-size-normal li.type-label span {
            font-size: 8px;
            padding: 3px;
        }
        ul.st-swatch-size-normal li.type-color {
            width: 16px;
            height:16px;
        }
    }

    Regards

  • Viewing 4 results - 1 through 4 (of 4 total)

The issue related to '‘Change the size of the variation swatches on shop’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.