Duplicated a Collection template but filter sidebar has lost it's styling

Highlighted
Tourist
17 0 1

HI there, 

We are trying to make a new collection template to add in a couple of features. However despite copy and pasting the original static-collection into the new one and not changing the filter sidebar, it has lost the labels and the structure normally associated with our collections on the empire theme.

I wonder if someone can see what is missing in the code below?

This is how a working version of our filters on desktop looks:

https://vapeandjuice.co.uk/collections/big-cloud-vape-kits

This is how it looks on this duplicated template collection

https://vapeandjuice.co.uk/collections/draft-collection-template

We can't work out what is the issue - we have scoured through css files, compared the code between the two templates. None the wiser. Wonder if anyone can help?

 

Thanks guys, code is below

<script
type="application/json"
data-section-type="luis-collection"
data-section-id="{{ section.id }}"
data-section-data
>
{
"context": {
"see_more": {{ 'general.general.see_more' | t | json }},
"see_less": {{ 'general.general.see_less' | t | json }},
"grid_list": {{ section.settings.default_view | json }},
"collectionUrl": {{ collection.url | default: '/collections/all' | json }}
}
}
</script>

{% assign show_sidebar = false %}
{% assign show_filters = true %}
{% assign show_filter_trigger = false %}

{% if section.settings.filter_style == 'none' %}
{% assign show_filters = false %}
{% endif %}

{% if section.settings.show_sidebar %}
{% comment %}
Sidebar toggle is used on mobile only, and will only show Filters
{% endcomment %}

{% if collection.all_tags.size > 0 and show_filters %}
{% assign show_filter_trigger = true %}
{% endif %}

{% if section.blocks.size > 0 or collection.all_tags.size > 0 and show_filters %}
{% comment %}
Sidebar to show only if there are tags in the collection, or there are menus
{% endcomment %}
{% assign show_sidebar = true %}
{% endif %}
{% endif %}

{% assign paginate_by = section.settings.products_per_page_range %}
{% if template contains 'view-24' %}
{% assign paginate_by = 24 %}
{% elsif template contains 'view-36' %}
{% assign paginate_by = 36 %}
{% elsif template contains 'view-48' %}
{% assign paginate_by = 48 %}
{% endif %}

{%- capture collection_classes -%}
{% if show_sidebar %}
layout--has-sidebar
{% else %}
layout--no-sidebar
{% endif %}

{% if section.settings.default_view == 'grid-view' %}
productgrid-gridview
{% else %}
productgrid-listview
{% endif %}
{%- endcapture -%}

{% paginate collection.products by paginate_by %}
<div class="productgrid--outer {{ collection_classes | strip_newlines }}">
{% if show_sidebar %}
{%
include 'product-grid-sidebar',
filter_style: section.settings.filter_style,
filter_position: section.settings.filter_position,
filter_limit: section.settings.filter_limit,
menu_depth: section.settings.menu_depth_range,
show_prod_count: section.settings.show_prod_count
%}
{% endif %}

<div class="productgrid--wrapper">
{% include 'breadcrumbs' %}
<div class="luis-collection-nav-container">
<div class="luis-collection-menu">
<table align="centre" style="width:auto":>
<table style="width:100%">
<table><tr>

<td><a href="/collections/nic-salts">
<img src="https://cdn.shopify.com/s/files/1/0290/5629/files/Nic-salts-eliquids-online.jpg?v=1601293044"
srcset="https://cdn.shopify.com/s/files/1/0290/5629/files/Nic-free-ejuices-online.jpg?v=1601305751 500w 90h, https://cdn.shopify.com/s/files/1/0290/5629/files/Nic-salts-eliquids-online.jpg?v=1601293044 800w, https://cdn.shopify.com/s/files/1/0290/5629/files/Nic-salts-eliquids-online.jpg?v=1601293044 1024w"
alt="Nic salts" border='0' height='100%;' width='100%;' sizes="(min-width: 1040px) 1140px, 100vw" /></a></td>

<td><a href="/collections/nicotine-free-vape">
<img src="https://cdn.shopify.com/s/files/1/0290/5629/files/Nicotine-free-eliquids-online.jpg?v=1601293044"
srcset="https://cdn.shopify.com/s/files/1/0290/5629/files/Nic-free-ejuice-online.jpg?v=1601293232 500w 90h, https://cdn.shopify.com/s/files/1/0290/5629/files/Nicotine-free-eliquids-online.jpg?v=1601293044 800w, https://cdn.shopify.com/s/files/1/0290/5629/files/Nicotine-free-eliquids-online.jpg?v=1601293044 1024w"
alt="Nicotine free vape" border='0' height='100%;' width='100%;' sizes="(min-width: 1040px) 1024px, 100vw" /></a></td>

