Calyton Offroad

This client wanted to move away from their Drupal site into a Shopify website, however they had a lot of custom requests that basic Shopify themes couldn't handle.

Requirements for this project:

• Lift Kit Customization
  • Lift Kits contain many individual products from Clayton's catalog. Kits needed to be dynamically linked with these products.
• Advanced product filtering
• Dynamic files that needed to be attached to products
• Specific shipping requirements

Lift Kits

Each lift kit contains multiple products in it. A customer can choose to purchase the entire lift kit, or specific parts from the kit.

In the image above we can see what the product page looks like. Notice the "Kit Includes" section, this is where a customer can select and deselect items in the kit that they want.

Kits and Individual product all have their own unique SKUs, this creates a challenge when linking everything together. Luckily Shopify has metafields which makes creating interactions like this much easier.

I was able to create a product list metafield in order to link kits together with their individual parts.

Dynamic Data

There's a lot of other metadata that these products needed as well.

At the bottom of the product page there are multiple tabs filled with dynamic data.

The image above shows the Instruction tab for this product. Again, each product and lift kit contains a specific set of instructions, so we needed another set of metafields.

Another example of this comes with the packaging tab. Due to the nature of lift kits being a parent of individual products, packaging differs when a user orders a whole kit versus half of the kit.

For this kit, if a customer orders the entire kit they would receive 7 different boxes, however if a customer deselected one item they would receive a separate package for each product.

This is also reflected with the shipping price which dynamically changes based on what the user selects.

Collection Pages & Product Filters

There's a lot of dynamic data going on with this website, so naturally when users are searching for products, there needs to be a robust system for them to find exactly what they're looking for.

In the picture above we can see a bunch of filters available for customers. These filters also update based on the products that are being listed on the page.

This means that a filter updates the product list and the product list updates the available filters to narrow things down for the customer.