Prestige Theme Help with Product Zoom

Store Design
, ,
1

Hi,

On mobile the product image zoom on my website is controlled by the + on product images. However I want customers to be able to click on the photo and for it to zoom in, how do I change this?

Currently using Prestige Theme

Example of product page:

2

Hi @saintnoir

Ok dear, please share your store URL and collaborator code with me so I can check and provide you with the proper solution.

3

Hi @saintnoir,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

@media screen and (max-width: 999px) {
.product-gallery__zoom-button.circle-button {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}
.product-gallery__zoom-button.circle-button .icon {
    --circle-button-size: 2.75rem;
    --circle-button-background: var(--button-text-primary);
    --circle-button-text-color: var(--button-background-primary);
    width: var(--circle-button-size);
    height: var(--circle-button-size);
    background: rgb(var(--circle-button-background));
    color: rgb(var(--circle-button-text-color));
    border-radius: var(--rounded-full);
    box-shadow: 0 .125rem .625rem rgb(var(--circle-button-text-color) / .15);
    position: absolute;
    inset-block-start: 1.25rem;
    inset-inline-end: 0;
    padding: 0.85rem;
}
}

If I helped you, then a Like would be truly appreciated.

Best,
NamPhan

4

Hi this worked, but wouldn’t let the customer scroll on the product image gallery :frowning:

5

Hi @saintnoir,

Can I send you a collaborator invite? It will help me debug this.