Before customers can have it all, they have to be able to see it all! 👀  By displaying products out in an organized manner, customers can easily see all of their options. 👠 👟 👡  👢

The Multi-Child Add to Cart feature enables you to display a grid containing all variants of a product (known as “child products”) on a single page. This way, customers can quickly browse all of your merchandise, and select the style and quantity of the product they want to purchase.

Ordering the Contents of the Multi-Child Add to Cart Grid

By default, the child products in a Multi-Child Add to Cart grid are listed in alphabetical order, based on the product name. For example, child products with the product name, “Polo Shirt - Green” will appear within the Multi-Child Add to Cart grid before the product named, “Polo Shirt - Red.”

While you can't specify the order of these products within the Multi-Child Add to Cart grid, you can modify the product names to display them in an order that makes sense for your store and to your shoppers.
 

Modifying Child Product Names

You can edit a child product name by adding a brief HTML comment at the beginning of it. This can be done in the Product Name field within each product's settings page.

☝️ Good to Know: The quickest way to modify child product names is to use the Search function to display all the child products in the table view. You can then hover over the Product Name column and click Edit to open the column for editing. This enables you to directly edit the Product Name field without having to go into each product page.

For the purpose of manipulating the order in which the child products display, you’ll want to add a HTML comment containing a numeric value. If preceded with an exclamation mark, like so <!010>, <!020>, <!030>, the HTML comment will not be displayed to the customer etc.

The Multi-Child Add to Cart grid will then order each child product alphabetically or numerically based on all of the characters it detects in the Product Name field — even characters that won’t be visible to customers on the storefront.

Example

In this example, you have five child products being displayed in a Multi-Child Add to Cart grid ...

Product Code: 400-B
Product Name: Blue Shirt 

Product Code: 400-G
Product Name: Green Shirt

Product Code: 400-P
Product Name: Purple Shirt

Product Code: 400-R
Product Name: Red Shirt

Product Code: 400-Y
Product Name: Yellow Shirt

To display the products listed above with Red Shirt first, followed by Blue, Yellow, Green and Purple, add <!010>, <!020>, <!030>, etc. to each product name in order, like so ...

Product Code: 400-R
Product Name: <!010> Red Shirt

Product Code: 400-B
Product Name: <!020> Blue Shirt

Product Code: 400-Y
Product Name: <!030> Yellow Shirt

Product Code: 400-G
Product Name: <!040> Green Shirt

Product Code: 400-P
Product Name: <!050> Purple Shirt

Summary

With Volusion, your store is completely customizable. You can display products in the order that works best for you and your customers … ‘cuz they’re the ones who bring in the coin. 💰💰💰

 

 

 

Did this answer your question?