LogoLogo
Siteglide.comAdminRoadmap
  • 👋Welcome
  • Get Started
    • 🚀Quickstart Guides
    • ❔Support & FAQs
      • â„šī¸Siteglide Support Policy
      • â„šī¸Siteglide Technology Stack
      • â„šī¸External Resources
      • â„šī¸Front-end Browser Support
  • Portal
    • Account
    • Sites
      • 🚀Quickstart: Create a Site
      • â„šī¸Site Details
      • â„šī¸Site Users
      • 📋Install & Manage Modules
      • đŸ’ŗGo Live
      • đŸ’ŗSubscription
      • 🌍Domains
        • 📋Add a Fully Delegated Domain
        • 📋Add an External Domain
        • đŸ’ģSubdomain on a separate instance
        • 📋How to setup a multi domain start page
      • â˜ī¸Site Backups and Disaster Recovery
    • Users
      • 📋User Roles
      • 📋Invite & Manage Users
    • Billing
      • đŸ’ŗBilling Setup
      • đŸ’ŗSubscriptions and Changes
      • đŸ’ŗAutomatic Site Upgrades
      • đŸ’ŗInvoices
    • Tickets
    • Marketplace
    • Agencies
      • 👩‍đŸ’ģAgency Account
      • 👩‍đŸ’ģClients
      • 👩‍đŸ’ģSite Copies
      • 👩‍đŸ’ģAgency Whitelabelling
  • Developer Tools
    • CLI
      • 🚀Quickstart: CLI
      • â„šī¸About
      • 📋Site Setup
      • ❔Troubleshooting
      • đŸ’ģReference
      • đŸ›ŗī¸CLI Changelog
      • đŸ§™â€â™‚ī¸Go Further: CLI
        • Creating WebApps via CLI
    • Liquid
      • â„šī¸About
      • đŸ’ģReference
      • Accessing Data in Liquid Variables - Tutorial 1 - Using Dot Notation
      • Accessing Data in Liquid Variables - Tutorial 2 - Iterating over Arrays and Objects
      • Using Collections with WebApps and Modules
      • Accessing Data from the Global Context Variable
      • Truthiness - Using Liquid to determine if a field is empty or blank
      • 📋Alternatives to Storing and Executing Liquid from Database Items
    • GraphQL
      • â„šī¸About GraphQL
      • 📋Tutorials
        • Tutorial 1 - Your First Query
        • Tutorial 2 - Pagination
        • Tutorial 3 - Filtering the Results
        • Tutorial 3 - (Answers)
        • Tutorial 4 - Advanced Filtering
        • Tutorial 4 - (Answers)
        • Tutorial 5 - Using Liquid to run GraphQL queries on your Site
        • Tutorial 6 - Variables
        • Tutorial 6 - (Answers)
        • Tutorial 7 - Sorting
        • Tutorial 8 - Building a Liquid API GET Endpoint Page powered by GraphQL queries
        • Tutorial 9 - Using Mutations to Create New Records
        • Tutorial 10 - Using Mutations to Edit a Record
        • Tutorial 11 - Using Mutations to Delete an Item
        • Tutorial 12 - Related Records and Datasources
    • Configuration
      • â„šī¸Field Types
      • â„šī¸Custom Field IDs
    • Zapier Integration
      • â„šī¸Formatting arrays correctly
    • Developer Marketplace
      • â„šī¸About Building Modules
      • â„šī¸Module Setup
      • â„šī¸Site Template Modules - and How to Make Your Own
      • â„šī¸Create Folder Structure
      • â„šī¸Updating Modules
      • â„šī¸Submit Module for Approval
      • â„šī¸Adding Payment to a Module
      • â„šī¸Theme Module Example
      • â„šī¸Data & UI Module Example
      • đŸ’ģReference
      • đŸŒŗFile Structure
    • Release Notes
      • đŸ›ŗī¸Siteglide Admin/API - Changelog
      • đŸ›ŗī¸Module - System Files - Changelog
      • đŸ›ŗī¸Module - eCommerce - Changelog
      • đŸ›ŗī¸Module - Menu - Changelog
      • đŸ›ŗī¸Module - Slider - Changelog
      • đŸ›ŗī¸Module - Secure Zones - Changelog
      • đŸ›ŗī¸Module - FAQ - Changelog
      • đŸ›ŗī¸Module - Events - Changelog
      • đŸ›ŗī¸Module - Blog - Changelog
  • SiteBuilder
    • Build Sites Faster
      • 🚀Quickstart: SiteBuilder
      • About
      • Site Setup
        • đŸ—ī¸Marketplace Themes & Templates
        • đŸ—ī¸Create Site From Template
        • đŸ—ī¸Install SiteBuilder Module
        • đŸ—ī¸Create a Page Template
        • đŸ—ī¸Set Up Tailwind CSS with the recommended CLI method
      • Styling
        • đŸ—ī¸Editing Tailwind CSS using the recommended CLI method
        • đŸ—ī¸Tailwind CSS Themes - Choosing a Build Method
        • đŸ—ī¸Tailwind CSS - Preview Mode
        • đŸ—ī¸Tailwind's JIT Compiler Via CDN (deprecated)
        • đŸ—ī¸Theme Presets
        • đŸ—ī¸Example Tailwind Project Setup
      • Layouts
        • đŸ—ī¸Insert Static Layouts
        • đŸ—ī¸Installing Dynamic Layouts
        • đŸ—ī¸Editing Dynamic Layouts
        • About Layouts
          • đŸ—ī¸Dynamic Layouts
          • đŸ—ī¸Static and Dynamic Form Layouts
          • đŸ—ī¸Sliders
      • đŸ’ģReference
    • Advanced Features
      • 🧞SiteBuilder Live Updates API
        • 👀Live Updates Reference
        • 🔹Live Updates Markup Example
        • 📋Steps to Setting Up Live Updates API in a Module/WebApp Layout
        • 🔹Live Updates Example - Enforcing Filters
        • 📋Steps to Use Live Updates Methods
        • 📋Steps to Initialise Live Updates with JS
        • đŸ—“ī¸Live Updates Changelog
      • â„šī¸SiteBuilder JavaScript
        • â„šī¸Forms JS
        • â„šī¸Social Sharing JS
        • â„šī¸Sliders JS
        • â„šī¸Dark Mode JS
        • â„šī¸Cookie Settings JS
      • â„šī¸SiteBuilder Liquid Includes
        • â„šī¸Pagination
      • â„šī¸SiteBuilder Liquid Functions
        • â„šī¸Detail Page Valid
        • â„šī¸Field Mapping
        • â„šī¸Get Table Config
        • â„šī¸Case From Order ID
      • đŸ—“ī¸SiteBuilder Changelog
    • Extend SiteBuilder
      • â„šī¸Create SiteBuilder Themes
      • â„šī¸Create Marketplace Modules
      • â„šī¸Adding Dynamic Layouts to Themes & Modules
      • â„šī¸Adding Static Layouts to your Theme
      • đŸ’ģReference
  • CMS
    • Dashboard
    • Pages
      • 🚀Quickstart: Pages
      • 🎨Studio (Alpha Release)
        • 🎨Setup
        • 🎨Create a Page
      • â„šī¸Editor (Legacy Studio)
      • â„šī¸Code View & Toolbox
      • â„šī¸About Pages
        • â„šī¸Page Settings
        • â„šī¸Custom Fields in Pages
        • â„šī¸Pages with Siteglide CLI
      • â„šī¸About Page Templates
        • â„šī¸Page Templates with Siteglide CLI
        • Preventing Duplicate Content
      • â„šī¸System Pages
      • đŸ’ģReference
      • đŸŒŗFile Structure
    • Content Sections
    • File Manager
      • 🔹About Assets
      • 🔹Linking to Assets Explained
      • 🔧Assets Troubleshooting
      • 🔹Siteglide Scripts Explained
      • đŸ’ģAssets with CLI
      • đŸ”ŧMigrating Assets
      • 📋Steps to Optimise Images on the Fly with Cloudinary
      • 🔹siteglide_head_scripts and siteglide_footer_scripts Explained
      • đŸŒŗAssets File Structure
      • 👀Tags for Assets
    • Forms
      • Quickstart: Forms
      • â„šī¸About Forms
      • 📋Guides: Forms
        • 📋Steps to Using Separate Fields for First Name and Surname in a Form
        • 📋Steps to Programmatically Redirecting after a Form Submission
        • 📋Steps to Adding Form Confirmation Pages
        • 📋Steps to Adding a Progress Bar
        • 📋Steps to Changing Form Styling on Submission Using CSS
        • 📋Steps to Using Custom Field Set fields in a Form's Custom Layout
      • đŸ§™â€â™‚ī¸Go Further: Forms
        • â„šī¸Migrating Forms
        • â„šī¸Explained - Preventing Spam Form Submissions and Captchas
        • â„šī¸Explained - Show Clearly When a User is Already Logged in When Submitting a Form
        • â„šī¸Forms Error Callback and Validation
        • â„šī¸Forms Success Callback
        • â„šī¸File Upload Previews
      • đŸŒŗForms File Structure
      • đŸ’ģReference
      • ❔Troubleshooting
    • Automations
      • 🚀Quickstart: Automations
      • â„šī¸About
        • â„šī¸Email Templates
        • â„šī¸Email Automations and Email Templates with Siteglide CLI
      • 📋Guides
        • â„šī¸Integration Automations
        • â„šī¸A Transactional Email Example
        • â„šī¸An API Call Action Example
        • â„šī¸A Custom Liquid Action Example
        • 📋Steps to Testing Emails on a Staging Site
        • 📋Steps to Authenticating Sendgrid Emails on Live Sites
      • đŸ§™â€â™‚ī¸Go Further
      • đŸ’ģReference
      • đŸŒŗFile Structure
    • Categories
      • 🚀Quickstart: Categories
      • â„šī¸About
        • â„šī¸Outputting Categories on WebApp / Module / eCommerce Layouts
        • â„šī¸Filtering WebApps and Modules by Categories Using Liquid Parameters
      • đŸŒŗFile Structure
      • đŸ’ģReference
    • Company Information
      • â„šī¸About
      • đŸ’ģReference
      • ❔Troubleshooting
    • URL Redirects
  • Modules
    • Core Modules
      • MenuBuilder
        • 🚀Quickstart: Menu Builder
        • â„šī¸About
      • Secure Zones
        • 🚀Quickstart: Secure Zones
        • â„šī¸About
          • 📋Dynamically Assign a Secure Zone during Form Submission
        • đŸ§™â€â™‚ī¸Go Further
          • â„šī¸Secure Zones with Siteglide CLI
          • â„šī¸Using the context.current_user object
      • Media Downloads
        • 🚀Quickstart: Media Downloads
        • â„šī¸Layouts
        • đŸ’ģReference
      • Blog & Authors
        • 🚀Quickstart: Blog & Authors
        • 🔹Blog Archive & Date Filtering
        • 🔹Blog Search
        • 🔹Blog Filter by Category
        • 🔹Blog Filter by Author
        • đŸŒŗFile Structure
        • đŸ’ģReference
      • Events
        • 🚀Quickstart: Events
        • â„šī¸Standard List View
        • â„šī¸Getting Started with Event Filtering & Searching
        • â„šī¸Filter by Category
        • â„šī¸Filter By Host (Author)
        • â„šī¸Filter by Event Dates
        • â„šī¸Datasourcing the Event Host
        • â„šī¸Search
        • â„šī¸Map List View
        • â„šī¸Calendar List View
      • FAQ
        • 🚀Quickstart: FAQ
        • đŸ’ģReference
      • Testimonials
        • 🚀Quickstart: Testimonials
        • đŸ’ģReference
      • Slider
        • 🚀Quickstart: Slider
        • đŸ’ģReference: Slider
    • Community Modules
      • đŸ—ī¸SiteBuilder
      • 🚀CRM Sync
        • â„šī¸About CRM Sync Module
        • 📋Steps to Set Up CRM Sync on an Automation
        • đŸ—“ī¸CRM Sync Changelog
    • Go Further: Modules
      • â„šī¸Front-end Submit Modules
  • WebApps
    • 🚀Quickstart: WebApps
    • WebApp Items
      • 📋Create WebApp Items
      • 📋Importing and Exporting
    • Layouts
      • â„šī¸WebApp List Layout
      • â„šī¸WebApp Detail Layouts
    • Go Further: WebApps
      • 📋Searching by Location
      • 📋Searching - Advanced Filtering
      • 📋Searching - By Keyword
      • 📋Front End Create Forms
      • 📋Front End Update Forms
      • 📋Front End Delete
  • WebApp Troubleshooting
  • eCommerce
    • 🚀Quickstart: eCommerce
    • Get Started
      • 💡About the eCommerce Module
      • Settings
      • 📂Cart, Checkout and Quotes
        • 💡About Cart, Checkout and Quotes
        • 📋Steps to Implement a Guest Checkout Flow
        • 📂Product Views
          • 🔹Product Layouts
          • 🔹Product List Layout
          • 🔹Product Detail Layout
          • 🔹Add to Cart Button
          • 📋Steps to Datasource and Display Related Products
          • 🔹Dynamic Product Layouts based on Categories
          • 📂Attribute Selection
            • 🔹Attribute Layout - Presenting the Choice to the Customer
            • 🔹Attributes - Changing Product Price after Change
          • 📂Discount Selection
            • Discount Codes Layout
            • Minimum Payments
          • 📂Shipping Selection
            • Shipping Options Layout
        • Managing Products
          • Creating and Editing
          • Securing Products
          • Location
          • Custom Fields
          • Edit Module Structure
          • Product Custom Field Sets
          • Inventory
          • Managing Attributes
          • Pricing
          • Product Categories
          • Open Graph Fields
          • SEO Fields
          • Standard Fields
          • Product Import and Export
          • Discounts
        • 📂Cart
          • 🔹Cart Layouts
          • Checking Inventory in Cart
          • Updating Quantity in Cart
          • Updating Displayed Cart Quantity
        • 📋How to Set Up a Shopping Cart and Guest Checkout - Tutorial
        • 📂Checkout Forms
          • 🔹Checkout Form Layouts
          • 🔹Checkout Forms with PayPal
        • 📂Orders
          • Order Confirmation
          • Re-Ordering
          • 🔹Orders Layouts
        • 📋Steps to Add Secure Zones and User Orders View to your Checkout Flow
        • Quotes
        • Selling Digital Products
        • 🔹Volume Pricing
        • 📋Steps - Alternatives to Product Grouping
      • 📂Basic Payment Forms
        • 💡About Basic Payment Forms
        • 📋Steps to Set up a Basic Payment Form (with a Fixed Payment Amount)
        • 📋Authorize.net Basic Payment Forms
        • 📋PayPal Basic Payment Forms
        • 📋Steps to Allow User to Decide Amount they Will Pay
        • 📋Step-by-step Basic Payment Confirmations
        • 👀Basic Payment Forms Reference
        • â„šī¸ecommerce/basic_payment
      • 📂Payment Gateways
        • đŸ’ģBuilding a Custom Payment Gateway
          • 📋Steps to Support Basic Payment Forms with your Custom Payment Gateway
          • 📋Steps to Support Checkout with your Custom Payment Gateway
        • 🔹Paypal Custom Parameters
        • 🔹Styling Stripe Card Elements
        • 💡About Payment Gateways
        • 📋Steps to Switching Payment Gateway
        • 🔹Test Cards
      • 📂Currency and Tax
        • 💡About Tax Codes
        • Currency Changer
        • Tax Code Changer
        • Formatting Currency
      • 📂Subscriptions
        • 💡About Subscriptions
        • Managing Subscriptions
          • Creating Subscription Products
          • Changing Price and Billing Interval
          • Creating a Form for Signing Up and Changing Payment Details
          • Subscription Order Status Explained
          • Terms and Conditions (Good Practice)
        • 📋Subscriptions Payment Gateway Setup
        • Subscriptions List Layout
        • Subscriptions Detail Layout
        • User's Active Subscriptions
        • Subscription Action Required
        • Cancelling Subscriptions
      • đŸŒŗBasic Payment Forms Folder Structure
      • đŸŒŗCart and Checkout Folder Structure
  • CRM
    • 🚀Quickstart: CRM
    • Users
      • User Details
      • User Secure Zones
      • How Users Edit their Email and Password Front End
      • Custom Field Sets & CRM Custom Fields
      • Storing User's Favourite WebApp / Module Items
    • Companies
    • Cases
      • User's Form Submissions (Cases)
  • Site Manager
    • Code Editor
    • Templates (Pages & Email)
    • Headers & Footers
    • Code Snippets (Includes)
      • 🔧Includes Troubleshooting
      • 👀constants_json
      • 👀constants
      • đŸŒŗIncludes File Structure
      • đŸ’ģIncludes with Siteglide CLI
      • 🔧Tags for Includes
    • System Pages
      • Automatic Site Maps
    • System Emails
    • Data Management
    • Admin Menu Editor
    • Integrations
  • Reporting
    • 🚀Quickstart: Reports
  • Miscellaneous
    • System Features
      • Pagination on Liquid Tags
      • Custom Pagination Layouts
      • Timezones in the Siteglide Admin and on the front-end of your Site
      • Module/WebApp Caching
      • Getting Started with Liquid Caching - to Reduce Server Response time and Improve Performance
      • Translating Dates
      • Site Search
      • About Site Search
      • AI Tools for the Rich Text Editor
      • Cookies on Siteglide Sites
    • Front-End Performance
      • Video Embeds
      • Forms Above the Fold
