Shrine Pro Theme - Page Scroll Up to Show Selected Variant Image on Mobile

[nicknac]

Hi. I hope that someone can help me? Thanks in advance 😊

How can I get the page to scroll up to show the variant image on the product page on mobile?

The correct image is being shown, it's just that with the variant selectors being further down the page only part of the image is being shown.

On the Dawn theme, the page automatically scrolled up to show the full variant image.

This is the product-modal.js file contents for shrine theme:

if (!customElements.get('product-modal')) {
customElements.define('product-modal', class ProductModal extends ModalDialog {
constructor() {
super();
}

hide() {
super.hide();
}

show(opener) {
super.show(opener);
this.showActiveMedia();
}

showActiveMedia() {
this.querySelectorAll(`[data-media-id]:not([data-media-id="${this.openedBy.getAttribute("data-media-id")}"])`).forEach((element) => {
element.classList.remove('active');
}
)
const activeMedia = this.querySelector(`[data-media-id="${this.openedBy.getAttribute("data-media-id")}"]`);
if (!activeMedia) return;
const activeMediaTemplate = activeMedia.querySelector('template');
const activeMediaContent = activeMediaTemplate ? activeMediaTemplate.content : null;
activeMedia.classList.add('active');
activeMedia.scrollIntoView();

const container = this.querySelector('[role="document"]');
container.scrollLeft = (activeMedia.width - container.clientWidth) / 2;

if (activeMedia.nodeName == 'DEFERRED-MEDIA' && activeMediaContent && activeMediaContent.querySelector('.js-youtube'))
activeMedia.loadContent();
}
});
}

[DitalTek]

Firstly, You can check on setting of theme and if theme not support setup for that you need to customize with code.