Aligning product thumbnails minimal theme

Highlighted
New Member
5 0 0

Have been trying to align the product thumbnails on my product pages with no success, perhaps something to do with the ul/li tags? because the amount of thumbnails varies I would like them to automatically centre underneath the main image. see attached screenshots. code below:

<div itemscope itemtype="http://schema.org/Product" id="ProductSection" data-section-id="{{ section.id }}" data-section-type="product-template" data-image-zoom-type="{{ section.settings.product_image_zoom_type }}" data-related-enabled="{{ section.settings.product_related_enable }}" data-show-extra-tab="{{ section.settings.show_extra_tab }}" data-extra-tab-content="{{ section.settings.extra_tab_content }}" data-enable-history-state="true">

{% case section.settings.add_to_cart_width %}
{% when 'small' %}
{%- assign btn_class = 'btn--wide' -%}
{%- assign productform_class = 'product-form--wide' -%}
{% when 'medium' %}
{%- assign btn_class = 'btn--wide' -%}
{%- assign productform_class = 'product-form--wide' -%}
{% when 'large' %}
{%- assign btn_class = 'btn--full' -%}
{%- assign productform_class = 'product-form--full' -%}
{% endcase %}

{% if section.settings.add_to_cart_width != 'small' %}
<style>
@media screen and (min-width: 769px){
.single-option-selector,
.quantity-selector {
{% if section.settings.add_to_cart_width == 'medium' %}
min-width: 50%;
{% else %}
min-width: 100%;
{% endif %}
}
}
</style>
{% endif %}

<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">


</div>

<div class="product-single">
<div class="grid product-single__hero">

<div class="grid__item post-large--three-eighths push--post-large--one-eighth">


{% if section.settings.product_thumbnails_position == 'below' or product.images.size < 2 %}

<div class="product-single__photos">
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