Powered by GitBook
On this page
  • Prerequisites
  • Introduction
  • What are Product Attributes?
  • What was Product Grouping?
  • How to use Siteglide Categories to build a Product Grouping eCommerce Site
  • Step 1) Create a Category for the Group
  • Step 2) Add the Group Category to all Products in the Group
  • Step 3) Output the Related Products on the Product Detail Page
  • Create an object containing the included Products
  • Step 4) Optional - Output the Related Products within a dropdown
  • Add JavaScript
  • The Solution

Was this helpful?

Export as PDF
  1. eCommerce
  2. Get Started
  3. Cart, Checkout and Quotes

Steps - Alternatives to Product Grouping

PreviousVolume PricingNextBasic Payment Forms

Last updated 3 months ago

Was this helpful?

Prerequisites

In this tutorial we'll be using both Categories and Collections, if you're unfamiliar with either of these we'd recommend refreshing your memory:

Introduction

Often in eCommerce, you will have Products that are similar to one another. e.g. You might have a brand of chocolate with certain different flavours available. Or you might have different sized packs.

What are Product Attributes?

On Siteglide, we provide the Attributes feature- which allows you to merge these multiple varieties into a single Product with options. Users choose which Attributes to select as they add the Product to the Cart, and the Price can be adjusted accordingly. .

