Bigcommerce技术咨询:如何在特定分类隐藏免运费图片
Hey there! Great job getting the free shipping image displayed on all product cards already—let's adjust your templates > components > products > card.html code to hide it for your target category. Here's how to do it:
Step 1: Get Your Target Category's ID or Name
First, grab the identifier for the category you want to exclude:
- Category ID: Go to your Bigcommerce admin, navigate to Products > Categories, click the category you want to exclude. Look at the URL bar—you'll see something like
/admin/categories/123—the number123is your category ID. - Category Name: Just use the exact name of the category (case-sensitive, so match it exactly).
Step 2: Wrap Your Free Shipping Image in a Conditional Statement
In your card.html file, find the code you added for the free shipping image, then wrap it in a {% unless %} block to skip rendering when the product belongs to your target category.
Option 1: Use Category ID (More Reliable)
{% unless product.categories contains id:123 %} <!-- Your existing free shipping image code goes here --> <img src="path/to/your/free-shipping-image.png" alt="Free Shipping"> {% endunless %}
Replace 123 with your actual category ID, and update the image path to match your setup.
Option 2: Use Category Name
{% unless product.categories contains name:"Special Excluded Category" %} <!-- Your existing free shipping image code goes here --> <img src="path/to/your/free-shipping-image.png" alt="Free Shipping"> {% endunless %}
Replace "Special Excluded Category" with the exact name of your category.
How This Works
The {% unless %} tag in Bigcommerce's Liquid template language checks if the condition is false—so if the product does not belong to the excluded category, it will render the image. If the product is in that category, the image code gets skipped entirely.
This works even if a product is in multiple categories: if it's part of your excluded category (along with others), the image won't show up.
内容的提问来源于stack exchange,提问作者Angel

