How to setup enhanced product cards in Gymwolf Theme?

What are Enhanced Product Cards?

Enhanced product cards elevate your Shopify collection pages with advanced features including custom tags, product subtitles, sibling product previews, and custom badges. Perfect for showcasing related products, highlighting key features, and improving the overall shopping experience with a modern, professional design.

Step 1: Create Metafield Definitions

Creation Instructions

Go to Shopify Admin → Settings → Metafields → Products
Click "Add definition"
Create each metafield with the specifications below
Set appropriate Type as specified for each metafield
No validation required

Required Metafields (5 total)

Jhango Tag 1 (Top Left)

custom.jhango-tag1

Purpose: Display tag in top-left corner of product card

Type: Single line text

Description: "Top-left tag text for product card display"

Example Value: "NEW ARRIVAL"

Jhango Tag 2 (Bottom Left)

custom.jhango_tag2

Purpose: Display tag in bottom-left corner of product card

Type: Single line text

Description: "Bottom-left tag text for product card display"

Example Value: "BEST SELLER"

Jhango Subtitle

custom.jhango_subtitle

Purpose: Additional descriptive text below product title

Type: Single line text

Description: "Subtitle text displayed below product title"

Example Value: "Premium Athletic Collection"

Jhango Sibling Collection

custom.jhango_sibling

Purpose: Collection reference for displaying related product thumbnails

Type: Collection reference

Description: "Collection containing related/sibling products to display as thumbnails"

Example Value: Select a collection from the dropdown

Custom Badge (Optional)

custom.product_badge

Purpose: Custom badge with text and color

Type: Single line text

Description: "Custom badge in format: text|color"

Example Value: "LIMITED EDITION|#ff6b6b"

Step 2: Set Metafield Values

How to Set Values

Navigate to Products → Select Product → Metafields section
Find each metafield by name
Enter values according to the format specified below
Save product after setting all desired values

Value Formats and Examples

Tag Values

Top Tag: Simple text (e.g., "NEW", "SALE", "PREMIUM")
Bottom Tag: Simple text (e.g., "BEST SELLER", "LIMITED", "FEATURED")

Subtitle Format

Keep concise and descriptive
Examples: "Premium Athletic Wear", "Professional Grade", "Limited Edition Series"

Sibling Collection

Select from existing collections in dropdown
Collection should contain related products you want to display as thumbnails
First 3 products will show as thumbnails, with "+X" indicator if more exist

Custom Badge

Format: text|color

Examples:

NEW|#28a745 (green background)
SALE|#dc3545 (red background)
PREMIUM|#6f42c1 (purple background)

Key Features

Usage Notes

Collection Dependencies: Sibling functionality requires existing collections
Performance Optimized: Lazy loading for sibling product images
SEO Friendly: Proper alt tags and semantic HTML structure
Dynamic Positioning: Customizable tag positions through theme settings
Color Customization: Independent styling for each element
Overflow Handling: Smart display of sibling products with "+X" indicator
Fallback Support: Graceful handling when metafields are empty

Visual Guide: Setting Up Metafields

Step-by-Step Screenshots

Here's exactly how the metafields look when you're setting them up in Shopify:

Shopify metafields interface showing enhanced product card metafields including tags, subtitles, and collection references

Product Metafields View: Access your product's metafields section to see all available custom fields. You'll find sections for tags, subtitles, and collection references.

Metafield definition setup for enhanced product card tags showing single line text type and namespace configuration

Creating Text Metafield: This screenshot shows the metafield definition setup for text fields. Note the "Single line text" type and the namespace "custom.jhango-tag1".

Metafield definition setup for sibling collection reference showing collection type selection for related product thumbnails

Creating Collection Metafield: This shows the setup for collection reference metafields, choose a collection containing related products. The first 3 products will display as small thumbnails below the main product image.

Frequently Asked Questions

What are enhanced product cards?

Enhanced product cards are upgraded versions of standard Shopify product listings that include custom tags, subtitles, related product previews, and custom badges. They provide more information at a glance and improve the visual appeal of collection pages.

Do I need coding skills to implement these features?

Basic implementation requires no coding skills - you'll work entirely within Shopify's admin interface to create metafields and set values. However, integrating the snippet into your theme templates may require HTML knowledge or developer assistance.

Can I use different collections for different products?

Absolutely! Each product can reference a different collection for its sibling products, allowing you to create curated groupings that make sense for each item. This flexibility lets you showcase coordinating items, size variations, or complementary products.

How do sibling products work?

Sibling products are related items from a specified collection that appear as small thumbnails on the product card. Customers can see related options at a glance. The system shows the first 3 products and indicates if more are available with a "+X" counter.

Can I customize the styling and positioning?

Yes! The enhanced product card system includes extensive theme settings for customizing colors, positions, sizes, and styling of all elements. You can adjust tag positions, colors, font sizes, and spacing to match your brand.

What happens if I don't set metafield values?

The system gracefully handles empty metafields - elements simply won't display if no values are provided. This allows you to selectively enhance products without affecting others. Default theme behavior remains intact for products without enhanced features.