Skip to main content

Master products in Quick lists

Master products with customers restricted to quick list items only.

Niall Diamond avatar
Written by Niall Diamond
Updated this week

Setting Up Master Products in Quick Lists (Customer-Restricted)

When a customer is restricted to Quick List items only, all products they can access must be included in a Quick List.

If you’re working with configurable products (e.g., a t-shirt with size/color variations), simply adding the master product to a Quick List is not enough — the simple (child) products must also be included.

Workaround

To ensure proper visibility:

  1. Add all simple products the customer needs access to into a dedicated Quick List — call this your Master Quick List.

  2. Then, add the master products to other Quick Lists as needed to organize them into logical groups.

  3. You can hide the Master Quick List from the customer if it’s only used for backend configuration.

Here is a script to do that by quick list id. Add this to your Theme option footer block.

<script>
const hiddenQuicklistIds = ['1342500'];

function hideQuicklistByIdList() {
try {
if (!document.body.classList.contains('ex-loggedin')) {
console.log('Not logged in. Skipping quicklist hide.');
return;
}

console.log('Running hideQuicklistByIdList...');

hiddenQuicklistIds.forEach(id => {
const selector = `a[href="/customer/quicklists/${id}/edit"]`;

let dropdownMatches = [];
let tableMatches = [];

try {
const dropdownScope = document.querySelector('#vuequicklistdropdown');
dropdownMatches = dropdownScope ? dropdownScope.querySelectorAll(selector) : [];
} catch (err) {
console.warn(`Dropdown selector failed for ID ${id}`, err);
}

try {
const tableScope = document.querySelector('#quicklistgrid');
tableMatches = tableScope ? tableScope.querySelectorAll(selector) : [];
} catch (err) {
console.warn(`Table selector failed for ID ${id}`, err);
}

[...dropdownMatches, ...tableMatches].forEach(el => {
try {
const li = el.closest('li');
if (li && li.style.display !== 'none') li.style.display = 'none';

const tr = el.closest('tr');
if (tr && tr.style.display !== 'none') tr.style.display = 'none';
} catch (err) {
console.warn(`Error hiding element for ID ${id}`, err);
}
});
});
} catch (err) {
console.error('Critical error in hideQuicklistByIdList:', err);
}
}

// Initial run
hideQuicklistByIdList();

// SAFELY observe just the quicklist areas
const observerTargets = ['#vuequicklistdropdown', '#quicklistgrid'];

observerTargets.forEach(selector => {
const target = document.querySelector(selector);
if (target) {
new MutationObserver(() => {
console.log(`DOM mutated in ${selector} — rechecking quicklists`);
hideQuicklistByIdList();
}).observe(target, {
childList: true,
subtree: true
});
}
});
</script>


Have a great day!

Did this answer your question?