How can I show only selected color variants on my product page?

Store Design
1

Hey all ! I’m using prestige theme and was wondering if anyone can help me. Right now when I select a product it opens the page of the product I want to view, however page is showing all the color variants at the same time on the same page, I would like to only view the pictures of the chosen color variant. I’m now sure if i’m explaining this right but I need help :slightly_smiling_face:

2

@Danny04099

Please share your store URL with password NOT the admin password.

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on mail | Shopify Design Changes | Custom Modifications In to Shopify Theme

3

@Danny04099

Please add the following CSS code to your assets/theme.scss.liquid bottom of the file.

@media screen and (max-width: 640px) {

.globo-align-content-left label.name-option {
    text-align: center;
}

.globo-swatch-product-detail ul.value {
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.ProductForm__Label {
    text-align: center;
}

.QuantitySelector {
    align-items: center;
    border: 1px solid #dadada;
    white-space: nowrap;
    justify-content: center;
    margin: 0 auto;
    display: table;
}

.ProductMeta__Description {
    margin: 28px 28px;
}

.ProductForm__AddToCart {
    display: table;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 85%;
}

}

Thanks!

4

@Danny04099

Remove the previous provided code. and wait

5

@Danny04099

Remove the previously provided All code.

Please add the following CSS code to your assets/theme.scss.liquid bottom of the file.

@media screen and (max-width: 640px) {

.globo-align-content-left label.name-option {
    text-align: center;
}

.globo-swatch-product-detail ul.value {
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.ProductForm__Label {
    text-align: center;
}

.QuantitySelector {
    align-items: center;
    border: 1px solid #dadada;
    white-space: nowrap;
    justify-content: center;
    margin: 0 auto;
    display: table;
}

.ProductMeta__Description {
    margin: 28px 28px;
}

.ProductForm__AddToCart {
    display: table;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 85%;
}

#infiniteoptions-container {
    margin-bottom: 30px;
    width: 100% !important;
}

#infiniteoptions-container label {
    display: block !important;
    margin-bottom: 5px;
    text-align: center !important;
}

}

Thanks!