Variant Shell Page
Last updated
Last updated
Once the customer clicks on ‘Select Variant’ they are taken to the variant shell page, which looks identical to any other 'Product Detail' page on your store, except they will be presented with options to select the variant they want to add to their cart.
In the above T-Shirt example, they would see 3 variant selector buttons: S, M and L. If you configured a help resource for that custom attribute (e.g. a sizing guide to help customers choose the right size) then the customer will also see a link to that resource which will open in an overlay modal if they click it.
Once the customer has chosen a variant they will be able to add it to their cart. At this point we know exactly which concrete product they are buying, so the management of the order, stock fulfilment etc can be done just as for any other product.
Let's recap some of the settings and logic that will dictate how the variant shell page looks
We have already discussed the settings in Custom Attributes that will dicatate what is displayed here. Let's quickly recap:
Help Link: customise the destination and text for a link for help for the customer
Variant selector display: customise how the variant selector buttons like (text, image, description etc)
Selector into: customise the text used to prompt the customer to make a selection
Description: This is sourced from the Product Category setup. If left blank, it will be sourced from the first product in the group.
Variant group image: the main image for the variant shell. If left blank, it will be sourced from the first product in the group
Where products in the group share common properties, this will be displayed on the variant shell page. For example:
Spec sheets
Custom attributes
It's important to understand that only properties that are shared between ALL products in the group are displayed. For example, if all products in the group share a custom attribute 'Material' which is 'Plastic' then this would be shown on the variant shell. If products were made from different materials, this would be ommited.