What was Product Grouping?

Adobe Business Catalyst, on the other hand, also allowed Users to "group" these similar Products instead. Product Grouping treated the Product variations as separate entities which could show up in Product Lists independently. Meanwhile, the Product Detail Page for one variation would display a list of alternate Products in the group, allowing you to switch to view the different information. Many partners have expressed an interest in re-creating this Product Grouping feature on their Siteglide Site.

There are several ways to achieve this:

  • Use Categories to group the Products

  • Use Datasources to build a relationship between a Product and similar Products in the Group

  • Convert an existing Product Grouping setup to use single Products with instead.

In this Article, we'll demonstrate how to group the products using Categories.

How to use Siteglide Categories to build a Product Grouping eCommerce Site

Step 1) Create a Category for the Group

First, create a Category that will link the products together.

If you will also have some non-grouped Products, you may wish to create a "Product Groups" Category as well as a parent to organise all your product grouping Categories inside- bellow I'll explain how you can ensure that only Categories within the parent Category are used.

Here's how I've structured my Categories, "Chocolate" and "Crisps" each represent separate groups of Products, the parent Category "Product-group" will be used to identify them as Product grouping Categories, allowing you to keep them separate from the other Categories your Products may have:

Now let's look at how we can ensure only the Categories within "Product-group" are used when outputting our related Products. First I assign an object containing all the Categories on my Site (this gives us access to all the Categories fields, rather than just the ID):

