Productpictures: Changing through clicking on them - How?

[ChevalDore]

Hi lovely Shopify Community,

is there a genius out there who knows how to change the product pictures (desktop/pc/browser view) only by clicking on the main picture which is visualized? (not the tiny preview pictures below)

I have the Theme: Dawn 14.0 and the desktop layout: Karrousel with preview pictures.

Here a foto for better understanding:

I`ve tried some default CSS with chat gpt but it did not work in the Theme edit. (has to be less then 500 letters)

Massive thanks in advance have a lovely day

Kind regards

Julian

[ChevalDore]

Hi my friend thanks for the quick reply.

Here is a screenshot of the code: I do find the theme liquid part. But where exactly do I need to insert the code? Which row?

Here is the Code in case it helps:

{%- comment %}locksmith:30f6{% endcomment -%}
{%- include ‘locksmith’ -%}
{%- comment %}</locksmith:30f6>{% endcomment -%}

{{ locksmith_initializations }}

{%- if settings.favicon != blank -%}

{%- endif -%}

{%- unless settings.type_header_font.system? and settings.type_body_font.system? -%}

{%- endunless -%} {{ page_title }} {%- if current_tags %} – tagged "{{ current_tags | join: ', ' }}"{% endif -%} {%- if current_page != 1 %} – Page {{ current_page }}{% endif -%} {%- unless page_title contains shop.name %} – {{ shop.name }}{% endunless -%}

{% if page_description %}
{%- comment %}locksmith:b0e3{% endcomment -%}
{%- capture var %}{% render ‘locksmith-variables’, variable: ‘transparent’, hiding_scope: ‘resource’ %}{% endcapture %}{% if var == ‘true’ %}{% endif -%}
{%- comment %}original: {%- endcomment %}
{%- comment %}</locksmith:b0e3>{% endcomment -%}
{% endif %}

{% render ‘meta-tags’ %}

{%- if settings.animations_reveal_on_scroll -%}

{%- endif -%}

{{ content_for_header }}

.rich-text__text.rte.scroll-trigger.animate--slide-in p { margin: 0 !important; }

{%- liquid
assign body_font_bold = settings.type_body_font | font_modify: ‘weight’, ‘bold’
assign body_font_italic = settings.type_body_font | font_modify: ‘style’, ‘italic’
assign body_font_bold_italic = body_font_bold | font_modify: ‘style’, ‘italic’
%}

{% style %}
{{ settings.type_body_font | font_face: font_display: ‘swap’ }}
{{ body_font_bold | font_face: font_display: ‘swap’ }}
{{ body_font_italic | font_face: font_display: ‘swap’ }}
{{ body_font_bold_italic | font_face: font_display: ‘swap’ }}
{{ settings.type_header_font | font_face: font_display: ‘swap’ }}

{% for scheme in settings.color_schemes -%}
{% assign scheme_classes = scheme_classes | append: ‘, .color-’ | append: scheme.id %}
{% if forloop.index == 1 -%}
:root,
{%- endif %}
.color-{{ scheme.id }} {
–color-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
{% if scheme.settings.background_gradient != empty %}
–gradient-background: {{ scheme.settings.background_gradient }};
{% else %}
–gradient-background: {{ scheme.settings.background }};
{% endif %}

{% liquid
assign background_color = scheme.settings.background
assign background_color_brightness = background_color | color_brightness
if background_color_brightness <= 26
assign background_color_contrast = background_color | color_lighten: 50
elsif background_color_brightness <= 65
assign background_color_contrast = background_color | color_lighten: 5
else
assign background_color_contrast = background_color | color_darken: 25
endif
%}

–color-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
–color-background-contrast: {{ background_color_contrast.red }},{{ background_color_contrast.green }},{{ background_color_contrast.blue }};
–color-shadow: {{ scheme.settings.shadow.red }},{{ scheme.settings.shadow.green }},{{ scheme.settings.shadow.blue }};
–color-button: {{ scheme.settings.button.red }},{{ scheme.settings.button.green }},{{ scheme.settings.button.blue }};
–color-button-text: {{ scheme.settings.button_label.red }},{{ scheme.settings.button_label.green }},{{ scheme.settings.button_label.blue }};
–color-secondary-button: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
–color-secondary-button-text: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
–color-link: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
–color-badge-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
–color-badge-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
–color-badge-border: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
–payment-terms-background-color: rgb({{ scheme.settings.background.rgb }});
}
{% endfor %}

{{ scheme_classes | prepend: ‘body’ }} {
color: rgba(var(–color-foreground), 0.75);
background-color: rgb(var(–color-background));
}

:root {
–font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
–font-body-style: {{ settings.type_body_font.style }};
–font-body-weight: {{ settings.type_body_font.weight }};
–font-body-weight-bold: {{ settings.type_body_font.weight | plus: 300 | at_most: 1000 }};

–font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
–font-heading-style: {{ settings.type_header_font.style }};
–font-heading-weight: {{ settings.type_header_font.weight }};

–font-body-scale: {{ settings.body_scale | divided_by: 100.0 }};
–font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }};

–media-padding: {{ settings.media_padding }}px;
–media-border-opacity: {{ settings.media_border_opacity | divided_by: 100.0 }};
–media-border-width: {{ settings.media_border_thickness }}px;
–media-radius: {{ settings.media_radius }}px;
–media-shadow-opacity: {{ settings.media_shadow_opacity | divided_by: 100.0 }};
–media-shadow-horizontal-offset: {{ settings.media_shadow_horizontal_offset }}px;
–media-shadow-vertical-offset: {{ settings.media_shadow_vertical_offset }}px;
–media-shadow-blur-radius: {{ settings.media_shadow_blur }}px;
–media-shadow-visible: {% if settings.media_shadow_opacity > 0 %}1{% else %}0{% endif %};

–page-width: {{ settings.page_width | divided_by: 10 }}rem;
–page-width-margin: {% if settings.page_width == ‘1600’ %}2{% else %}0{% endif %}rem;

–product-card-image-padding: {{ settings.card_image_padding | divided_by: 10.0 }}rem;
–product-card-corner-radius: {{ settings.card_corner_radius | divided_by: 10.0 }}rem;
–product-card-text-alignment: {{ settings.card_text_alignment }};
–product-card-border-width: {{ settings.card_border_thickness | divided_by: 10.0 }}rem;
–product-card-border-opacity: {{ settings.card_border_opacity | divided_by: 100.0 }};
–product-card-shadow-opacity: {{ settings.card_shadow_opacity | divided_by: 100.0 }};
–product-card-shadow-visible: {% if settings.card_shadow_opacity > 0 %}1{% else %}0{% endif %};
–product-card-shadow-horizontal-offset: {{ settings.card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
–product-card-shadow-vertical-offset: {{ settings.card_shadow_vertical_offset | divided_by: 10.0 }}rem;
–product-card-shadow-blur-radius: {{ settings.card_shadow_blur | divided_by: 10.0 }}rem;

–collection-card-image-padding: {{ settings.collection_card_image_padding | divided_by: 10.0 }}rem;
–collection-card-corner-radius: {{ settings.collection_card_corner_radius | divided_by: 10.0 }}rem;
–collection-card-text-alignment: {{ settings.collection_card_text_alignment }};
–collection-card-border-width: {{ settings.collection_card_border_thickness | divided_by: 10.0 }}rem;
–collection-card-border-opacity: {{ settings.collection_card_border_opacity | divided_by: 100.0 }};
–collection-card-shadow-opacity: {{ settings.collection_card_shadow_opacity | divided_by: 100.0 }};
–collection-card-shadow-visible: {% if settings.collection_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
–collection-card-shadow-horizontal-offset: {{ settings.collection_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
–collection-card-shadow-vertical-offset: {{ settings.collection_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
–collection-card-shadow-blur-radius: {{ settings.collection_card_shadow_blur | divided_by: 10.0 }}rem;

–blog-card-image-padding: {{ settings.blog_card_image_padding | divided_by: 10.0 }}rem;
–blog-card-corner-radius: {{ settings.blog_card_corner_radius | divided_by: 10.0 }}rem;
–blog-card-text-alignment: {{ settings.blog_card_text_alignment }};
–blog-card-border-width: {{ settings.blog_card_border_thickness | divided_by: 10.0 }}rem;
–blog-card-border-opacity: {{ settings.blog_card_border_opacity | divided_by: 100.0 }};
–blog-card-shadow-opacity: {{ settings.blog_card_shadow_opacity | divided_by: 100.0 }};
–blog-card-shadow-visible: {% if settings.blog_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
–blog-card-shadow-horizontal-offset: {{ settings.blog_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
–blog-card-shadow-vertical-offset: {{ settings.blog_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
–blog-card-shadow-blur-radius: {{ settings.blog_card_shadow_blur | divided_by: 10.0 }}rem;

–badge-corner-radius: {{ settings.badge_corner_radius | divided_by: 10.0 }}rem;

–popup-border-width: {{ settings.popup_border_thickness }}px;
–popup-border-opacity: {{ settings.popup_border_opacity | divided_by: 100.0 }};
–popup-corner-radius: {{ settings.popup_corner_radius }}px;
–popup-shadow-opacity: {{ settings.popup_shadow_opacity | divided_by: 100.0 }};
–popup-shadow-horizontal-offset: {{ settings.popup_shadow_horizontal_offset }}px;
–popup-shadow-vertical-offset: {{ settings.popup_shadow_vertical_offset }}px;
–popup-shadow-blur-radius: {{ settings.popup_shadow_blur }}px;

–drawer-border-width: {{ settings.drawer_border_thickness }}px;
–drawer-border-opacity: {{ settings.drawer_border_opacity | divided_by: 100.0 }};
–drawer-shadow-opacity: {{ settings.drawer_shadow_opacity | divided_by: 100.0 }};
–drawer-shadow-horizontal-offset: {{ settings.drawer_shadow_horizontal_offset }}px;
–drawer-shadow-vertical-offset: {{ settings.drawer_shadow_vertical_offset }}px;
–drawer-shadow-blur-radius: {{ settings.drawer_shadow_blur }}px;

–spacing-sections-desktop: {{ settings.spacing_sections }}px;
–spacing-sections-mobile: {% if settings.spacing_sections < 24 %}{{ settings.spacing_sections }}{% else %}{{ settings.spacing_sections | times: 0.7 | round | at_least: 20 }}{% endif %}px;

–grid-desktop-vertical-spacing: {{ settings.spacing_grid_vertical }}px;
–grid-desktop-horizontal-spacing: {{ settings.spacing_grid_horizontal }}px;
–grid-mobile-vertical-spacing: {{ settings.spacing_grid_vertical | divided_by: 2 }}px;
–grid-mobile-horizontal-spacing: {{ settings.spacing_grid_horizontal | divided_by: 2 }}px;

–text-boxes-border-opacity: {{ settings.text_boxes_border_opacity | divided_by: 100.0 }};
–text-boxes-border-width: {{ settings.text_boxes_border_thickness }}px;
–text-boxes-radius: {{ settings.text_boxes_radius }}px;
–text-boxes-shadow-opacity: {{ settings.text_boxes_shadow_opacity | divided_by: 100.0 }};
–text-boxes-shadow-visible: {% if settings.text_boxes_shadow_opacity > 0 %}1{% else %}0{% endif %};
–text-boxes-shadow-horizontal-offset: {{ settings.text_boxes_shadow_horizontal_offset }}px;
–text-boxes-shadow-vertical-offset: {{ settings.text_boxes_shadow_vertical_offset }}px;
–text-boxes-shadow-blur-radius: {{ settings.text_boxes_shadow_blur }}px;

–buttons-radius: {{ settings.buttons_radius }}px;
–buttons-radius-outset: {% if settings.buttons_radius > 0 %}{{ settings.buttons_radius | plus: settings.buttons_border_thickness }}{% else %}0{% endif %}px;
–buttons-border-width: {% if settings.buttons_border_opacity > 0 %}{{ settings.buttons_border_thickness }}{% else %}0{% endif %}px;
–buttons-border-opacity: {{ settings.buttons_border_opacity | divided_by: 100.0 }};
–buttons-shadow-opacity: {{ settings.buttons_shadow_opacity | divided_by: 100.0 }};
–buttons-shadow-visible: {% if settings.buttons_shadow_opacity > 0 %}1{% else %}0{% endif %};
–buttons-shadow-horizontal-offset: {{ settings.buttons_shadow_horizontal_offset }}px;
–buttons-shadow-vertical-offset: {{ settings.buttons_shadow_vertical_offset }}px;
–buttons-shadow-blur-radius: {{ settings.buttons_shadow_blur }}px;
–buttons-border-offset: {% if settings.buttons_radius > 0 or settings.buttons_shadow_opacity > 0 %}0.3{% else %}0{% endif %}px;

–inputs-radius: {{ settings.inputs_radius }}px;
–inputs-border-width: {{ settings.inputs_border_thickness }}px;
–inputs-border-opacity: {{ settings.inputs_border_opacity | divided_by: 100.0 }};
–inputs-shadow-opacity: {{ settings.inputs_shadow_opacity | divided_by: 100.0 }};
–inputs-shadow-horizontal-offset: {{ settings.inputs_shadow_horizontal_offset }}px;
–inputs-margin-offset: {% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_opacity > 0 %}{{ settings.inputs_shadow_vertical_offset | abs }}{% else %}0{% endif %}px;
–inputs-shadow-vertical-offset: {{ settings.inputs_shadow_vertical_offset }}px;
–inputs-shadow-blur-radius: {{ settings.inputs_shadow_blur }}px;
–inputs-radius-outset: {% if settings.inputs_radius > 0 %}{{ settings.inputs_radius | plus: settings.inputs_border_thickness }}{% else %}0{% endif %}px;

–variant-pills-radius: {{ settings.variant_pills_radius }}px;
–variant-pills-border-width: {{ settings.variant_pills_border_thickness }}px;
–variant-pills-border-opacity: {{ settings.variant_pills_border_opacity | divided_by: 100.0 }};
–variant-pills-shadow-opacity: {{ settings.variant_pills_shadow_opacity | divided_by: 100.0 }};
–variant-pills-shadow-horizontal-offset: {{ settings.variant_pills_shadow_horizontal_offset }}px;
–variant-pills-shadow-vertical-offset: {{ settings.variant_pills_shadow_vertical_offset }}px;
–variant-pills-shadow-blur-radius: {{ settings.variant_pills_shadow_blur }}px;
}

*,
*::before,
*::after {
box-sizing: inherit;
}

html {
box-sizing: border-box;
font-size: calc(var(–font-body-scale) * 62.5%);
height: 100%;
}

body {
display: grid;
grid-template-rows: auto auto 1fr auto;
grid-template-columns: 100%;
min-height: 100%;
margin: 0;
font-size: 1.5rem;
letter-spacing: 0.06rem;
line-height: calc(1 + 0.8 / var(–font-body-scale));
font-family: var(–font-body-family);
font-style: var(–font-body-style);
font-weight: var(–font-body-weight);
}

@media screen and (min-width: 750px) {
body {
font-size: 1.6rem;
}
}
{% endstyle %}

{{ ‘base.css’ | asset_url | stylesheet_tag }}

{%- unless settings.type_body_font.system? -%}
{% comment %}theme-check-disable AssetPreload{% endcomment %}

{% comment %}theme-check-enable AssetPreload{% endcomment %} {%- endunless -%} {%- unless settings.type_header_font.system? -%} {% comment %}theme-check-disable AssetPreload{% endcomment %} {% comment %}theme-check-enable AssetPreload{% endcomment %} {%- endunless -%}

{%- if localization.available_countries.size > 1 or localization.available_languages.size > 1 -%}
{{ ‘component-localization-form.css’ | asset_url | stylesheet_tag: preload: true }}

{%- endif -%}

{%- if settings.predictive_search_enabled -%}

{%- endif -%} {{ 'accessibility.skip_to_text' | t }}

{%- if settings.cart_type == ‘drawer’ -%}
{%- render ‘cart-drawer’ -%}
{%- endif -%}

{% sections ‘header-group’ %}

{{ content_for_layout }}{{ locksmith_content_for_layout_addenda }}

{% sections ‘footer-group’ %}

• {{ 'accessibility.refresh_page' | t }}
• {{ 'accessibility.link_messages.new_window' | t }}

{%- if settings.predictive_search_enabled -%}

{%- endif -%}

[tim_1]

You would not be able to do it with CSS only.

However, here is my attempt to do this without any theme code edits:

1. Create a “custom liquid” block and make it first in the “Product information” section. Paste this code:

2. Put this code into “Custom CSS” of the “Product Information” section:

.slider-buttons {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 50%;
  width: 100%;
  padding: 0 1rem;
}
@media (min-width: 768px) {
  .slider-buttons {
    margin: 0 -2rem;
    width: calc(100% + 4rem);
    padding: 0;
  }
}
.slider-counter {
  display: none;
}
.product__media-item {
  width: 100%;
  display: block;
}
.product__media-list + div .slider-button {
  z-index: 10;
  transform: scale(1.25);
  border-radius: 50%;
  border: 1px solid rgba(var(--color-foreground), var(--media-border-opacity));
  background: rgb(var(--color-background));
}

Result:

Preview In my test store: https://kh2ms1gik53aoa07-23104437.shopifypreview.com/products/absolut-vodka-700ml

[ChevalDore]

Didnt work

[ChevalDore]

Hi Tim,

thanks for getting back to me.

So first I try to make a liquid block like this?

Second i insert this code in the CSS Theme:

Unfortunatelly nothing happens. Did i do smthg wrong?`

