Hi guys i really need your help on this one maybe my needs may just be too complex for Shopify.
I am building an online store on Shopify where I sell plants and pots. I need to implement a specific functionality on the product pages, and I am facing challenges in finding a solution that meets all my requirements. Here’s what I need:
When a customer selects the size of the plant, only the pots available for that specific plant size should be displayed below the size option. After the customer selects a pot, they should be able to choose from different colors available for that specific pot. The selected color should change the image of the pot displayed. The total price must update dynamically as the customer selects different combinations of pot type, and pot color, reflecting the sum of the plant’s cost and the chosen pot.
The challenge I’m encountering is that the available Shopify apps do not seem to provide all the necessary features, particularly the combination of conditional variant display, dynamic price updating, and specific color options for each pot. While it has been suggested that custom coding with JavaScript and Liquid might be necessary, I am reaching out to see if anyone in the community has implemented a similar solution. Is there an app or combination of apps that can achieve all of this, or will a custom-developed solution be required? Any advice, code examples, or guidance would be greatly appreciated!
Thank you in advance!
Hi,
Create a custom product template with JavaScript to handle dynamic updates.
Javascript example
document.addEventListener('DOMContentLoaded', function() {
const plantSizeSelect = document.querySelector('#plant-size');
const potSelect = document.querySelector('#pot-type');
const potColorSelect = document.querySelector('#pot-color');
const potImage = document.querySelector('#pot-image');
const totalPriceElement = document.querySelector('#total-price');
// Filter pots based on plant size
plantSizeSelect.addEventListener('change', function() {
const selectedSize = this.value;
// Fetch available pots for the selected size
// Example: Hide/show pots based on data attributes
document.querySelectorAll('.pot-option').forEach(pot => {
if (pot.dataset.size === selectedSize) {
pot.style.display = 'block';
} else {
pot.style.display = 'none';
}
});
});
// Update pot image and price based on selected pot and color
potSelect.addEventListener('change', function() {
const selectedPot = this.value;
// Fetch available colors and update the color options
// Example: Update image and price
const potImageUrl = document.querySelector(`.pot-image[data-pot="${selectedPot}"]`).src;
potImage.src=potImageUrl;
// Update color options for the selected pot
potColorSelect.innerHTML = ''; // Clear existing options
// Fetch and add color options based on selected pot
});
potColorSelect.addEventListener('change', function() {
const selectedColor = this.value;
// Update pot image based on color
const selectedPot = potSelect.value;
const colorImageUrl = document.querySelector(`.color-image[data-pot="${selectedPot}"][data-color="${selectedColor}"]`).src;
potImage.src=colorImageUrl;
// Update total price
const plantPrice = parseFloat(document.querySelector('#plant-price').dataset.price);
const potPrice = parseFloat(document.querySelector(`#pot-price[data-pot="${selectedPot}"]`).dataset.price);
const colorPrice = parseFloat(document.querySelector(`#color-price[data-color="${selectedColor}"]`).dataset.price);
totalPriceElement.textContent = (plantPrice + potPrice + colorPrice).toFixed(2);
});
});
Hi @wisedigital ,
The Easify Product Options app can help solve your issue. Below is a quick demo 
:
Here’s a suggested way to set up your options with the app:
-
Create the Plant Product: Start by creating your plant product with only a Size option (e.g., Small, Medium, Large) and no Pot options.
-
Create a separate Pot Product: Set up another product for the Pot, which includes Size and Color options.
-
Set Up Pot Options in the app:
- Add an option to represent the Small Pot Color for customers who select the Small Plant, using a suitable display type like Color Swatch or Image Swatch.
- Link each color option value to the corresponding Pot products that are available in Small size.
- Use Advanced Conditional Logic (in the Advanced Settings tab) to ensure this option only appears when the “Small” variant of the Plant product is selected.
- Repeat for Medium and Large Plants: Similarly, create options for Medium Pot Color and Large Pot Color when customers select Medium or Large Plants.
- Apply the Option Set: Once done, apply the option set to your Plant product.
If you’re interested in giving the app a try, feel free to let me know or reach out to the Easify team for quick setup guidance and assistance.