{% assign categories = context.exports.categories.items %}

Next loop over all of our Products categories, at each iteration we'll store the "full_slug" of the Category (this will include the parent Categories slug, which we can use to check the Category is being used for Product grouping).

Note: "this" contains one of the Category IDs assigned to our Product, we then use that ID to find all of the Categories details in "context.exports.categories.items":

{% for category in this.properties.category_array %} 
  {% assign full_slug = categories[category].full_slug | split: '/' %}
{% endfor %}

We've now created an array of all the individual "parameters" in our "full_slug" field, next we'll loop over this and check none of the parameters equal "product-group"- if they do then we know that Category is being used for Product Grouping and store its ID. Add this code to the for loop above:

{% for category in this.properties.category_array %} 
  {% assign full_slug = categories[category].full_slug | split: '/' %}
  {% for p in param %}
    {% if p == "product-group" %}
      {% assign group_category = this %}
    {% endif %}
  {% endfor %}
{% endfor %}

This will check all of the parameters, make sure you replace "product-group" with whichever slug your wrapping Category is using. If it is a Product grouping Category, we store the ID in the variable "group_category". We'll use this ID later to output our Related Products.

Step 2) Add the Group Category to all Products in the Group

Now add all the related Products to this Category. You can do this in the Categories tab when editing your Product. In this example- we'll be selecting the "Crisps" Category to add to our "Ready Salted" flavour Product.

