Symmetry Theme: moving thumbnails UNDER product image when clicked possible?

Symmetry Theme: moving thumbnails UNDER product image when clicked possible?

Delasoul
Excursionist
44 0 3

Hi all,

 

does anybody know if it's possible to move the thumbnails under the picture when a product picture is selected? It's covering so much from the picture that I wish to have it out of the picture and only underneith:

 

Delasoul_1-1713535015269.png

 

Thanks for help!

 

 

 

Replies 5 (5)
Delasoul
Excursionist
44 0 3

https://casa-amao.com/

PW: deanee

 

Sorry, completly forgot to add this info 🙂

Delasoul
Excursionist
44 0 3

@kaiyaa , it's looking good on the main product page but once you click on the picture (to zoom in) it moves into the picture screen...

Delasoul
Excursionist
44 0 3

hi @kaiyaa,

unfortunatly it's not changing anything with the code.  That should be the correct place, right?

Delasoul_0-1713537981977.png

 

Delasoul
Excursionist
44 0 3

Here it is:

<!doctype html>
{%- liquid
  assign rtl_langs = 'ar,arc,dv,fa,ha,he,khw,ks,ku,ps,ur,yi' | split: ','
  assign current_lang = localization.language.iso_code | split: '-' | first
  if rtl_langs contains current_lang
    assign lang_dir = 'rtl'
  else
    assign lang_dir = 'ltr'
  endif
-%}
<html lang="{{ request.locale.iso_code }}" dir="{{ lang_dir }}">
  <head>    
    <!-- Symmetry 6.0.3 -->

    <title>
      {{ page_title }}
      {% if current_tags -%}
        {%- assign meta_tags = current_tags | join: ', ' %} &ndash; {{ 'general.meta.tags' | t: tags: meta_tags -}}
      {%- endif %}
      {% if current_page != 1 %} &ndash; {{ 'general.meta.page' | t: page: current_page }}{% endif %}
      {% unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless %}
    </title>

    {% render 'head-tag' %}

    {%- liquid
      assign base_font = settings.type_base_font
      assign base_font_bold = base_font | font_modify: 'weight', 'bolder'
      assign base_font_medium = base_font | font_modify: 'weight', '500'
      assign base_font_italic = base_font | font_modify: 'style', 'italic'
      assign base_font_bold_italic = base_font_bold | font_modify: 'style', 'italic'
      assign heading_font = settings.type_heading_font
      assign logo_font = settings.type_logo_font
      assign nav_font = settings.type_nav_font
      assign nav_font_600 = nav_font | font_modify: 'weight', '600'
    -%}

    <style>
            {{ base_font | font_face: font_display: 'fallback' }}
            {{ base_font_bold | font_face: font_display: 'fallback' }}
            {{ base_font_medium | font_face: font_display: 'fallback' }}<script>
      window.addEventListener('load', () => {
         let el = document.querySelector('#block-id-text_WfzxJ3 .majortitle');
         el.innerHTML = el.innerText.split(', ')[0] + '</br>' + el.innerText.split(', ')[1]
      })
      </script>
            {{ base_font_italic | font_face: font_display: 'fallback' }}
            {{ base_font_bold_italic | font_face: font_display: 'fallback' }}
            {{ heading_font | font_face: font_display: 'fallback' }}
            {{ logo_font | font_face: font_display: 'fallback' }}
            {{ nav_font | font_face: font_display: 'fallback' }}
            {{ nav_font_600 | font_face: font_display: 'fallback' }}
    </style>

    {% render 'social-meta-tags' %}

    {{ 'styles.css' | asset_url | stylesheet_tag: preload: true }}

    {%- if settings.custom_theme_css != blank -%}
      {{ 'custom.css' | asset_url | stylesheet_tag: preload: true }}
    {%- endif -%}

    {%- if settings.swatch_enabled and settings.swatch_value_list != blank -%}
      <link rel="stylesheet" href="{{ 'swatches.css' | asset_url }}" media="print" onload="this.media='all'">
      <noscript><link rel="stylesheet" href="{{ 'swatches.css' | asset_url }}"></noscript>
    {%- endif -%}

    <script>
      window.theme = window.theme || {};
      theme.money_format_with_product_code_preference = {% if settings.product_currency_code_enabled %}{{ shop.money_with_currency_format | json }}{% else %}{{ shop.money_format | json }}{% endif %};
      theme.money_format_with_cart_code_preference = {% if settings.cart_currency_code_enabled %}{{ shop.money_with_currency_format | json }}{% else %}{{ shop.money_format | json }}{% endif %};
      theme.money_format = {{ shop.money_format | json }};
      theme.strings = {
        previous: {{ 'general.accessibility_labels.previous' | t | json }},
        next: {{ 'general.accessibility_labels.next' | t | json }},
        addressError: {{ 'map.errors.address_error' | t | json }},
        addressNoResults: {{ 'map.errors.address_no_results' | t | json }},
        addressQueryLimit: {{ 'map.errors.address_query_limit_html' | t | json }},
        authError: {{ 'map.errors.auth_error' | t | json }},
        icon_labels_left: {{ 'general.icon_labels.left' | t | escape | json }},
        icon_labels_right: {{ 'general.icon_labels.right' | t | escape | json }},
        icon_labels_down: {{ 'general.icon_labels.down' | t | escape | json }},
        icon_labels_close: {{ 'general.icon_labels.close' | t | escape | json }},
        icon_labels_plus: {{ 'general.icon_labels.plus' | t | escape | json }},
        imageSlider: {{ 'general.slider.images' | t | json }},
        cart_terms_confirmation: {{ 'cart.terms.confirmation' | t | json }},
        cart_general_quantity_too_high: {{ 'cart.general.quantity_too_high' | t: quantity: '[QUANTITY]' | json }},
        products_listing_from: {{ 'products.listing.from' | t | json }},
        layout_live_search_see_all: {{ 'layout.live_search.see_all' | t | json }},
        products_product_add_to_cart: {{ 'products.product.add_to_cart' | t | json }},
        products_variant_no_stock: {{ 'products.variant.no_stock' | t | json }},
        products_variant_non_existent: {{ 'products.variant.non_existent' | t | json }},
        products_product_pick_a: {{ 'products.product.pick_a' | t | json }},
        general_navigation_menu_toggle_aria_label: {{ 'general.navigation.menu_toggle_aria_label' | t | json }},
        general_accessibility_labels_close: {{ 'general.accessibility_labels.close' | t | json }},
        products_product_added_to_cart: {{ 'products.product.added_to_cart' | t | json }},
        general_quick_search_pages: {{ 'general.quick_search.pages' | t | json }},
        general_quick_search_no_results: {{ 'general.quick_search.no_results' | t | json }},
        collections_general_see_all_subcollections: {{ 'collections.general.see_all_subcollections' | t | json }}
      };
      theme.routes = {
        cart_url: '{{ routes.cart_url }}',
        cart_add_url: '{{ routes.cart_add_url }}.js',
        cart_update_url: '{{ routes.cart_update_url }}.js',
        predictive_search_url: '{{ routes.predictive_search_url }}'
      };
      theme.settings = {
        cart_type: {{ settings.cart_type | json }},
        after_add_to_cart: {{ settings.after_add_to_cart | json }},
        quickbuy_style: {{ settings.quickbuy_style | json }},
        avoid_orphans: {{ settings.avoid_orphans | json }}
      };
      document.documentElement.classList.add('js');
    </script>

    <script src="{{ 'vendor.min.js' | asset_url }}" defer="defer"></script>
    <script src="{{ 'theme.js' | asset_url }}" defer="defer"></script>

    {{ content_for_header }}
    
    <script>
      window.addEventListener('load', () => {
         let el = document.querySelector('#block-id-text_WfzxJ3 .majortitle');
         el.innerHTML = el.innerText.split(', ')[0] + '</br>' + el.innerText.split(', ')[1]
      })
    </script>
