Facing an issue on data filtering code which i added

Technical Q&A
, ,

Topic summary

A developer is experiencing issues with custom data filtering code implemented in a Shopify theme. The code includes:

Key Components:

  • Tab-based filtering system using Liquid templating (“All Types, First Type, Second Type, Third Category”)
  • jQuery and Magnific Popup library integration
  • Gallery layout with category-based filtering functionality
  • CSS styling for gallery items with hover effects

Technical Details:

  • Uses dynamic filter generation based on tab index
  • Implements category classes for filtering gallery items
  • Includes figure elements with images and “View more” links
  • CSS appears partially corrupted or reversed in the posted code

Current Status:
The discussion remains open with no responses yet. The original poster has shared their complete code implementation but hasn’t specified the exact nature of the filtering issue they’re encountering. No solutions, debugging suggestions, or follow-up clarifications have been provided.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

{% assign tabs = ‘All Types, First Type, Second Type, Third Category’ | split: ', ’ %}

    {% for tab in tabs %} {% capture filter %} {% if forloop.index0 == 0 %} * {% else %} .category-{{ forloop.index0 }} {% endif %} {% endcapture %}
  • {{ tab }}
    • {% endfor %}
{% for block in section.blocks %} {% assign category = 'category-' | append: block.settings.category | handle %} {% assign image = block.settings.image %} {% endfor %}

{% schema %}
{
“name”: “Custom Gallery”,
“settings”: ,
“blocks”: [
{
“type”: “image”,
“name”: “Gallery Image”,
“settings”: [
{
“type”: “image_picker”,
“label”: “Image”,
“id”: “image”,
“default”: “http://unsplash.com/photos/GYNxcQvBNzA/download”
},
{
“type”: “text”,
“label”: “Alt Text”,
“id”: “alt”,
“default”: “Gallery item”
},
{
“type”: “select”,
“label”: “Category”,
“id”: “category”,
“options”: [
“All Types”,
“First Type”,
“Second Type”,
“Third Category”
],
“default”: “All Types”
}
]
}
]
}
{% endschema %}

{% stylesheet %}
a:hover {
text-decoration: none;
}

.tm-page-cols-container {
display: block;
justify-content: space-between;
margin-top: 50px;
}

.tm-page-col-left {
width: 100%;
}

.tm-page-col-right {
width: 100%;
margin-left: auto;
margin-right: 0;
}

@media (max-width: 991px) {
.tm-page-cols-container {
flex-direction: column;
}
.tm-page-col-left {
width: 100%;
max-width: 100%;
}

.tm-page-col-right {
width: 100%;
}
}

.tm-gallery {
margin: -20px -20px 0;
max-width: 100%;
}

.tm-gallery-item {
width: 29%;
margin: 2%;
}
.mfp-wrap {
z-index: 99999 !important;
}

.filters-button-group {
padding-right: 15px;
}

.tabs {
list-style: none;
display: flex;
justify-content: center;
}

.tabs > li > a {
background: #0b1d51;
border: 1px solid #cfd0d1;
color: #fff;
padding: 10px 10px;
display: block;
max-width: 300px;
margin: 0 10px 30px;
}
a.active {
background: #fff !important;
color: #0b1d51 !important;
}

/*
Gallery Item Hover Effect
https://tympanus.net/codrops/2014/06/19/ideas-for-subtle-hover-effects/
*/

/* Common style */
.tm-gallery-item figure {
position: relative;
float: left;
overflow: hidden;
margin-bottom: 0;
background: #3085a3;
text-align: center;
cursor: pointer;
}

.tm-gallery-item figure img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 0.8;
}

.tm-gallery-item figure figcaption {
padding: 1em;
color: #fff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.tm-gallery-item figure figcaption::before,
.tm-gallery-item figure figcaption::after {
pointer-events: none;
}

.tm-gallery-item figure figcaption,
.tm-gallery-item figure figcaption > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* Anchor will cover the whole item by default /
/ For some effects it will show as a button */
.tm-gallery-item figure figcaption > a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}

.tm-gallery-item figure h2 {
word-spacing: -0.15em;
font-weight: 300;
}

.tm-gallery-item figure h2 span {
font-weight: 800;
}

.tm-gallery-item figure h2,
.tm-gallery-item figure p {
margin: 0;
}

.tm-gallery-item figure p {
letter-spacing: 1px;
font-size: 68.5%;
}

/---------------/
/***** Bubba *****/
/---------------/

figure.effect-bubba {
background: #9e5406;
margin: 0 !important;
}

figure.effect-bubba img {
opacity: 1;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}

figure.effect-bubba:hover img {
opacity: 0.4;
}

figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after {
position: absolute;
top: 15px;
right: 15px;
bottom: 15px;
left: 15px;
content: “”;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}

figure.effect-bubba figcaption::before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
}

figure.effect-bubba figcaption::after {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
}

figure.effect-bubba h2 {
font-size: 1.5rem;
padding-top: 20%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}

figure.effect-bubba p {
width: 100%;
padding: 10px;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}

figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}

figure.effect-bubba:hover h2,
figure.effect-bubba:hover p {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.mfp-container {
z-index: 99999 !important;
}
@media (max-width: 767px) {
.tm-gallery {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.tm-gallery-item {
width: 46%;
}

.filters-button-group {
padding-right: 0;
padding-bottom: 30px;
}
}

@media (max-width: 400px) {
.tm-gallery {
max-width: 280px;
}

.tm-gallery-item {
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
{% endstylesheet %}

{% javascript %}

{% endjavascript %}

I have wrote this code to get the filtering option on my gallery page but it throughs some error

Liquid syntax error (line 18): Expected end_of_string but found question in “{{ forloop.first ? ‘active’ : ‘’ }}”

Can anyone rectify this error