Shopify themes, liquid, logos, and UX
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:
Thanks for help!
@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...
hi @kaiyaa,
unfortunatly it's not changing anything with the code. That should be the correct place, right?
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: ', ' %} – {{ 'general.meta.tags' | t: tags: meta_tags -}}
{%- endif %}
{% if current_page != 1 %} – {{ 'general.meta.page' | t: page: current_page }}{% endif %}
{% unless page_title contains shop.name %} – {{ 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>
Unfortunatly it's still not changing anything
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025