Compatibility Metafield
Prerequisites
Before you begin, make sure you have:
An active Shopify store
Accentuate Custom Fields installed from the Shopify App Store
Staff permissions to access Apps in your Shopify admin
(Recommended) An Online Store 2.0 theme, which allows metafield values to be displayed via the theme editor without touching code
Key Concepts to Know First
Scope — The Shopify object the metafield attaches to. For Compatibility, this will be Products.
Namespace & Key — The unique identifier for your field. The namespace groups related fields (e.g. custom) and the key is the specific field name (e.g. compatibility). Together they form custom.compatibility, which is the address used in your theme to pull the value.
Field Data Type — Controls what kind of data the field holds. For Compatibility, a Multi Select is strongly recommended. A single tech product often works with multiple devices, operating systems, or platforms simultaneously — for example, a wireless charger might be compatible with iPhone 13, iPhone 14, iPhone 15, and Samsung Galaxy S23 all at once. Multi Select allows all compatible devices or systems to be tagged clearly and consistently, making it easy for shoppers to verify before purchase.
Step-by-Step Guide
Step 1 — Open ACF from your Shopify Admin Go to your Shopify Admin, click Apps in the left sidebar, and open Accentuate Custom Fields. You'll land on the ACF dashboard, which shows the Metafields and metaobjects section with cards for Products, Shops, Metaobjects, and Customers.
Step 2 — Open Product Metafields In the Products card, click the Metafields button. This takes you into the Product Custom Fields screen where you can see all existing fields listed with their types and manage your definitions.
Step 3 — Add a New Section Click the + Add section button in the top-right area of the Product Custom Fields screen. An Add Section modal will open across two pages.
Page 1 — Basic Details:
Title: Compatibility — displayed in bold as a visual header when editing product values (1–50 characters, no HTML)
Name: compatibility — must be unique within your Product fields (3–64 characters, letters, digits, underscores or dashes only)
Description: Optionally add a note like Devices, operating systems, and platforms this product is compatible with — supports Markdown
Color: Leave as the default #dfe3e8, or choose a colour to visually distinguish this section from others in your Tech & Electronics field setup
All fields in this section apply to: Leave as All types unless you want to restrict this to specific product types (e.g. only for cables, only for adapters, etc.)
Make visible to the Storefront API: Leave checked (default) — this makes the compatibility values accessible in themes and custom storefronts
Click Next to continue.
Page 2 — Advanced Settings:
Repeatable section: Leave unchecked — compatibility is a single set of values per product, not a repeating block.
Include value of first text field: Leave unchecked — not needed for a select-type field.
Show as collapsed when editing: Leave unchecked — keeps the section expanded by default so it is easy to find and fill in when editing a product.
Hide section: Leave unchecked — checking this would make the section invisible in the editor entirely.
Show section even if empty: Optionally check this if you want the Compatibility section to always appear on products, even before any values have been assigned.
Exclude from layout: Leave unchecked — only tick this if you want the section excluded from ACF's layout editing tools.
Click Done to save the section.
Step 4 — Add the Compatibility Field Once the section is saved, click + Add field to add the actual field inside it. Fill in the details:
Label: Compatibility
Namespace: accentuate (ACF's default, or use your own e.g. tech)
Key: compatibility
Field Data Type: Select Multi Select — this allows multiple compatible devices, OS versions, or platforms to be tagged on a single product at the same time
Step 5 — Add Your Compatibility Options Once Multi Select is chosen, add each allowed value one by one:
Apple Devices:
iPhone 15 / 15 Plus / 15 Pro / 15 Pro Max
iPhone 14 / 14 Plus / 14 Pro / 14 Pro Max
iPhone 13 / 13 mini / 13 Pro / 13 Pro Max
iPhone 12 / 12 mini / 12 Pro / 12 Pro Max
iPhone 11 / 11 Pro / 11 Pro Max
iPad Pro 12.9"
iPad Pro 11"
iPad Air
iPad Mini
iPad (Standard)
Apple Watch Series 8
Apple Watch Series 7
Apple Watch SE
Mac (Intel)
Mac (Apple Silicon / M1 / M2 / M3)
MacBook Air
MacBook Pro
Android Devices:
Samsung Galaxy S24 / S24+ / S24 Ultra
Samsung Galaxy S23 / S23+ / S23 Ultra
Samsung Galaxy S22 / S22+ / S22 Ultra
Samsung Galaxy A Series
Google Pixel 8 / 8 Pro
Google Pixel 7 / 7 Pro
Google Pixel 7a
OnePlus
Motorola
Generic Android 12+
Generic Android 11
Generic Android 10
Operating Systems:
Windows 11
Windows 10
Windows 8
macOS Sonoma
macOS Ventura
macOS Monterey
iOS 17
iOS 16
iOS 15
Android 13+
Android 12
Connectivity Standards:
USB-C
Lightning
USB-A
Micro USB
Bluetooth 5.3
Bluetooth 5.2
WiFi 6E
WiFi 6
WiFi 5
NFC
Gaming Platforms:
PlayStation 5
PlayStation 4
Xbox Series X / S
Xbox One
Nintendo Switch
Nintendo Switch OLED
Steam Deck
PC Gaming
Other Standards:
Universal Compatibility
Cross-Platform
Cloud-Based (Platform-Agnostic)
Add, remove, or rename options at any time to match your store's specific range and the devices/systems you support — existing product values are preserved when you edit the list.
Step 6 — Save Click Save. Your Compatibility field will now appear inside its section on every product edit page in your Shopify admin.
Populating Compatibility Values on Products
One by one: Open any product in Shopify Admin, scroll to the Compatibility section added by ACF, select all compatible devices or systems from the multi-select dropdown, and save.
CSV import: Use the Export button to download a CSV template, fill in the compatibility column for each product row (separate multiple values with the delimiter shown in the template), then re-import via the Import button. Best for large product catalogs or when migrating compatibility data from an existing product database or supplier spreadsheet.
Displaying Compatibility on Your Storefront
Theme Editor (no code, OS 2.0 themes): Go to Online Store → Themes → Customize. Open a product template, click Add Block, select an ACF or Metafield block, choose the Compatibility field, position it on the page (typically in a product details or specifications section, prominently placed near the product title), and save. It will display automatically for any product with values set.
Liquid Code (all themes): Add this to your product template file where you want the compatibility information to appear:
If you used a custom namespace (e.g. tech), replace custom with your namespace name.
Tips & Best Practices
Compatibility is a primary purchase driver in tech — customers need absolute certainty that an accessory or adapter will work with their specific device before buying. Tagging compatibility clearly and accurately reduces returns and customer frustration.
Be specific with device models — instead of tagging broadly "iPhone" or "Android", tag specific models and generations (iPhone 15 Pro, iPhone 14, etc.). The more specific you are, the more useful the information is to shoppers.
Verify compatibility claims — only tag devices or systems you have tested or that are officially confirmed by the manufacturer. False compatibility claims damage trust and increase return rates.
Use Compatibility for collection filtering — connect compatibility as a filter in Online Store → Navigation → Filter menus. Shoppers looking for "iPhone 15 cases" or "PS5 controllers" can then filter directly by their device.
Keep your options list current — as new devices and OS versions launch, add them to your options list. Remove older, obsolete models periodically to keep the list focused and manageable.
Group options by device family — as shown in Step 5, organising compatibility options by brand or device family (Apple, Android, Gaming, etc.) helps your team tag products accurately and keeps the dropdown manageable.
Consider version/generation specificity — decide whether to list every generation (iPhone 15, iPhone 14, iPhone 13) or group them (iPhone 15 Series, iPhone 14 Series). More specificity is better for accuracy, but may create a long list.
Display compatibility badges — consider styling compatibility tags as small badges or pills on product pages and collection cards for a cleaner visual presentation.
Enable cross-selling — once products are tagged with compatibility, use this data to create "Accessories for iPhone 15" or "Compatible with PS5" automated collections.
Avoid the shopify namespace — it is reserved by Shopify and can cause conflicts. Use custom or a brand-specific name like tech.
Multi-language stores — ACF supports translatable metafields. Mark Compatibility as translatable if you need localised device names for different markets.
Quick Reference
Setting
Value
Scope
Products
Section Title
Compatibility
Section Name
compatibility
Field Label
Compatibility
Namespace
custom
Key
compatibility
Full Identifier
custom.compatibility
Field Data Type
Multi Select
Options
iPhone 15, iPhone 14, iPhone 13, iPad Pro, Samsung Galaxy S24, Google Pixel 8, Android 13+, Windows 11, macOS Sonoma, iOS 17, USB-C, Lightning, Bluetooth 5.3, PlayStation 5, Xbox Series X/S, Nintendo Switch, and more (see Step 5)
Storefront API
Enabled (checked by default)
Liquid Reference
{{ product.metafields.custom.compatibility.value }}
For further details, visit the official ACF documentation at help.accentuate.io
Last updated