Repeat step 2 for all the Products you'd like to be linked together.

Step 3) Output the Related Products on the Product Detail Page

On the Detail Page of each Product in the group, we'll next need to List the other Products in the group.

There are now two ways we could output the related Products. You can choose one of the following methods:

  • Include the other Products in group by nesting a filtered Product List Layout inside the Product Detail Layout.

  • Keep all the code tidy inside the Detail Layout using a Collection to fetch the same data.

We'll demonstrate how you can use method 3) b).

Option 3) a) Output the Related Products within a List Layout

If you'd like to use a separate Layout to output your products, add this include to the Layout you're working in:

{% for category in this.properties.category_array %} 
  {% assign full_slug = categories[category].full_slug | split: '/' %}
  {% for p in param %}
    {% if p == "product-group" %}
      {% assign group_category = this %}
    {% endif %}
  {% endfor %}
{% endfor %}




{%- include 'ecommerce/products'
    layout: 'custom_layout'
    per_page: '20'
    show_pagination: 'true'
    sort_type: 'properties.name'
    sort_order: 'asc'
    category_ids: group_category
    type: 'list' 
-%}

...where group_category contains the ID of the category containing the related Products. In your chosen Layout, you would be able to add Content regarding the Related Products.

Option 3) b) Output the Related Products within a Collection

