Adding additional product options to a product

[Solutions_6]

If you require more than 100 variants for a product, and the additional product options don’t require changes to the total product price, then follow the steps below. This method uses Metafields and Line Item Properties to present customers with additional product options.

The example provided here uses a newly installed copy of the Dawn theme. The details of the implementation will vary depending on your theme and any customizations that have already been made.

Note:

This customization is for Online Store 2.0 themes, and doesn’t apply to vintage Shopify themes. Find out your theme’s architecture version.

Considerations before adding additional product options

Before you begin making the customizations outlined in these instructions, consider the following limitations and risks.

• Inventory cannot be tracked for product options that are added using this method. This can lead to overselling or fulfillment issues.
• Product options that are created using this method cannot make changes to the total product price.
• If you use a third-party fulfillment service, then you’ll need to ensure that your workflows are compatible with these changes.

Before you begin

To complete this procedure, you’ll need the following:

• Knowledge of HTML, CSS and Liquid code, and Online store 2.0.
• To change a theme, you must have the Themes permission.
• To change a product, you must have the Products permission.
• Familiarity with Metafields and Line Item Properties.

It’s best practice to duplicate your theme to create a backup copy. This makes it easy to discard your changes and start again if you need to.

Display product options that are stored as metafields on your online store

Complete this procedure to update your product and cart pages to display product options that are stored as metafields.

Step 1: Update the product template to display the product options block1. In your Shopify admin, go to Online Store >Themes.

1. For the theme you want to customize, click Actions then Edit code.

2. In the Sections folder, click on the main-product.liquid file.

3. In the main-product.liquid file, find the {%- case block.type -%} switch statement and add the following code as a new block statement:

   {% when "custom_product_option" %}
        	
      {% if block.settings.values != blank %}
   
      {% assign line_item_property_enable = true %} 
    
      {% if block.settings.title != blank %}
           {% assign custom_product_option_title = block.settings.title  %}
      {% endif %}	
        
      {% assign custom_product_options = block.settings.values | strip_html | split: "," %}
        
   
   
   
      {% endif %}
   

4. In the main-product.liquid file, find the {%- form 'product' -%} tag inside the buy_buttons When statement, and add the following code:

   {% if line_item_property_enable %}
   
   {% endif %}
   

5. In the main-product.liquid file, find the {% schema %} code at the bottom of the file and add the following code:

   {
     "type": "custom_product_option",
      "name": "t:sections.main-product.blocks.custom_product_option.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "t:sections.main-product.blocks.custom_product_option.settings.title.label"
        },
        {
          "type": "richtext",
          "id": "values",
          "label": "t:sections.main-product.blocks.custom_product_option.settings.values.label"
        }
      ]
   },
   

6. Save your changes.

Step 2: Add theme settings to the product options block1. In your Shopify admin, go to Online Store >Themes.

1. For the theme you want to customize, click Actions then Edit code.

2. In the Locales folder, click on the en.default.schema.json file.

3. In the en.default.schema.json file, find the main-product section code and add the following code as a new block:

   "custom_product_option": {
     "name": "fCustom product option",
     "settings": {
       "title": {
         "label": "ffTitle"
       },
       "values": {
         "label": "ffOption values"
       }
     }
   },
   

4. Save your changes.

Step 3: Update the cart pop-up notification to display product options1. In your Shopify admin, go to Online Store > Themes.

1. For the theme you want to customize, click Actions then Edit code.

2. In the Sections folder, click on the cart pop-up file, for example, cart-notification-product.liquid.

3. In the cart-notification-product.liquid file, find the Liquid code looping through item.options_with_values and add the following code after the closing {% endfor %} tag:

   {%- for property in item.properties -%}
     {%- assign property_first_char = property.first | slice: 0 -%}
     {%- if property.last != blank and property_first_char != '_' -%}
    
   
         <dt>{{ property.first }}: </dt>
         <dd>
           {%- if property.last contains '/uploads/' -%}
        
             {{ property.last | split: '/' | last }}
        
           {%- else -%}
             {{ property.last }}
           {%- endif -%}
         </dd>
    
   
     {%- endif -%}
   {%- endfor -%}
   

4. Save your changes.

Adding additional options to a product using metafields

Complete this procedure to create a new metafield, and then add the metafield to a product that you want to have more than 100 variants.

Step 1: Create a new product option type as a metafield1. From your Shopify admin, go to Settings > Metafields.

