Hey @JGBowie ,
Since you're new to coding and Shopify development, I'll break this down step by step for you. You want to add a Size filter on the left side of your product page in the Focal theme. Here’s how you can do it:
1. Enable Filtering in Shopify
Before adding the filter manually, check if Shopify’s built-in filtering can do the job:
- Go to Shopify Admin > Online Store > Navigation.
- Click Collection and search filters.
- Under Available filters, check if Size is listed.
- If it's there, enable it, and Shopify will handle filtering automatically.
If Size is missing, it means Shopify doesn’t recognize it as a filter. In that case, we’ll need to add a custom filter.
2. Add a Custom Size Filter to the Product Page
Since Focal doesn’t have a built-in size filter on the product page, we can manually add one.
Follow these Steps:
1. Online Store> themes > Edit Code.
2. Find sections/main-product.liquid (or similar).
3. Locate where you want the filter (likely in the sidebar area).
Add the Size Filter Code
Inside main-product.liquid, add this code where you want the filter to appear:
<div class="product-size-filter">
<h3>Filter by Size</h3>
<ul>
{% for variant in product.variants %}
{% assign size = variant.option1 %}
{% if size %}
<li>
<label>
<input type="checkbox" class="size-filter" value="{{ size }}">
{{ size }}
</label>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
This code: Loops through product variants to get sizes Creates checkboxes for each available size
3. Style the Filter (CSS)
Now, we need to move the filter to the left.
Go to Edit Code > Assets > base.css (or theme.css) and add:
.product-size-filter {
position: absolute;
left: 0;
top: 100px;
width: 200px;
background: #f9f9f9;
padding: 15px;
border-radius: 5px;
}
.product-size-filter ul {
list-style: none;
padding: 0;
}
.product-size-filter li {
margin-bottom: 10px;
}
4. Add Filtering Functionality (JavaScript)
If you want users to filter sizes dynamically, add this to Edit Code > Assets > theme.js:
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll(".size-filter").forEach(filter => {
filter.addEventListener("change", function() {
let selectedSizes = Array.from(document.querySelectorAll(".size-filter:checked"))
.map(input => input.value);
document.querySelectorAll(".product-variant").forEach(variant => {
variant.style.display = selectedSizes.includes(variant.dataset.size) ? "block" : "none";
});
});
});
});
Let me know if you need help!
If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out in my signature below—I’m here to help bring your vision to life!
Best Regard,
Rajat
