Product page sub-group

[FrogMan25]

hi, 

I’m trying to create a product page similar to the example shown in the attached screenshot. Specifically, I want to organize the fabric or color options into separate categories—like “Performance Textured Weave,” “Woven Chenille,” and “Velvet”—with each group displaying its own color swatches. The key point is that these options should appear independently and not be linked together as a single variant dropdown.

Their website link: https://7thavenue.co/products/4-seat-sectional?variant=42909080322291

Hope someone can help me with this 

[_Ecom_Boss]

Hello @FrogMan25 

You can create a product page for this by customizing the theme to display fabric groups seperately using metafields or line item propeerties, and styling each group with it's own swatches and labels without linking them through a single varient dropdown.
If you need an expert assistance to do that for, you can always reach out

[FrogMan25]

Hi,

yes, I will need additional help with steps. 

[_Ecom_Boss]

@FrogMan25 

Glad to hear that, i can guild you through the steps to set this up:

• You'll first want to define your fabric group using metafields or line item properties.
• then, customize your products template to display each group with its own set of swatches and labels.
• Finally, make sure it's styled and connected to the cart properly so selections are capture on checkout.

If you'd like, i can walk yoi through this in more detail or implement it directly to save your time. Just let me know.

[goldi07]

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:

1. 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.

2. Assign Metafields to Variants:

. For each product variant, assign the appropriate fabric type in the metafield you just created.

3. 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 %}
  <h4>{{ group }}</h4>
  <div class="swatch-group">
    {% for variant in product.variants %}
      {% if variant.metafields.custom.fabric_type == group %}
        <label>
          <input type="radio" name="id" value="{{ variant.id }}">
          <span class="swatch" style="background-color: {{ variant.metafields.custom.color_hex }}"></span>
        </label>
      {% endif %}
    {% endfor %}
  </div>
{% 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:

1. Modify Product Form:

. Edit your product form to include custom inputs for each fabric group and its colors.

2. Handle Selections:

. Use JavaScript to manage the selection of fabric types and colors, ensuring only one selection per group.

3. Display Selections in Cart:

Line item properties will automatically display selected options in the cart and order details.

Example HTML Structure:

<div class="fabric-group">
  <h4>Performance Textured Weave</h4>
  <label>
    <input type="radio" name="properties[Fabric]" value="Natural White">
    <span class="swatch" style="background-color: #f8f8f8;"></span>
  </label>
  <!-- Repeat for each swatch -->
</div>

<div class="fabric-group">
  <h4>Woven Chenille</h4>
  <!-- Swatches here -->
</div>

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  😊

[FrogMan25]

Hi, 

thank you so much for your reply. Yes, could you help me with steps to set it up? 

Thank you!