<style>

@media only screen and (max-width: 767px){
#section-id-template--21377061749074__custom_row_kdtj6y >.flexible-layout {
    flex-direction: column-reverse!important;
}

.flexible-layout .column{
	    
	    margin-bottom: 0em;
  margin-top: 1.5em;
}
}

  
</style>
  </head>
  <style>
     @media screen and (max-width: 989px) {

    .section-footer__row .section-footer__row__col p, .section-footer__row .section-footer__row__col a {
    	font-size: 11px !important;
    }
    }
  </style>
    <style>
     @media screen and (max-width: 989px) {

    .section-footer__row--blocks .section-footer__row__col:not(:last-child) {
    margin-bottom: 10px;
    }
    }
  </style>
      <style>
     @media screen and (max-width: 989px) {

    .section-footer__menu-block__menu li {
    margin-bottom: 0.2em;
    }
    }
  </style>
  <style>
    @media (max-width: 767.98px){
div#section-id-template--21377061749074__custom_row_racrtw {
margin-top: 10px !important;
}
}
</style>
  <style>
    .section-footer__row .section-footer__row__col p, .section-footer__row .section-footer__row__col a {
    	font-size: 13px !important;
    }
  </style>
  <body
    class="
      template-{{ template | split: '.' | first | handle }}
      {%- if template.suffix %} template-suffix-{{ template.suffix }}{% endif -%}
      {%- if settings.swatch_enabled %} swatch-method-{{ settings.swatch_method }} swatch-style-{{ settings.swatch_style }}{% endif -%}
    "
    data-cc-animate-timeout="0"
  >
    <script
      type="text/javascript"
      data-cmp-ab="1"
      src="https://cdn.consentmanager.net/delivery/autoblocking/662e682801bba.js"
      data-cmp-host="b.delivery.consentmanager.net"
      data-cmp-cdn="cdn.consentmanager.net"
      data-cmp-codesrc="1"
    ></script>
    {%- if settings.animations_enabled_desktop -%}
      <script>
        if ('IntersectionObserver' in window) {
          document.body.classList.add("cc-animate-enabled");
        }
      </script>
    {%- endif -%}

    <a class="skip-link visually-hidden" href="#content">{{ 'general.accessibility_labels.skip_to_content' | t }}</a>

    {% unless template.name == 'cart' or settings.cart_type == 'page' %}{% section 'cart-drawer' %}{% endunless %}
    {% section 'announcement-bar' %}
    {% section 'header' %}
    {% section 'store-messages' %}

    <main id="content" role="main">
      <div class="container cf">
        {{ content_for_layout }}
      </div>
      <!-- /.container -->
    </main>
    <!-- /#content -->

    {%- if request.path != '/challenge' -%}
      <div id="pagefooter">
        {% section 'cross-page-promos' %}
        {% section 'footer' %}
      </div>

      {% section 'popup' %}
    {%- endif -%}

    {%- if settings.after_add_to_cart == 'notification' -%}
      <template id="AddedNotification">
        <added-notification class="added-notification added-notification--hidden">
          <div class="added-notification__message-area">
            <div class="added-notification__message-title"></div>
            <div class="added-notification__message-text underline-child">
              {{ 'products.product.added_to_cart_with_link_html' | t: cart_url: routes.cart_url }}
            </div>
          </div>
          <div class="added-notification__button-area">
            <button
              type="button"
              class="added-notification__close notabutton"
              aria-label="{{ 'general.accessibility_labels.close' | t | escape }}"
            >
              {%- render 'svg-x' -%}
            </button>
          </div>
        </added-notification>
      </template>
    {%- endif -%}
  </body>
</html>
Delasoul
Excursionist
44 0 3

Unfortunatly it's still not changing anything