Getting Started with Your tikocat Products
Welcome to the tikocat product guides. Whether you're setting up your first item or managing a full catalog, these guides are designed to help you make the most of your products and ensure everything displays perfectly on your storefront.
Understanding Product Variants and Swatches
Product variants are the different versions of an item—think colors, sizes, or patterns. On tikocat, variants are displayed as swatches, which give customers a quick visual way to see their options before making a purchase.
Swatches work by pulling color and pattern information from metafields attached to each variant. This means the data you add to your variants directly controls how they appear on your storefront. Accurate metafield data ensures your swatches render correctly and look exactly as intended.
Setting Up Color and Pattern Metafields
Each variant that should display a swatch needs a Color / Pattern metafield populated with a valid value. You can use standard color names like "Navy Blue" or "Forest Green," or hex codes like "#1a1a1a" or "#FF5733."
To add or edit a metafield for a variant, navigate to the variant details in your Shopify admin, locate the Color / Pattern metafield, and enter your value. Save the variant to persist the change. If a variant is missing this metafield, the swatch won't display on the storefront.
Enabling Variant Images on Swatches
By default, swatches display as solid color blocks. If you want each swatch to show a unique product image instead, you can enable the show_variant_image setting in your theme. This is especially useful when variants have distinct visual differences beyond just color.
Once enabled, make sure each variant has an image assigned. The theme will pull that image and display it on the swatch, giving customers a clearer preview of what they're selecting.
Verifying Your Metafield Data
After you've populated metafields for your variants, take a moment to verify the data was saved correctly. Re-open the variant in your admin and confirm the Color / Pattern field still contains your value. This simple check prevents display issues on your storefront.
For stores managing many variants, consider creating a checklist or template to ensure consistency across all products. This reduces errors and makes bulk updates faster.
Troubleshooting Swatch Display Issues
If swatches aren't appearing as expected, check these common issues: metafield data is missing or blank on the variant, the color value isn't recognized by the theme, the show_variant_image setting doesn't match your intent, or swatch border opacity is set too low in theme settings.
Start by confirming the metafield exists and contains a valid color name or hex code. Then review your theme settings to ensure swatch rendering is enabled and configured the way you want it. A quick preview on your storefront will show you exactly what customers see.