1. Click Products.
2. Click Add definition.
3. Enter a name for the metafield. For example, Shoelaces.
4. In the Namespace and key field, change my_fields to product_option. For example, change my_fields.shoe_laces to product_options.shoe_laces.
5. Enter a description for the metafield. For example, Shoelace colors.
6. Click Select content type, and then click Text.
7. Click on Multi-line text.
8. Optional: Add Validation rules to your metafield.
9. Click Save.

Step 2: Add the product option type to a product and add product options1. From your Shopify admin, go to Products.

1. Click on the product that you want to add the product option type to, for example Wool shoes.
2. In the Metafields section, click on the product option that you want to add. For example, Shoelaces.
3. Add as many product options as you want. Each option must be separated by a comma. For example Black, White, Brown, Grey.
4. Click Save.

Add the product options block to your product page1. In your Shopify admin, go to Online Store > Themes.

1. For the theme you want to customize, click Customize.
2. Click on the drop-down menu at the top of the page and click on Products, then Default product.
3. In the Product information section, click Add block.
4. Click on Custom product option. The Custom product option block will appear in the Blocks section.
5. In the Product information section, click on the Custom product option block to customize it.
6. Enter a title for the product option block. For example, Shoelaces.
7. For the Option values, click Insert dynamic source.
8. Select the metafield that you want to use for the Product options. For example Shoelace colors. Click Insert.
9. The Custom product options block will appear in the theme preview.
10. To adjust the location of the Custom product option block, navigate to the Default product page and drag the Custom product option block to the desired location.
11. Save your changes

Next Steps- Preview a product that you’ve added additional product options to on your store.

• Customer notifications may need to be edited to include the new product option details.

[JaypalSingh]

Hi @Solutions_6 ,

Hope you are doing well.

I have the same situation as you mentioned but in my case, I have more than 100 fabrics in my product and so for this, I have created individual products for each fabric and created a list type product Metafield in the product and on the front end I fetch that Metafields product as an option through the loop and I passed that fabrics product title in line item properties of main product and it’s showing in the cart but now the problem is that each fabric has an additional price so how can I add that fabrics price to the main product and get it that price to the cart and checkout?

Please look into the matter and provide me a solution.

[FarmHouseTack]

@Solutions_6
We offer custom products on our website as well as some articles of clothing that exceed the 99 variant limit when you add in sizing. This has become a sore point with us using Shopify - the lack of understanding from Shopify that merchants need to be able to track inventory in excess of 99 variants. Apps do not successfully integrate across webgility into QB since they do not allow usage of UPC or MPN.
A 99 variant limit would be great for a small business, but with a business our size, this is becoming a major issue and our POS ASM has been unable to provide a satisfactory solution.
Would love to know if there is a solution in the works.
Cheers
Michelle

[Jaydeeco]

Pinging you back @Solutions_6 . I wonder whether this method shows the “virtual” product options in recovered carts and/or whether the options can be seen in the Shop app? This is the biggest downfall of virtual product options that we have been dealing with for years, not to mention that we can’t upsell items in the checkout because other virtual product options I have tried in the past can’t be seen by Shopify.

I’m yet to try your method myself, but if the method does not let the options show up in any of the places I mention, then I don’t really see any point in testing, as my current methods already do this.

[Taha_ali10]

Hi,

If we have to add some additional options with some extra prices which gonna add up after selecting options, does it have any solution? The below screenshot from a coding website demonstrates my issue. I desperately need to cope with it.

Eager to hear from you soon,

Regards.

[FarmHouseTack]

We have used an app called Infinite Options for this where you can create rules for add-ons to a product. However, we are hopeful that once Shopify releases its new 2000 variant limit this year we can get away from Infinite Options as it does not allow us to track inventory, which is very frustrating.
Hope this helps!
FHT

[michael_pate]

I talked to Shopify yesterday about the variant limit. Currently, you have to have the $2k/month plan to get the 2,000 variant limit. They are saying it will be sometime in 2025 before the rest of us get this feature. We used Infinae Options a long time, but it caused other problems like the one you mentioned with inventory. We all need to keep pushing Shopify to increase this limit. It is a big problem for many of their customers.

[FarmHouseTack]

I hear you. We are on the 2k plan and I’ve begged my MSM to be part of
the Beta testing as they have not released it yet and we are DESPERATE to
get off of these apps so we can track inventory.