<td><a href="/collections/high-vg">
<img src="https://cdn.shopify.com/s/files/1/0290/5629/files/High-VG-eliquid-online.jpg?v=1601293044"
alt="High VG eliquid" srcset="https://cdn.shopify.com/s/files/1/0290/5629/files/UK-High-vg-eliquid-online.jpg?v=1601293232 500w 90h, https://cdn.shopify.com/s/files/1/0290/5629/files/High-VG-eliquid-online.jpg?v=1601293044 800w, https://cdn.shopify.com/s/files/1/0290/5629/files/High-VG-eliquid-online.jpg?v=1601293044 1024w"
alt="High vg eliquid" border='0' height='100%;' width='100%;' sizes="(min-width: 1040px) 1024px, 100vw" /></a></td>

<td><a href="/collections/large-bottles-e-liquid-uk">
<img src="https://cdn.shopify.com/s/files/1/0290/5629/files/buy-Big-bottle-ejuices-online.jpg?v=1601293044"
srcset="https://cdn.shopify.com/s/files/1/0290/5629/files/UK-shortfills-online.jpg?v=1601293232 500w 90h, https://cdn.shopify.com/s/files/1/0290/5629/files/buy-Big-bottle-ejuices-online.jpg?v=1601293044 800w, https://cdn.shopify.com/s/files/1/0290/5629/files/buy-Big-bottle-ejuices-online.jpg?v=1601293044"
alt="Shortfills" border='0' height='100%;' width='100%;' sizes="(min-width: 1024px) 1040px, 100vw" /></a></td>

</tr>
</table>
</div>
</div>
<br>

<div class="productgrid--masthead">
{% if section.settings.show_collection_image and collection.image %}
<figure class="collection--image">
{%
include 'rimg',
img: collection.image,
size: '1350x',
lazy: true,
canvas: true
%}
</figure>
{% endif %}

<div class="collection--information">
<h1 class="collection--title">
{{ collection.title }}
</h1>
{% assign descriptions = collection.description | split: "<!-- split -->" %}
{% assign short_desc = descriptions[0] %}
{% assign long_desc = descriptions[1] %}
<div id="grow" class="collection--description rte">
<div id="ad-content">{{ short_desc }}</div>
<div id="ad-button"><p id="more-button" onclick="aDgrowDiv()" class="ad-show">Show More</p><p class="ad-hide">Hide More</p></div>
</div>
</div>

{% if current_tags.size > 0 %}
<div class="productgrid--filters">
{%- include 'product-grid-tags-active' %}
</div>
{% endif %}
</div>

{% if show_filter_trigger or section.settings.sort_by or section.settings.show_by or section.settings.grid_list %}
{% capture utility_class %}
productgrid--utils

{% if show_filter_trigger or section.settings.sort_by or section.settings.grid_list %}
productgrid--utils--visible-mobile
{% endif %}

{% unless section.settings.show_by or section.settings.sort_by or section.settings.grid_list %}
productgrid--utils--hidden-desktop
{% endunless %}
{% endcapture %}
<nav
class="{{ utility_class | strip_newlines }}"
aria-label="{{ 'general.accessibility.nav_collection_utilities' | t }}"
>
{% if show_filter_trigger %}
{%- assign filter_count = 0 -%}
{%- if current_tags.size > 0 -%}
{%- assign filter_count = current_tags.size -%}
{%- endif -%}
<div class="productgrid--utils utils-filter">
<button
class="utils-filter-button"
type="button"
aria-label="{{ 'product_grid.filters.title_count' | t: count: filter_count }}"
data-productgrid-trigger-filters
>
<span class="utils-filter-icon">
{%- include 'icon-filters' -%}
</span>
<span class="utils-filter-text">
{{- 'product_grid.filters.title_count' | t: count: filter_count -}}
</span>
</button>
</div>
{% endif %}

{%- if section.settings.sort_by -%}
{%-
include 'product-grid-sortby',
type: 'select',
-%}
{%- endif -%}

{%- if section.settings.show_by or section.settings.grid_list -%}
<div
class="
productgrid--utils
utils-view
{% if section.settings.grid_list == false %}
utils-hide
{% endif %}
"
>
<div class="utils-view-container">
{%- if section.settings.show_by -%}
{%-
include 'product-grid-showby',
show_by: paginate_by,
grid_list: section.settings.grid_list
-%}
{%- endif -%}

{% if section.settings.grid_list %}
<div class="utils-viewtoggle">
<span class="utils-viewtoggle-label">
{{ 'product_grid.view_as.title' | t }}
</span>

<button
class="utils-viewtoggle-button {% if section.settings.default_view == 'grid-view' %}active{% endif %}"
data-collection-view="grid-view"
aria-label="grid view"
>
{% include 'icon-library', id: 'icon-grid' %}
</button>

<button
class="utils-viewtoggle-button {% if section.settings.default_view == 'list-view' %}active{% endif %}"
data-collection-view="list-view"
aria-label="list view"
>
{% include 'icon-library', id: 'icon-list' %}
</button>
</div>
{% endif %}
</div>
</div>
{%- endif -%}
</nav>
{% endif %}

