Engineers

Industries

Fashion

Wholesalers

Wireframe

Coding Instructions

Please note: This tweak assumes that you have the PRESELECT_VARIATION advanced config disabled. If you plan on showing other variation products on your site using the default dropdown interface, you will also need to follow this tweak.

Step 1. Data Requirements

This tweak has some product data requirements and requires some advanced configurations to be adjusted.

Due to the nature of this tweak, a new custom product field will need to be set up to toggle this UI, otherwise it will break the layout of products which do not fit the data requirements and need to use the standard UI.

This new field will be used to toggle whether the new grid layout shows on a product page. Call it Show Grid. Ensure all of the settings are the same as the example below:

In addition to the new misc field, the products will need to be configured. There are a few requirements for this.

Firstly, all of the products which will be using this interface need the new misc field Show Grid set to true.

Second, the product must have Product Variations set up, with exactly two specifics each (colour and size, for example).

Step 2. Install the new Grid template

The code for the grid will be called from a new include within the products folder. This helps seclude it from the rest of the product page code and reduce the risk of breaking the standard functionality.

Copy the code below into a new product include called grid.template.html (/httpdocs/assets/themes/[THEME-NAME]/products/includes/grid.template.html).