Now we know which Products are related to one another, we can output them. For this demo, I'll be outputting them within the Detail Layout.

{%- include 'ecommerce/products'
    layout: 'default'
    per_page: '20'
    show_pagination: 'true'
    sort_type: 'properties.name'
    sort_order: 'asc'
    category_ids: 'category_id'
    type: 'list'
    collection: 'true' 
-%}


If you're in a Detail layout, make sure to include the type: 'list' parameter. Also, ensure collection: 'true' is added to the include, along with your Category ID.

Create an object containing the included Products

The Collection will call all the specified items into {{context.exports}}, to save us writing the whole path to the item each time we output something, we'll store them in an Object: {% assign items = context.exports['module_14/product'].data.result.items %}

Now loop over the object, at each iteration we'll check that the ID doesn't equal the ID of the Product being displayed on the Detail Page (this will stop the Product on the Detail page being displayed as related). We'll use {{this.id}} to do this:

{% for item in items %}
  {% if item.id != this.id %}
    <!-- Add content relating to the Related Product here -->
  {% endif %}
{% endfor %}


Step 4) Optional - Output the Related Products within a dropdown

Many partners who have expressed interest in the Product Grouping feature have also requested a demonstration of how to include a dropdown menu which allows easy access to links to other products in the Product group.

As always when using custom JavaScript, you may wish to adjust the simplified examples in order to add in improvements to SEO and accessibility.

Option 4) a) Using a Collection method if you followed step 3) a) above

For this demo, I've chosen to output my Related Products using <select> & <option>, and some Javascript that will redirect the Page.

<label for="options">Related Products</label>                          
<select name="options" class="form-control" onChange="handleOption(this)">
  <option>---Select alternative Product---</option>  
  {% for item in items %}
    {% if item.id != this.id %}
      <option value="/{{item['module_slug']}}/{{item['slug']}}"> 
      {{item.name}}</option>
    {% endif %}
  {% endfor %}                          
</select>

This will output ---Select alternative Product--- as the placeholder for the options, then will loop over all the items in the Object we've just created, each iteration will output another <option> where the value contains a relative link to that Products Detail Page.

Lastly, we'll need to add the Javascript for the "handleOption" function above, this will simply redirect to the slug within the options value attribute:

<script>
  function handleOption(elm) { 
    window.location = elm.value; 
  } 
</script>

Option 4) b) Including a separate Product List Layout if you followed step 3) b) above

If you used the method 3) b) above, you'll need to move some of the code from 4) a) inside the products Layout.

Wrapper

Make sure your Wrapper still includes the items inside the <select> element:

<label for="options">Related Products</label> 
<select name="options" class="form-control" onChange="handleOption(this)">
  <option>---Select alternative Product---</option>  
  {%- include 'modules/siteglide_ecommerce/ecommerce/get/get_products', item_layout: 'item' -%}
</select>

Item

The HTML and Liquid for each option should then be included inside the item.liquid file: <option value="/{{item['module_slug']}}/{{item['slug']}}">{{item.name}}</option>

Add JavaScript

As above, you'll need to include a JavaScript function to make the dropdown functional.

<script>
  function handleOption(elm) { 
    window.location = elm.value; 
  } 
</script>

The Solution

Alright, that's everything we need to link our Products. Here is a screenshot of the solution:

To do this we'll use a Collection (read more here: ) which will be filtered by the parameter "category_id", meaning only items within the specified category are included (please follow step 1 for instructions on how we can do this dynamically).

📂
📋
Categories - Introduction
Webapp Collections
outputting them as options Front End
Attributes
Collections