Hello @FrogMan25
Thank you for providing the link to the 7th Avenue product page. Upon reviewing it, I see that their product page showcases fabric options grouped under distinct headings like “Performance Textured Weave,” “Woven Chenille,” and “Velvet,” each accompanied by its own set of color swatches. These swatches are organized into separate sections, allowing customers to view and select fabric types and colors independently, rather than through a single variant dropdown.
To achieve a similar layout on your Shopify product page, you can consider the following approaches:
Option 1: Using Metafields to Group Fabric Options
Shopify allows you to add custom metafields to products, which can be utilized to group fabric options. By assigning a metafield for the fabric type to each variant, you can then customize your theme to display swatches grouped under their respective fabric type headings.
Steps:
- Define Metafields:
. In your Shopify admin, navigate to Settings > Custom data > Products.
. Create a new metafield definition, for example, Fabric Type, with a single-line text type.
- Assign Metafields to Variants:
. For each product variant, assign the appropriate fabric type in the metafield you just created.
- Customize Theme to Display Grouped Swatches:
. Edit your product template to loop through variants, grouping them by the Fabric Type metafield.
. Display each group with a heading and its corresponding color swatches.
Example Liquid Code:
{% assign fabric_groups = product.variants | map: 'metafields.custom.fabric_type' | uniq %}
{% for group in fabric_groups %}
#### {{ group }}
{% for variant in product.variants %}
{% if variant.metafields.custom.fabric_type == group %}
{% endif %}
{% endfor %}
{% endfor %}
Note: Ensure that each variant has a color_hex metafield for the swatch color.
Option 2: Utilizing Line Item Properties
If your fabric options do not need to track inventory separately, you can use line item properties to collect fabric selections. This method allows for more flexibility in displaying options but doesn’t associate selections with specific variants.
Steps:
- Modify Product Form:
. Edit your product form to include custom inputs for each fabric group and its colors.
- Handle Selections:
. Use JavaScript to manage the selection of fabric types and colors, ensuring only one selection per group.
- Display Selections in Cart:
Line item properties will automatically display selected options in the cart and order details.
Example HTML Structure:
#### Performance Textured Weave
#### Woven Chenille
Recommendation
If managing inventory for each fabric and color combination is essential, Option 1 using metafields is the preferred approach. It allows for precise control over variant inventory and provides a structured way to display grouped swatches.
If inventory tracking is not required for each combination, Option 2 offers greater flexibility in presentation and is simpler to implement.
if you need help plz let me know
Thank you 
