I am currently working on adding a mega menu for my website. The theme I am using is Warehouse. It has a built-in mega menu option however it does not allow me to create more than one row of categories. As of right now, I have 1 row with 10 columns within my megamenu but I want it to be 2 rows with 5 columns each.
Here is the mega menu code. Any assistance will be greatly appreciated
{%- if section.settings.desktop_navigation_layout == 'condensed' -%}
{%- assign is_condensed = true -%}
{%- else -%}
{%- assign is_condensed = false -%}
{%- endif -%}
{%- assign downcase_title = mega_menu.title | downcase | strip -%}
{%- assign mega_menu_block = nil -%}
{%- for block in section.blocks -%}
{%- assign downcase_block_menu_item = block.settings.menu_item | downcase | strip -%}
{%- if downcase_block_menu_item == downcase_title -%}
{%- assign mega_menu_block = block -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
<div id="dropdown-{{ index }}" class="mega-menu {% if is_floating %}mega-menu--floating{% endif %}" data-type="menu" aria-hidden="true" {{ mega_menu_block.shopify_attributes }}>
{%- capture mega_menu_inner -%}
{%- assign should_center = false -%}
{%- unless is_floating -%}
{%- assign should_center = true -%}
{%- endunless -%}
{%- assign has_two_images = false -%}
{%- if mega_menu_block.settings.image_1 != blank and mega_menu_block.settings.image_2 != blank -%}
{%- assign has_two_images = true -%}
{%- endif -%}
{%- assign mega_menu_classes = '' -%}
{%- if should_center and mega_menu.links.size >= 4 -%}
{%- if has_two_images -%}
{%- assign mega_menu_classes = 'mega-menu__inner--center' -%}
{%- else -%}
{%- assign mega_menu_classes = 'mega-menu__inner--center mega-menu__inner--large' -%}
{%- endif -%}
{%- endif -%}
<div class="mega-menu__inner {{ mega_menu_classes }}">
{%- if mega_menu.links.size > 0 -%}
{%- capture mega_menu_columns -%}
{%- for link in mega_menu.links -%}
<div class="mega-menu__column">
<span class="mega-menu__title heading">{{ link.title }}</span>
{%- if link.links.size > 0 -%}
<ul class="mega-menu__linklist">
{%- for sub_link in link.links -%}
<li class="mega-menu__item">
{{ sub_link.title }}
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</div>
{%- endfor -%}
{%- endcapture -%}
{%- if is_floating -%}
{%- comment -%}
IMPLEMENTATION NOTE: 230 is the size in pixel of a given column (it's 170 + 60 of margin). In order to avoid setting it in JS or having very complex HTML structure to achieve positioning, I used this trick.
{%- endcomment -%}
<div class="mega-menu__column-list" style="width: {{ 230 | times: mega_menu.links.size }}px">
{{- mega_menu_columns -}}
</div>
{%- else -%}
{{- mega_menu_columns -}}
{%- endif -%}
{%- endif -%}
{%- if mega_menu_block.settings.image_1 != blank -%}
<a href="{{ mega_menu_block.settings.image_1_link | default: '#' }}" class="mega-menu__promo">
<div class="mega-menu__image-wrapper">
<div class="aspect-ratio" style="padding-bottom: {{ 100.0 | divided_by: mega_menu_block.settings.image_1.aspect_ratio }}%">
<img class="lazyload image--fade-in" data-src="{{ mega_menu_block.settings.image_1 | img_url: '550x' }}" alt="{{ mega_menu_block.settings.image_1.alt | escape }}">
</div>
</div>
<span class="mega-menu__image-heading heading h4">{{ mega_menu_block.settings.image_1_heading | escape }}</span>
<p class="mega-menu__image-text">{{ mega_menu_block.settings.image_1_text | escape }}</p>
</a>
{%- endif -%}
{%- if mega_menu_block.settings.image_2 != blank -%}
<a href="{{ mega_menu_block.settings.image_2_link | default: '#' }}" class="mega-menu__promo">
<div class="mega-menu__image-wrapper">
<div class="aspect-ratio" style="padding-bottom: {{ 100.0 | divided_by: mega_menu_block.settings.image_2.aspect_ratio }}%">
<img class="lazyload image--fade-in" data-src="{{ mega_menu_block.settings.image_2 | img_url: '550x' }}" alt="{{ mega_menu_block.settings.image_2.alt | escape }}">
</div>
</div>
<span class="mega-menu__image-heading heading h4">{{ mega_menu_block.settings.image_2_heading | escape }}</span>
<p class="mega-menu__image-text">{{ mega_menu_block.settings.image_2_text | escape }}</p>
</a>
{%- endif -%}
</div>
{%- endcapture -%}
{%- if is_condensed -%}
{{- mega_menu_inner -}}
{%- else -%}
<div class="container">
{{- mega_menu_inner -}}
</div>
{%- endif -%}
</div>
on shopify I have created a product list with visible color variants without having to enter the product, but going forward in the pages the products are always the same and never change, moreover the count of products is wrong because it counts the products as if they were still without the external color variants.
Can anyone help me with this problem?
This is my product page, where I use your guide:
{%- comment -%}Color labels used to detect what is a color swatch{%- endcomment -%}
{%- assign color_label = 'color,colour,couleur,cor,colore,farbe,색,色,カラー,färg,farve,szín' | split: ',' -%}
{%- for product in collection.products -%}
{% assign options = product.options %}
{% assign have_color = false %}
{% for option in options %}
{% comment %}Check if there is a color option{% endcomment %}
{% if option == "Color" or option == "Colore" %}
{% assign have_color = forloop.index0 %}
{% endif %}
{% endfor %}
{% if have_color != false %}
{% assign variants = product.variants %}
{% assign colorlist = '' %}
{% assign color = '' %}
{% for variant in variants %}
{% capture color %}
{{ variant.options[have_color] }}
{% endcapture %}
{% unless colorlist contains color %}
{% assign product = variant %}
<div class="product-item {% if horizontal %}product-item--horizontal{% elsif list %}product-item--list{% else %}product-item--vertical{% endif %} {% if section.id == 'blog-sidebar' %}product-item--compact{% endif %} {{ grid_classes }}">
{%- capture product_labels -%}
{%- unless hide_labels -%}
{%- for tag in product.tags -%}
{%- if tag contains '__label:' -%}
<span class="product-label product-label--custom1">{{ tag | split: '__label:' | last }}</span>
{%- endif -%}
{%- if tag contains '__label1:' -%}
<span class="product-label product-label--custom1">{{ tag | split: '__label1:' | last }}</span>
{%- endif -%}
{%- if tag contains '__label2:' -%}
<span class="product-label product-label--custom2">{{ tag | split: '__label2:' | last }}</span>
{%- endif -%}
{%- endfor -%}
{%- if settings.show_discount and product.price < product.compare_at_price -%}
{%- if settings.discount_mode == 'percentage' -%}
{%- assign savings = product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round | append: '%' -%}
{%- else -%}
{%- capture savings -%}<span>{{ product.compare_at_price | minus: product.price | money }}</span>{%- endcapture -%}
{%- endif -%}
<span class="product-label product-label--on-sale">{{ 'collection.product.discount_html' | t: savings: savings }}</span>
{%- endif -%}
{%- endunless -%}
{%- endcapture -%}
{%- if product_labels != blank -%}
<div class="product-item__label-list">
{{- product_labels -}}
</div>
{%- endif -%}
{%- if settings.show_secondary_image and product.media.size > 1 -%}
{%- assign show_secondary_media = true -%}
{%- else -%}
{%- assign show_secondary_media = false -%}
{%- endif -%}
{%- assign filtered_variant = '' -%}
{%- if product.media == blank -%}
<a href="{{ filtered_variant.url | default: product.url | within: collection }}" class="product-item__image-wrapper {% if show_secondary_media %}product-item__image-wrapper--with-secondary{% endif %}">
{%- capture placeholder -%}{% cycle 'product-2', 'product-1', 'product-3', 'product-4', 'product-5', 'product-6' %}{% endcapture %}
{{- placeholder | placeholder_svg_tag: 'placeholder-svg' -}}
</a>
{%- endif -%}
{%- if product.media.size > 0 -%}
{%- comment -%}
Are you ready for some Liquid crazyness? Let's start!
The idea here is that when we are on a collection page that is filtered using a color swatch, instead of showing the featured
image, we'd like to show a variant image that is attached to the selected color. Unfortunately, because filtering is done using
tag, there is no direct relationship between tags and variants. We therefore have to do some crazy processing to match a filter
with a variant. Because this code is within a collection page, it is executed for each product, so it's pretty performance
sensitive. Disabling this piece of code may slightly improve the performance if you have lot of variants.
{%- endcomment -%}
{%- assign primary_media = variant.featured_media -%}
{%- if request.page_type == 'collection' and section.settings.show_filters and section.settings.filter_type == 'group' -%}
{%- assign matched_color_option = '' -%}
{%- for tag in current_tags -%}
{%- assign tag_parts = tag | split: '_' -%}
{%- assign tag_group_name = tag_parts | first | downcase -%}
{%- assign tag_group_value = tag_parts | last | downcase -%}
{%- if color_label contains tag_group_name -%}
{%- comment -%}We have found a matching color label, then we check if this product contains an option named the same{%- endcomment -%}
{%- for option in product.options -%}
{%- assign downcased_option = option | downcase -%}
{%- if downcased_option == tag_group_name -%}
{%- comment -%}We have found the index of the matching option, so we can iterate through the variants{%- endcomment -%}
{%- assign option_index = 'option' | append: forloop.index -%}
{%- for variant in product.variants -%}
{%- assign variant_option_value = variant[option_index] | downcase -%}
{%- if variant_option_value == tag_group_value and variant.featured_media -%}
{%- assign primary_media = variant.featured_media -%}
{%- assign filtered_variant = variant -%}
{%- break -%}
{%- endif %}
{%- endfor -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
<a href="{{ filtered_variant.url | default: product.url | within: collection }}" class="product-item__image-wrapper {% if show_secondary_media %}product-item__image-wrapper--with-secondary{% endif %}">
{%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,300,400,500,600,700,800', image: primary_media.preview_image -%}{%- endcapture -%}
{%- assign image_url = primary_media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<div class="aspect-ratio {% if settings.product_image_size != 'natural' %}aspect-ratio--{{ settings.product_image_size }}{% endif %}" style="padding-bottom: {{ 100.0 | divided_by: primary_media.preview_image.aspect_ratio }}%; z-index: -1;">
<img class="product-item__primary-image lazyload image--fade-in" data-media-id="{{ primary_media.id }}" data-src="{{ image_url }}" data-sizes="auto" data-widths="[{{ supported_sizes }}]" alt="{{ primary_media.alt | escape }}">
{%- if show_secondary_media -%}
{%- if forloop.index0 == 0-%}
{%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,300,400,500,600,700,800', image: product.media[1].preview_image -%}{%- endcapture -%}
{%- assign image_url = product.media[1] | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- endif -%}
{%- if forloop.index0 == 1 -%}
{%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,300,400,500,600,700,800', image: product.media[9].preview_image -%}{%- endcapture -%}
{%- assign image_url = product.media[9] | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- endif -%}
{%- if forloop.index0 == 2 -%}
{%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,300,400,500,600,700,800', image: product.media[17].preview_image -%}{%- endcapture -%}
{%- assign image_url = product.media[17] | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- endif -%}
{%- if forloop.index0 == 3 -%}
{%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,300,400,500,600,700,800', image: product.media[25].preview_image -%}{%- endcapture -%}
{%- assign image_url = product.media[25] | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- endif -%}
{%- if forloop.index0 == 4 -%}
{%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,300,400,500,600,700,800', image: product.media[33].preview_image -%}{%- endcapture -%}
{%- assign image_url = product.media[33] | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- endif -%}
<img class="product-item__secondary-image lazyload image--fade-in" data-src="{{ image_url }}" data-sizes="auto" data-widths="[{{ supported_sizes }}]" alt="{{ product.media[1].alt | escape }}">
{%- endif -%}
<noscript>
<img src="{{ primary_image | img_url: '600x' }}" alt="{{ primary_media.alt | escape }}">
</noscript>
</div>
</a>
{%- endif -%}
<div class="product-item__info">
<div class="product-item__info-inner arrow white">
{%- capture price_list -%}
<div class="product-item__price-list price-list">
{%- if product.price < product.compare_at_price -%}
{%- if product.price_varies -%}
{%- capture price_min -%}<span>{{ product.price_min | money }}</span>{%- endcapture -%}
{%- capture price_max -%}<span>{{ product.price_max | money }}</span>{%- endcapture -%}
<span class="price price--highlight ">
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
{{price_min}}
</span>
<span class="price price--compare text-compare">
<span class="visually-hidden">{{ 'product.general.regular_price' | t }}</span>
{{- product.compare_at_price_min | money -}}
</span>
{%- else -%}
<span class="price price--highlight">
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
{{- product.price | money -}}
</span>
<span class="price price--compare">
<span class="visually-hidden">{{ 'product.general.regular_price' | t }}</span>
{{- product.compare_at_price | money -}}
</span>
{%- endif -%}
{%- elsif product.price_varies -%}
{%- capture price_min -%}<span>{{ product.price_min | money }}</span>{%- endcapture -%}
{%- capture price_max -%}<span>{{ product.price_max | money }}</span>{%- endcapture -%}
<span class="price">
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
{{- 'collection.product.from_price_html' | t: price_min: price_min, price_max: price_max -}}
</span>
{%- else -%}
<span class="price">
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
{{- product.price | money -}}
</span>
{%- endif -%}
</div>
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
{%- if product.selected_or_first_available_variant.unit_price_measurement -%}
<div class="product-item__price-info">
<div class="unit-price-measurement">
<span class="unit-price-measurement__price">{{ product.selected_or_first_available_variant.unit_price | money }}</span>
<span class="unit-price-measurement__separator">/ </span>
{%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
<span class="unit-price-measurement__reference-value">{{ product.selected_or_first_available_variant.unit_price_measurement.reference_value }}</span>
{%- endif -%}
<span class="unit-price-measurement__reference-unit">{{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}</span>
</div>
</div>
{%- endif -%}
{%- endcapture -%}
{%- capture vendor -%}
{%- if settings.show_vendor -%}
{%- assign vendor_handle = product.vendor | handle -%}
{%- assign collection_for_vendor = collections[vendor_handle] -%}
{%- unless collection_for_vendor.empty? -%}
<a class="product-item__vendor link" href="{{ collection_for_vendor.url }}">{{ product.vendor }}</a>
{%- else -%}
<a class="product-item__vendor link" href="{{ product.vendor | url_for_vendor }}">{{ product.vendor }}</a>
{%- endunless -%}
{%- endif -%}
{%- endcapture -%}
{%- if settings.product_price_position == 'before_title' -%}
{{ price_list }}
{%- endif -%}
{%- if settings.product_price_position == 'after_title' -%}
{{ vendor }}
{%- endif -%}
{{ product.title }}
{%- if settings.product_price_position == 'before_title' -%}
{{ vendor }}
{%- endif -%}
{%- if settings.show_color_swatch and template != 'blog' -%}
{%- capture color_swatch -%}
{%- capture color_name -%}{{ section.id }}-{{ product.id }}{%- endcapture -%}
{%- for option in product.options_with_values -%}
{%- assign downcased_option = option.name | downcase -%}
{%- if color_label contains downcased_option -%}
{%- assign variant_option = 'option' | append: forloop.index -%}
{%- assign value_to_match = filtered_variant[variant_option] | default: option.selected_value -%}
{%- for value in option.values -%}
{%- assign downcased_value = value | downcase -%}
{%- capture color_id -%}{{ color_name }}-{{ forloop.index }}{%- endcapture -%}
{%- for variant in product.variants -%}
{%- if variant[variant_option] == value -%}
{%- assign variant_for_value = variant -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
<div class="color-swatch {% if downcased_value == 'white' or downcased_value == 'blanc' %}color-swatch--white{% endif %}">
{%- if variant_for_value.featured_media -%}
{%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,300,400,500,600,700,800', image: variant_for_value.featured_media.preview_image -%}{%- endcapture -%}
{%- assign image_url = variant_for_value.featured_media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- endif -%}
{%- assign color_swatch_name = value | handle | append: '.png' -%}
{%- assign color_swatch_image = images[color_swatch_name] -%}
<input class="color-swatch__radio" type="radio" name="{{ color_name }}" id="{{ color_id }}" value="{{ value | escape }}" {% if value_to_match == value %}checked="checked"{% endif %} data-variant-url="{{ variant_for_value.url }}" {% if variant_for_value.featured_media %}data-media-id="{{ variant_for_value.featured_media.id }}" data-image-url="{{ image_url }}" data-image-widths="[{{ supported_sizes }}]" data-image-aspect-ratio="{{ variant_for_value.featured_media.preview_image.aspect_ratio }}"{% endif %} aria-label="{{ value | escape }}">
<label class="color-swatch__item lazyload" for="{{ color_id }}" {% if color_swatch_image != blank %}data-bg="{{ color_swatch_image | img_url: '64x64' }}"{% else %}style="background-color: {{ value | replace: ' ', '' | downcase }}"{% endif %} title="{{ value | escape }}">
<span class="visually-hidden">{{ value }}</span>
</label>
+{{ option.values.size | minus: forloop.index0 }}
</div>
{%- endfor -%}
{%- endif -%}
{%- endfor -%}
{%- endcapture -%}
{%- if color_swatch != blank -%}
<div class="product-item__swatch-list">
<div class="color-swatch-list">
{{ color_swatch }}
</div>
</div>
{%- endif -%}
{%- endif -%}
{%- if settings.product_price_position == 'after_title' -%}
{{ price_list }}
{%- endif -%}
{%- if settings.show_reviews_badge -%}
<a class="product-item__reviews-badge link" href="{{ product.url | within: collection }}#product-reviews">
<span class="visually-hidden">{{ 'product.general.reviews' | t }}</span>
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}">
{%- comment -%}Display a placeholder, to allocate space{%- endcomment -%}
<div class="spr-badge" style="opacity: 0">
<span class="spr-starrating spr-badge-starrating">
<i class="spr-icon spr-icon-star-empty"></i>
<i class="spr-icon spr-icon-star-empty"></i>
<i class="spr-icon spr-icon-star-empty"></i>
<i class="spr-icon spr-icon-star-empty"></i>
<i class="spr-icon spr-icon-star-empty"></i>
</span>
</div>
</span>
</a>
{%- endif -%}
{%- if settings.show_inventory_quantity and product.template_suffix != 'pre-order' -%}
{%- if product.available -%}
{%- assign should_calculate_inventory = true -%}
{%- for variant in product.variants -%}
{%- comment -%}
If we have one variant that is set to "continue" or that do not have any inventory management, then we skip the calculation of inventory as this
means at least one of the variant is always purchasable
{%- endcomment -%}
{%- if variant.inventory_policy == 'continue' or variant.inventory_management == null -%}
{%- assign should_calculate_inventory = false -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- if should_calculate_inventory and settings.low_inventory_threshold > 0 -%}
{%- assign all_inventory = 0 -%}
{%- for variant in product.variants -%}
{%- if variant.inventory_management -%}
{%- assign all_inventory = variant.inventory_quantity | at_least: 0 | plus: all_inventory -%}
{%- endif -%}
{%- endfor -%}
{%- if all_inventory <= settings.low_inventory_threshold -%}
<span class="product-item__inventory inventory inventory--low">{{ 'collection.product.low_stock_with_quantity_count' | t: count: all_inventory }}</span>
{%- else -%}
<span class="product-item__inventory inventory inventory--high">{{ 'collection.product.in_stock_with_quantity_count' | t: count: all_inventory }}</span>
{%- endif -%}
{%- else -%}
{%- if product.variants.first.inventory_policy == 'continue' and product.variants.first.inventory_quantity <= 0 and product.variants.first.requires_shipping -%}
<span class="product-item__inventory inventory inventory--high">{{ 'collection.product.oversell_stock' | t }}</span>
{%- else -%}
<span class="product-item__inventory inventory inventory--high">{{ 'collection.product.in_stock' | t }}</span>
{%- endif -%}
{%- endif -%}
{%- else -%}
<span class="product-item__inventory inventory">{{ 'collection.product.sold_out' | t }}</span>
{%- endif -%}
{%- endif -%}
</div>
{%- if request.page_type == 'collection' or request.page_type == 'search' or show_add_to_cart -%}
{%- if section.settings.show_quick_view == 'list_grid' or section.settings.show_quick_buy == 'list_grid' or show_add_to_cart -%}
{%- assign product_form_classes = 'product-item__action-list button-stack' -%}
{%- else -%}
{%- assign product_form_classes = 'product-item__action-list product-item__action-list--list-view-only button-stack' -%}
{%- endif -%}
{%- assign form_id = 'product_form_id_' | append: product.id | append: '_' | append: section.id -%}
{%- if product.template_suffix == 'contact' -%}
<div class="{{ product_form_classes }}">
<a href="mailto:{{ shop.email }}" class="product-item__action-button button button--small button--primary">
{{- 'product.form.contact_us' | t -}}
</a>
</div>
{%- else -%}
{%- form 'product', product, id: form_id, class: product_form_classes -%}
<input type="hidden" name="quantity" value="1">
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
{%- if section.settings.show_quick_buy == 'list_grid' or show_add_to_cart -%}
{%- assign quick_buy_classes = 'product-item__action-button button button--small button--primary' -%}
{%- else -%}
{%- assign quick_buy_classes = 'product-item__action-button product-item__action-button--list-view-only button button--small button--primary' -%}
{%- endif -%}
{%- if product.available -%}
{%- if product.variants.size == 1 -%}
<button type="submit" class="{{ quick_buy_classes }}" data-action="add-to-cart">
{%- if product.template_suffix == 'pre-order' -%}
{{- 'collection.product.pre_order' | t -}}
{%- else -%}
{{- 'collection.product.add_to_cart' | t -}}
{%- endif -%}
</button>
{%- else -%}
{{ 'collection.product.choose_options' | t }}
{%- endif -%}
{%- else -%}
<button class="{{ quick_buy_classes | replace: 'button--primary', 'button--disabled' }}" disabled>{{ 'collection.product.sold_out' | t }}</button>
{%- endif -%}
{%- if section.settings.show_quick_view == 'list_grid' -%}
{%- assign quick_view_classes = 'product-item__action-button button button--small button--ternary hidden-phone' -%}
{%- else -%}
{%- assign quick_view_classes = 'product-item__action-button product-item__action-button--list-view-only button button--small button--ternary hidden-phone' -%}
{%- endif -%}
<button type="button" class="{{ quick_view_classes }}" data-action="open-modal" data-secondary-action="open-quick-view" aria-controls="modal-quick-view-{{ section.id }}" data-product-url="{{ product.url }}">{{ 'collection.product.quick_view' | t }}</button>
{%- endform -%}
{%- endif -%}
{%- endif -%}
</div>
</div>
{% capture tempList %}
{{colorlist | append: color | append: ' '}}
{% endcapture %}
{% assign colorlist = tempList %}
{% endunless %}
{% endfor %}
{% endif %}
{%- endfor -%}
And this my pagination page:
{%- if paginate.pages > 1 -%}
<div class="pagination">
<div class="pagination__inner">
{%- if paginate.previous -%}
<a class="pagination__prev link" rel="prev" title="{{ 'general.pagination.previous_page' | t }}" data-page="{{ paginate.current_page | minus: 1 }}" href="{{ paginate.previous.url }}{{ hash }}">
{%- render 'icon', icon: 'arrow-left' -%} {{- 'general.pagination.previous_page' | t -}}
</a>
{%- endif -%}
<div class="pagination__nav">
{%- for part in paginate.parts -%}
{%- if part.is_link -%}
{{ part.title }}
{%- else -%}
<span class="pagination__nav-item {% if part.title == paginate.current_page %}is-active{% endif %}">{{ part.title }}</span>
{%- endif -%}
{%- endfor -%}
</div>
<span class="pagination__page-count">{{ 'general.pagination.page_count' | t: current_page: paginate.current_page, pages: paginate.pages }}</span>
{%- if paginate.next -%}
<a class="pagination__next link" rel="next" title="{{ 'general.pagination.next_page' | t }}" data-page="{{ paginate.current_page | plus: 1 }}" href="{{ paginate.next.url }}{{ hash }}">
{{- 'general.pagination.next_page' | t -}} {%- render 'icon', icon: 'arrow-right' -%}
</a>
{%- endif -%}
</div>
</div>
{%- endif -%}
Thanks
I would like to display the lowest price of the available/instock product variants, instead of "From " + the lowest price of all product variants, even if they are not in stock. I am using the theme Prestige, any hints on how I could achieve this?
If I am right, I found the following code part in product-item.liquid which is displaying the price and also rendered in the flickity carousel and products overview pages:
<div class="ProductItem__PriceList {% if show_price_on_hover %}ProductItem__PriceList--showOnHover{% endif %} Heading">
{%- if product.compare_at_price > product.price -%}
<span class="ProductItem__Price Price Price--highlight Text--subdued">{{ product.price | money_without_trailing_zeros }}</span>
<span class="ProductItem__Price Price Price--compareAt Text--subdued">{{ product.compare_at_price | money_without_trailing_zeros }}</span>
{%- elsif product.price_varies -%}
{%- capture formatted_min_price -%}{{ product.price_min | money_without_trailing_zeros }}{%- endcapture -%}
{%- capture formatted_max_price -%}{{ product.price_max | money_without_trailing_zeros }}{%- endcapture -%}
<span class="ProductItem__Price Price Text--subdued">{{ 'collection.product.from_price_html' | t: min_price: formatted_min_price, max_price: formatted_max_price }}</span>
{%- else -%}
<span class="ProductItem__Price Price Text--subdued">{{ product.price | money_without_trailing_zeros }}</span>
{%- endif -%}
</div>
{%- if product.selected_or_first_available_variant.unit_price_measurement -%}
<div class="ProductItem__UnitPriceMeasurement">
<div class="UnitPriceMeasurement Heading Text--subdued">
<span class="UnitPriceMeasurement__Price">{{ product.selected_or_first_available_variant.unit_price | money_without_trailing_zeros }}</span>
<span class="UnitPriceMeasurement__Separator">/ </span>
{%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
<span class="UnitPriceMeasurement__ReferenceValue">{{ product.selected_or_first_available_variant.unit_price_measurement.reference_value }}</span>
{%- endif -%}
<span class="UnitPriceMeasurement__ReferenceUnit">{{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}</span>
</div>
</div>
{%- endif -%}
I tried to use the following code from the Shopify-Blog https://www.shopify.com/partners/blog/collection-page-price-range
{% if available %}
{% if product.price_varies and template == 'collection' %}
From {{ product.price_min | money }} to {{ product.price_max | money }}
{% else %}
{{ money_price }}
{% endif %}
{% else %}
{{ 'products.product.sold_out' | t }}
{% endif %}
This code however, displays the product as sold out.
It will be better if you set product_pricetocompare to the value of first variant.
This will check if there is a variant. If there is no variant, you will see 999999, which is not good.
example:
{% for variant in product.variants %}
{% if forloop.index == 1 %}
{% assign product_pricetocompare = variant.price %}
{% else %}
{% if variant.available %}
{% if variant.price < product_pricetocompare %}
{% assign product_pricetocompare = variant.price %}
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
Okay I found the answer, maybe it helps someone else as well. Loop through the variants and check if the variant is available and save the lowest price:
{% assign product_pricetocompare = 999999 %}
{% for variant in product.variants %}
{% if variant.available %}
{% if variant.price < product_pricetocompare %}
{% assign product_pricetocompare = variant.price %}
{% endif %}
{% endif %}
{% endfor %}
I have a problem to print all_tags numbers in ascending order? For example
Currently Loop print:
11
14
15
18
20
22
24
27
40
42
44
9
Need this:
9
11
14
15
18
20
22
24
27
40
42
44
Here is a code:
<ul class="collection__filter-checkbox-list wattagess">
{% for tag in collection.all_tags %}
{% if tag contains 'Watts-' %}
<div class="wattage-tag-div"> <h4 class="wattage-tag">Wattage</h4> </div>
{% assign tagName = tag | remove: 'Watts-' | strip | remove: 'W' %}
{% if current_tags contains tag %}
{{ tagName | handle }}
<li class="collection__filter-checkbox">
<div class="checkbox-wrapper">
<input type="radio" class="checkbox" id="{{ link_id }}-tag-{{ tag | handle }}" name="tag-filter" data-action="toggle-tag" data-tag="{{ tag | handle }}" {% if current_tags contains tag %}checked="checked"{% endif %}>
{% render 'icon', icon: 'check' %}
</div>
<label for="{{ link_id }}-tag-{{ tagName | handle }}">{{ tagName }}</label>
</li>
{% else %}
<li class="collection__filter-checkbox">
<div class="checkbox-wrapper">
<input type="radio" class="checkbox" id="{{ link_id }}-tag-{{ tag | handle }}" name="tag-filter" data-action="toggle-tag" data-tag="{{ tag | handle }}" {% if current_tags contains tag %}checked="checked"{% endif %}>
{% render 'icon', icon: 'check' %}
</div>
<label for="{{ link_id }}-tag-{{ tagName | handle }}">{{ tagName }}</label>
</li>
{% endif %}
{% endif %}
{% endfor %}
</ul>
Try this:
{%- assign maxDigits = 0 -%}
{%- for tag in collection.all_tags -%}
{%- assign watts = tag | remove: "Watts-" | remove: "W" -%}
{%- if watts.size > maxDigits -%}
{%- assign maxDigits = watts.size -%}
{%- endif -%}
{%- assign all_tags = all_tags | append: "," | append: watts -%}
{%- endfor -%}
{%- assign all_tags = all_tags | remove_first: "," | split: "," -%}
{%- assign zeroPaddedTags = "" -%}
{%- for tag in all_tags -%}
{%- assign zerosToAdd = maxDigits | minus: tag.size -%}
{%- capture zeroPaddedTags -%}{{ zeroPaddedTags }},{%- for i in (1..zerosToAdd) -%}0{%- endfor -%}{{ tag }}{%- endcapture -%}
{%- endfor -%}
{%- assign sortedTags = zeroPaddedTags | remove_first: "," | split: "," | sort -%}
{%- for t in sortedTags -%}
{%- assign tag = t -%}
{%- assign tagChars = tag | split: "" -%}
{%- for char in tagChars -%}
{%- if char == "0" -%}
{%- assign tag = tag | remove_first: "0" -%}
{%- continue -%}
{%- endif -%}
{%- break -%}
{%- endfor -%}
{{- tag -}}<br>
{%- endfor -%}
We would like to customize the collection group filtering. Currently, the group filtering is grouping and showing all product tags that have an underscore in the tag name.
ex: Brand_Premium
However, we would like to only show a filter group when there is more than one filter available within a group:
ex: All products on a given collection collection page are the same brand. In this case, we do not want to show a filter group for Brand, since there is only one option.
{%- capture tag_icon -%}
<span class="filter-icon--checkbox">
{%- include 'icon-checkbox' -%}
</span>
{%- endcapture -%}
{% for cat_item in cat_array %}
{% assign tag_count = 0 %}
<h3 class="productgrid--sidebar-title--small">
{{ cat_item }}
</h3>
<ul class="productgrid--sidebar-item filter-group">
{% for tag in collection.all_tags %}
{% assign cat = tag | split: '_' | first %}
{% if cat != tag and cat_item == cat %}
{% assign tag_count = tag_count | plus: 1 %}
{%- capture tag_text -%}
{{- tag_icon -}}
<span class="filter-text">
{{ tag | remove_first: cat | remove_first: '_' }}
</span>
{%- endcapture -%}
{% assign filter_class = 'filter-item' %}
{%- if current_tags contains tag -%}
{% assign filter_class = filter_class | append: ' filter-item--active' %}
{%- else -%}
{% assign filter_class = filter_class | append: ' filter-item--inactive' %}
{%- endif -%}
{%- if tag_count > tag_limit -%}
{% assign filter_class = filter_class | append: ' filter-item--hidden' %}
{%- endif -%}
<li
class="{{ filter_class }}"
data-tag-advanced
data-group="{{ cat_item }}"
data-handle="{{ tag | handle }}"
{% if tag_count > tag_limit %}data-hidden-default{% endif %}
{% if current_tags contains tag %}aria-current="true"{% endif %}
>
{% if current_tags contains tag %}
{{ tag_text | link_to_remove_tag: tag }}
{% else %}
{{ tag_text | link_to_add_tag: tag }}
{% endif %}
</li>
{% endif %}
{% endfor %}
{% if tag_count > tag_limit %}
<li class="filter-item">
<a class="filter-text--link" href="#" data-filter-toggle="false">
{{ 'general.general.see_more' | t }}
</a>
</li>
{% endif %}
</ul>
<hr />
{% endfor %}