Kind regards

Jul

[tim_1]

Everything is done in Customizer, no theme code editing.

And yes, you need this done to see any changes

[ChevalDore]

Great Tim, it worked!!

Is there a way to center the arrows for the videos?

And I wanted to copy and paste the same for my other products. But there it did not work

Do you know why?

Kind regards

Julian

[tim_1]

Can’t really center arrows for each slide, but can instead center slides:

Add this to the Custom CSS:

.product__media-item {
  display: flex;
  align-content: center;
}

The Golden spoon has only one image, so no reason to show arrows.

[ChevalDore]

Hi mate,

in the custom liquid block it does not work:

And in the CSS file now it says it has is hat to be less then 500 letters…

Do you know a way to shorten it? Blessings,

Julian

[tim_1]

Yeah, the limit is not helping… Changed the code a little to fit everything together:

.slider-buttons {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: calc(50% - 2rem);
  width: 100%;
  padding: 0 1rem;
}
@media (min-width: 768px) {
  .slider-buttons {
    margin: 0 -2rem;
    width: calc(100% + 4rem);
    padding: 0;
  }
}
.slider-counter {
  display: none;
}
.product__media-item {
  width: 100%;
  display: flex;
  align-items: center;
}
.product__media-list + div .slider-button {
  z-index: 10;
  transform: scale(1.25);
  border-radius: 50%;
  background: rgba(var(--color-foreground), 0.1);
}

[ChevalDore]

Amazing @tim_1

Thank you so much for your quick support

Looks way better now

God bless you!

• Juls

[tim_1]

Looks nice now. You can leave me a bunch of likes