BeYours Theme - Upsell

[ThomasKronevald]

Hi

We are selling lamps, pendants, table lamps etc. We would like, to give our customers to option to add a lightbulb when either adding the product to the cart from the product page or in the cart itself. 

Naturally, it should be the lightbulb that fits, E14 or E27. We have filters set up for lightbulbs and all lamps have in the description/filter E14 or E27. 

Is there a way in the BeYours theme to do this - or do we need either to code or have a 3rd party app?

www.ebbandflow.com

[akshay_bhatt]

Hi @ThomasKronevald ,

Steps to Customize the Product Page

1. Edit Product Template: Go to Online Store > Themes > Actions > Edit Code, open sections > product-template.liquid, and find the area around the "Add to Cart" button.

2. Add Lightbulb Selector:

{% if product.tags contains "E14" or product.tags contains "E27" %}
  <div class="lightbulb-selector">
    <label for="lightbulb-option">Add a compatible lightbulb:</label>
    <select id="lightbulb-option" name="properties[Lightbulb Type]" required>
      <option value="">Select a lightbulb</option>
      {% if product.tags contains "E14" %}
        <option value="E14 Lightbulb">E14 Lightbulb</option>
      {% endif %}
      {% if product.tags contains "E27" %}
        <option value="E27 Lightbulb">E27 Lightbulb</option>
      {% endif %}
    </select>
  </div>
{% endif %}

Add JavaScript Validation:

<script>
document.getElementById('add-to-cart').addEventListener('click', function(event) {
  if (document.getElementById('lightbulb-option').value === "") {
    alert('Please select a compatible lightbulb.');
    event.preventDefault();
  }
});
</script>
​

• Styling (Optional): Add CSS in your theme’s CSS file for .lightbulb-selector.

• Test: Visit a product page with E14or E27 tags to confirm the dropdown appears.

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

Thanks & Regards
Akshay Bhatt

[ThomasKronevald]

Hi Akshay, 

Thank you for this. If I have other types of lightbulbs, e.g. G4 and G9 would it just be adding to the code?

[ThomasKronevald]

@akshay_bhatt 

I was also recommended the Section Store App - but initial question got answered with links to pages which was not part of my questions. any recommendation for apps?