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 10 (10)

kaiyaa
Excursionist
193 13 19

Hello @Delasoul 

Can you please share your store link so i can check it

Was I helpful? Buy me a coffee
For fast response Message me
Need Help Message me
Delasoul
Excursionist
44 0 3

https://casa-amao.com/

PW: deanee

 

Sorry, completly forgot to add this info 🙂

kaiyaa
Excursionist
193 13 19

@Delasoul In my end it's showing properly. Are you checking on draft themes.

kaiyaa_0-1713538784324.png

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Was I helpful? Buy me a coffee
For fast response Message me
Need Help Message me
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...

kaiyaa
Excursionist
193 13 19

Hello @Delasoul 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

 

<style>
@media (max-width: 600px)
{
.gallery-viewer__zoom-container .gallery-viewer__thumbs {
    bottom: -5px;
}
}
</style>

 

 
If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Was I helpful? Buy me a coffee
For fast response Message me
Need Help Message me
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

 

kaiyaa
Excursionist
193 13 19

@Delasoul Yes may be it's not added properly.

Can you please share theme.liquid code so i will let you know where you need to add it.

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Was I helpful? Buy me a coffee
For fast response Message me
Need Help Message me
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>
kaiyaa
Excursionist
193 13 19

please add this code where <body> tag started 

<style>
.gallery-viewer__zoom-container .gallery-viewer__thumbs 
{
    bottom: -5px !important;
}
</style>
Was I helpful? Buy me a coffee
For fast response Message me
Need Help Message me
Delasoul
Excursionist
44 0 3

Unfortunatly it's still not changing anything