To show both "base color" and "base pattern" swatches in your Shopify store when they're marked as "used for filter" in the category metafields, you'll need to ensure that both are properly set up in your theme to display the swatches.
Here’s a general approach to enable this:
1. Check Theme Support for Pattern Swatches:
Not all themes support pattern swatches out of the box. If you’re using a theme like Dawn or a custom-built theme, you may need to customize the code to display both color and pattern swatches.
2. Ensure Proper Metafield Configuration:
- Make sure that both the base colour and base pattern metafields are properly configured under the product category in your Shopify admin.
- Ensure the metafields are of the correct type (e.g., color for base colour and file or text for base pattern).
3. Modify the Theme Code:
If your theme doesn't automatically support showing both types of swatches, you may need to modify the theme's liquid files:
- Color Swatches: These are usually rendered using color input fields or image-based buttons in the filters section or in product listings.
- Pattern Swatches: For pattern swatches (assuming they’re images), you’ll need to ensure that the metafield’s value (usually a file URL) is correctly rendered as an image.
Example Code for Pattern Swatches:
{% if product.metafields.namespace.base_pattern %}
<div class="pattern-swatch">
<img src="{{ product.metafields.namespace.base_pattern | file_url }}" alt="Pattern" />
</div>
{% endif %}
Replace namespace with the actual namespace of your metafields.
This code assumes base_pattern is a file (like an image). If it’s text (e.g., a pattern name), you'll need to adjust how it’s displayed.
4. Add CSS for Styling:
You might need to add CSS to style the swatches, ensuring they’re displayed properly in the filter section.
.pattern-swatch img {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 50%;
}
After applying the changes, test the filters on the category pages to see if both color and pattern swatches are displayed. If your theme uses JavaScript for filtering, ensure it’s also set to handle both color and pattern filters.
If you're using a theme that doesn't support custom metafield filters, you might want to consider a Shopify app that can extend filter functionality (e.g., Filter & Search by Boost Commerce).
Let me know if you need further assistance with your theme's customization!
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 via the email in my signature below—I’m here to help bring your vision to life!
Best Regard,
Rajat Sharma
-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com