{% for image in product.images %}
{% capture img_id %}ProductImage-{{ image.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}
{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% include 'image-style' with image: image, small_style: false, width: 700, height: 1024, wrapper_id: img_wrapper_id, img_id: img_id %}

<div id="{{ img_wrapper_id }}" class="product-single__image-wrapper supports-js{% unless featured_image == image %} hide{% endunless %}{% if section.settings.product_image_zoom_type == 'lightbox' %} zoom-lightbox{% endif %}" data-image-id="{{ image.id }}">
<div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
<img id="{{ img_id }}"
class="product-single__image lazyload{% unless featured_image == image %} lazypreload{% endunless %}"
{% if featured_image == image %}src="{{ image | img_url: '300x300' }}"{% endif %}
data-src="{{ img_url }}"
data-widths="[180, 370, 540, 740, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
{% if section.settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{{ image | img_url: '1024x1024', scale: 2 }}"{% endif %}
alt="{{ image.alt | escape }}">
</div>
</div>
{% endfor %}

<noscript>
<img src="{{ featured_image | img_url: '1024x1024', scale: 2 }}" alt="{{ featured_image.alt | escape }}">
</noscript>
</div>

{% if product.images.size > 1 %}
<span>
<div class="product-single__thumbnails grid-uniform" id="ProductThumbs">


{% for image in product.images %}
<ul class="grid__item wide--one-eighth large--one-eighth medium-down--one-eighth " >

<div style="padding: 10px">
</div>




<a data-image-id="{{ image.id }}" href="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumbnail">
<img src="{{ image.src | img_url: 'grande' }}" alt="{{ image.alt | escape }}">
</a>
</ul>
{% endfor %}
</div>

</span>

{% endif %}

{% else %}

<div class="grid">

<div class="grid__item four-fifths product-single__photos" id="ProductPhoto">
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

{% for image in product.images %}
{% capture img_id %}ProductImage-{{ image.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}
{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% include 'image-style' with image: image, small_style: false, width: 700, height: 1024, wrapper_id: img_wrapper_id, img_id: img_id %}

<div id="{{ img_wrapper_id }}" class="product-single__image-wrapper supports-js{% unless featured_image == image %} hide{% endunless %}{% if section.settings.product_image_zoom_type == 'lightbox' %} zoom-lightbox{% endif %}" data-image-id="{{ image.id }}">
<div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
<img id="{{ img_id }}"
class="product-single__image lazyload{% unless featured_image == image %} lazypreload{% endunless %}"
{% if featured_image == image %}src="{{ image | img_url: '300x300' }}"{% endif %}
data-src="{{ img_url }}"
data-widths="[180, 370, 540, 740, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
{% if section.settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{{ image | img_url: '1024x1024', scale: 2 }}"{% endif %}
alt="{{ image.alt | escape }}">
</div>
</div>
{% else %}
<img src="{{ featured_image | img_url: '1024x1024', scale: 2 }}" alt="{{ featured_image.alt | escape }}">
{% endfor %}

<noscript>
<img src="{{ featured_image | img_url: '1024x1024', scale: 2 }}" alt="{{ featured_image.alt | escape }}">
</noscript>
</div>
</div>
<div class="grid__item one-fifth">

<ul class="grid product-single__thumbnails" id="ProductThumbs">

{% for image in product.images %}
<li class="grid__item">
<a data-image-id="{{ image.id }}" href="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumbnail">
<img src="{{ image.src | img_url: 'grande' }}" alt="{{ image.alt | escape }}">
</a>
</li>

{% endfor %}
</ul>

</div>

 

{% endif %}

{% if section.settings.product_image_zoom_type == 'lightbox' %}
<ul class="gallery" class="hidden">
{% for image in product.images %}
<li data-image-id="{{ image.id }}" class="gallery__item" data-mfp-src="{{ image | img_url: '1024x1024', scale: 2 }}"></li>
{% endfor %}
</ul>
{% endif %}

</div>
<div class="grid__item post-large--three-eighths push--post-large--one-eighth ">
<div class="container">



{% if section.settings.product_vendor_enable %}
<span class="h3" itemprop="brand">{{ product.vendor }}</span>
{% endif %}
<h1 itemprop="name">{{ product.title }}</h1>

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
{% assign variant = product.selected_or_first_available_variant %}

<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

<div class="product-single__prices">
<span id="PriceA11y" class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<span id="ProductPrice" class="product-single__price" itemprop="price" content="{{ product.price | divided_by: 100.00 }}">
{{ product.price | money }}
</span>

{% if product.compare_at_price > product.price %}
<span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.product.sale_price' | t }}</span>
<s id="ComparePrice" class="product-single__sale-price">
{{ product.compare_at_price_max | money }}
</s>
{% else %}
<span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.product.sale_price' | t }}</span>
<s id="ComparePrice" class="product-single__sale-price hide">
{{ product.compare_at_price_max | money }}
</s>
{% endif %}
</div>

{% form 'product', product, class:productform_class %}
<select name="id" id="ProductSelect-{{ section.id }}" class="product-single__variants">
{% for variant in product.variants %}
{% if variant.available %}

<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>

<div class="product-single__quantity{% unless section.settings.product_quantity_enable %} is-hidden{% endunless %}">
<label for="Quantity">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
</div>

<button type="submit" name="add" id="AddToCart" class="btn {{ btn_class }}{% if section.settings.enable_payment_button %} btn--secondary{% endif %}">
<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}

{% endif %}
{% endform %}

{% unless section.settings.show_extra_tab == false or pages[section.settings.extra_tab_content] == empty %}
<div class="tabs">
<ul class="tab-switch__nav">
<li>
</br>
<a href="#description" data-link="description" class="tab-switch__trigger h3">{{ 'products.product.description' | t }}</a>
</li>
<li>
<a href="#extra" data-link="extra" class="tab-switch__trigger h3">{{ pages[section.settings.extra_tab_content].title }}</a>
</li>
</ul>
<div id="description" class="tab-switch__content" data-content="description">
<div class="product-description rte" itemprop="description">
{{ product.description }}
</div>
</div>
<div id="extra" class="tab-switch__content" data-content="extra">
<div class="rte">
{{ pages[section.settings.extra_tab_content].content }}
</div>
</div>
</div>
{% else %}
</br>

{% if section.settings.social_sharing %}

<hr class="hr--clear hr--small">

{% include 'social-sharing' %}
{% endif %}

<div class="product-description rte" itemprop="description">
{{ product.description }}
</div>
{% endunless %}


</div>

</div>
</div>
</div>

{% if section.settings.product_related_enable %}
{% include 'related-products' %}
{% endif %}

</div>

{% unless product == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
{% endunless %}

{% schema %}
{
"name": "Product pages",
"settings": [
{
"type": "checkbox",
"id": "product_vendor_enable",
"label": "Show product vendor"
},
{
"type": "checkbox",
"id": "product_quantity_enable",
"label": "Show quantity selector"
},
{
"type": "select",
"id": "product_image_zoom_type",
"label": "Image zoom type",
"options": [
{
"value": "lightbox",
"label": "Lightbox"
},
{
"value": "zoom-in",
"label": "Zoom-in"
},
{
"value": "",
"label": "No zoom"
}
]
},
{
"type": "select",
"id": "product_thumbnails_position",
"label": "Product thumbnail position",
"options": [
{
"value": "right",
"label": "Right of main image"
},
{
"value": "below",
"label": "Below main image"
}
]
},
{
"type": "header",
"content": "Description"
},
{
"type": "checkbox",
"id": "show_extra_tab",
"label": "Show a tab next to your product description",
"default": false
},
{
"type": "page",
"id": "extra_tab_content",
"label": "Tab content",
"info": "This page content will appear in the extra tab."
},
{
"type": "checkbox",
"id": "social_sharing",
"label": "Enable product sharing"
},
{
"type": "header",
"content": "Related products"
},
{
"type": "checkbox",
"id": "product_related_enable",
"label": "Enable related products"
},
{
"type": "checkbox",
"id": "vendor_enable",
"label": "Show vendor"
},
{
"type": "checkbox",
"id": "show_sale_circle",
"label": "Show sale circle"
},
{
"type": "checkbox",
"id": "show_sold_out_circle",
"label": "Show sold out circle"
},
{
"type": "checkbox",
"id": "center_grid_link",
"label": "Center text below product images"
},
{
"type": "header",
"content": "Product options form"
},
{
"type": "checkbox",
"id": "enable_payment_button",
"label": "Show dynamic checkout button",
"info": "Lets customers check out directly using a familiar payment method. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"default": false
},
{
"type": "select",
"id": "add_to_cart_width",
"label": "Variant picker and button size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
]
}
]
}
{% endschema %}

<style>
@media screen and (min-width: 760px) {
.container{
padding-left: 50px
}
</style>
<style>
@media screen and (max-width: 760px) {
.container{
padding-top: 10px;
}
</style>

 

 

 

Screen Shot 2019-09-12 at 12.25.26 PM.pngScreen Shot 2019-09-12 at 12.26.12 PM.png

0 Likes