{% if collection.products.size > 0 %}
<ul class="productgrid--items products-per-row-{{- section.settings.products_per_row -}}">
{% for product in collection.products %}
{%
include 'product-grid-item',
product: product
%}
{% endfor %}
</ul>
{% else %}
<div class="productgrid--no-results">
<h2 class="productgrid--no-results-title">
{%- if collection.all_products_count == 0 -%}
{{ 'product_grid.no_results.empty' | t }}
{%- else -%}
{{ 'product_grid.no_results.tags_empty' | t }}
{%- endif -%}
</h2>

<a class="productgrid--no-results-button" href="{{ routes.all_products_collection_url }}">
{{ 'search.general.view_all_products' | t }}
</a>
</div>
{% endif %}

{%
include 'pagination',
grid_list: true
%}
</div>




<div class="collection--description rte">
{{ long_desc }}
</div>
</div>


{% endpaginate %}

{%- if section.settings.sort_by -%}
{%-
include 'product-grid-sortby',
type: 'modal',
-%}
{%- endif -%}

{% include 'quick-shop' %}

{% schema %}
{
"name": "Collection pages",
"class": "collection--section",
"settings": [
{
"type": "checkbox",
"id": "show_collection_image",
"label": "Show collection image",
"default": true
},
{
"type": "range",
"id": "products_per_page_range",
"label": "Products per page",
"min": 24,
"max": 48,
"step": 12,
"default": 24
},
{
"type": "select",
"id": "products_per_row",
"label": "Products per row",
"options": [
{
"label": "3",
"value": "3"
},
{
"label": "4",
"value": "4"
}
],
"default": "4"
},
{
"type": "header",
"content": "Utility bar"
},
{
"type": "checkbox",
"id": "sort_by",
"label": "Show \"Sort by\" Dropdown",
"default": true
},
{
"type": "checkbox",
"id": "show_by",
"label": "Show products per page links",
"default": true
},
{
"type": "checkbox",
"id": "grid_list",
"label": "Show grid/list view toggle",
"default": true
},
{
"type": "select",
"id": "default_view",
"label": "Default view",
"options": [
{
"label": "Grid",
"value": "grid-view"
},
{
"label": "List",
"value": "list-view"
}
],
"default": "grid-view"
},
{
"type": "header",
"content": "Sidebar"
},
{
"type": "checkbox",
"id": "show_sidebar",
"label": "Show sidebar",
"default": true
},
{
"type": "checkbox",
"id": "show_prod_count",
"label": "Show product counts",
"info": "Only applies to collection links in sidebar menus",
"default": true
},
{
"type": "select",
"id": "filter_style",
"label": "Filters",
"info": "[Learn more](https://support.pixelunion.net/hc/en-us/articles/360026081933-Setting-up-product-tag-filters-in-Empi...)",
"options": [
{
"value": "none",
"label": "Hide filters"
},
{
"value": "tags",
"label": "By tag"
},
{
"value": "groups",
"label": "By group"
}
],
"default": "tags"
},
{
"id": "filter_limit",
"type": "select",
"label": "Hide additional tags after",
"options": [
{
"value": "5",
"label": "5 tags"
},
{
"value": "6",
"label": "6 tags"
},
{
"value": "8",
"label": "8 tags"
},
{
"value": "10",
"label": "10 tags"
},
{
"value": "15",
"label": "15 tags"
},
{
"value": "20",
"label": "20 tags"
},
{
"value": "999",
"label": "Show all tags"
}
],
"default": "999"
},
{
"type": "select",
"id": "filter_position",
"label": "Filters position",
"options": [
{
"value": "above_menus",
"label": "Above menus"
},
{
"value": "below_menus",
"label": "Below menus"
}
],
"default": "above_menus"
},
{
"type": "text",
"id": "grid_categories",
"label": "Display filters as grid",
"info": "List groups to display in an alternate grid format, like “Size, Price”. [Learn more](https://support.pixelunion.net/hc/en-us/articles/360026081933-Setting-up-product-tag-filters-in-Empi...)"
},
{
"type": "textarea",
"id": "custom_ordered_categories",
"label": "Group order",
"info": "Define a custom order for groups, like “Color, Brand, Size”. Other groups will appear at the bottom."
},
{
"type": "textarea",
"id": "custom_ordered_tags",
"label": "Tag order",
"info": "Define a custom order for tags, like “Size_S, Size_M, Size_L”. Items must exactly match tag name, including group prefix. Other tags will appear at the bottom."
},
{
"type": "range",
"id": "menu_depth_range",
"label": "Menu depth visibility",
"info": "[Learn more](https://help.shopify.com/manual/sell-online/online-store/menus-and-links#create-a-drop-down-menu)",
"min": 1,
"max": 3,
"step": 1,
"default": 1
}
],
"blocks": [
{
"type": "menu",
"name": "Menu",
"settings": [
{
"id": "menu",
"type": "link_list",
"label": "Menu",
"info": "This menu will show as many dropdown items as specified in \"Menu depth visibility\"."
}
],
"limit": 10
}
]
}

{% endschema %}

0 Likes