Move product image with arrow keys

Store Design
, , , ,
1

Hello, does someone know how to make the product image can be moved using arrow keys?

Like this store does: https://www.boydblue.com/products/hestia-occasional-chair

Thank you

2

Thank you for your quick reply.

I am using Theme Editions, version 13.1.0

No theme.js or custom.js, only editions.js, added the js code you sent, doesn’t work.

And not familiar with the second method.

Here’s the website: https://villagestores.com.au/collections/beds/products/syrah-bed?variant=40792902959170

Here’s the product gallery snipset

{% assign selected_variant = product.selected_or_first_available_variant %}
{% assign selected_media = selected_variant.featured_media | default: product.featured_media %}

{% for media in product.media %}

{% case media.media_type %}
{% when ‘image’ %}
{% assign scale = 1 %}
{% if enable_zoom %}
{% assign scale = 1.5 %}
{% endif %}

{%
render ‘rimg’,
img: media,
size: ‘x700’,
scale: scale,
lazy: true
%}
{% when ‘external_video’ %}
{{ media | media_tag: image_size: ‘1024x’ }}
{% when ‘model’ %}
{{ media | model_viewer_tag: image_size: ‘1024x’, reveal: ‘interaction’ , toggleable: true, interaction-prompt-threshold: 0 }}

<img
src=“{{ media.preview_image | img_url: ‘1024x’ }}”
alt=“{{ media.preview_image.alt | escape }}”
width=“{{ media.preview_image.width }}”
height=“{{ media.preview_image.height }}”
loading=“lazy”

{% when 'video' %} {{ media | media_tag: image_size: '1024x' }} {% else %} {{ media | media_tag }} {% endcase %} {% else %} {% if onboarding %} {{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }} {% else %} {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }} {% endif %} {% endfor %}

{% assign first_model = product.media | where: “media_type”, “model” | first %}
{% if selected_media.media_type == ‘model’ %}
{% assign model = selected_media %}
{% else %}
{% assign model = first_model %}
{% endif %}
{% if model %}

<button
class=“product-gallery–viewinyourspace”
data-default-model-id=“{{ first_model.id }}”
data-shopify-xr
data-shopify-model3d-id=“{{ model.id }}”
data-shopify-title=“{{ product.title }}”
data-shopify-xr-hidden

{% render ‘icon-library’, id: ‘icon-3D’ %}
{{ ‘product.media.view_in_your_space’ | t }}

{% endif %}

{% if product.media.size > 1 %}

{% for media in product.media %} {% if media.media_type == 'video' or media.media_type == 'external_video' %} {% render 'icon-library', id: 'icon-play-thumb' %} {% elsif media.media_type == 'model' %} {% render 'icon-library', id: 'icon-model-thumb' %} {% endif %} {% render 'rimg', class: 'product-gallery--media-thumbnail-img', img: media.preview_image, size: '100x', crop: 'center', lazy: true, %} {% endfor %}
{% endif %}