How can I add optional products without an app using liquid code?

ogeid
Shopify Partner
68 0 23

Hello Community,

I need to add some optional hardware to two of my products. It's a set of bolts for for a couple bucks. I'd like to add a little checkbox and an image.

Does anyone know the liquid code for this?

Since it just for two items, I don't want to get an App that I need to pay a monthly fee on it.

Thanks, Diego

D.E.W. L.A. - Web Design
https://dew.la
Replies 23 (23)

koerb
Excursionist
11 2 1

Hey,

what about using variants for those two products?

When your theme supports variant, that should be the easiest way.

diego_ezfy
Shopify Partner
2967 571 900

Hello,

Without apps this is unfortunately impossible.
What is possible is having custom options without charging extra (using line variants), but if you wanna charge for the options then you'll have to use an app. 

Kind regards,
Diego


NAVEKI
Shopify Partner
17 0 6

To clarify, you want to add additional products to cart if a user has those products checked upon clicking 'add to cart'? If so you don't need an app for that. What's your site (& password if needed). 

ogeid
Shopify Partner
68 0 23

@NAVEKI  Yes, exactly. 

I was thinking there must be simple way to add a checkbox option that refers to the product id of the add-on item.

What do you suggest? I'm using the Debut Theme

D.E.W. L.A. - Web Design
https://dew.la
diego_ezfy
Shopify Partner
2967 571 900

@ogeid 

If you want to add another product then it's possible without an app.
What wouldn't be possible is to add an extra option and charge for it.

You'd very likely need to have an AJAX cart on your store for this to work, I am not sure whether it'd work without it (I could be wrong though).

Ok, so the workflow would basically be:

1. Create a HTML checkbox input on your product-template.liquid
2. Listen for ATC clicks at theme.js
3. If the checkbox is ticked, add both the current product (plus its quantity) & the other product (plus the quantity of the main product).

I'd go even further and also add a field at the customize page to choose which product to add as an add-on.

Something like this:
example.png


Using something like cartJS would potentially make it easier as well.

Kind regards,
Diego

ogeid
Shopify Partner
68 0 23

I was able to find a very simple code solution that seems to be working. I placed it below the product description with an Add-to-Cart button. The value number in the for input field is the add-on product variant id.

        <div class="product-single__description rte">
          {{ product.description }}
          <br/>&nbsp;<br/>
          <div class=add-on-product-style>
          	{% for tag in product.tags %}
        	 {% if tag == 'add-on-anchor' %}
        		<form method="post" action="/cart/add">
                          <input type="hidden" name="id" value="35639764123804" />
                          <input type="hidden" value="4" id="quantity" name="quantity" />
                          Optional Anchor Bolt Set +$16.00 &nbsp;&nbsp;
                          <input type="submit" value="Add to cart" class="btn" />
                          <input type="hidden" name="return_to" value="back" />
			</form> 
         	  {% endif %}
          	{% endfor %}
          </div>
        </div>

 

This is how it looks on the product page. I still need to add some styling, but this is without any styling:

cart-add-on.png

 

The add-on shows in the cart just like any other product:

cart-add-on2.png

 

I'll keep searching if I can find a way to do it with a checkbox.

D.E.W. L.A. - Web Design
https://dew.la
NAVEKI
Shopify Partner
17 0 6

have you found a solution with the checkboxes you wanted?

ogeid
Shopify Partner
68 0 23

@NAVEKI 

Yes, I was actually able to get a checkbox to work.

I first did a version that used the "tags" to identify the add-ons, which doesn't require any apps, but then decided to use a metafields instead.  I installed Metafields Guru app which is free (for now).

Basically, I just needed something to identify which products should feature an add-on and which add-on.

In the metafields for the product, I list the SKU of the add-ons

 

In the product-template.liquid change/add the following:

1. add brackets to the id:

<select name="id[]" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">

This will allow you to add multiple products with the Add to Cart button.

 

2.  Add the following code before {% endfrom %}

			<! -- Add-on Item Start --> 
            {% for metafield in product.metafields.details.addon %}
                {% for product in collections.all.products %}
                    {% for variant in product.variants %}
                        {% if metafield == variant.sku %}
                            <div class="add-on-product-container"> 
                              <a href="{{ product.url }}"><img src="{{ product.featured_media | img_url: 'x50' }}" class="add-on-image"></a>
                              <span class="add-on-element"><strong>Optional: {{ product.title }}</strong><span>
                               <span class="add-on-element">+ {{ product.price | money }}<span>
                               <span class="add-on-element"><input class="add-on-product-checkbox" type="checkbox" name="id[]" value="{{ variant.id }}" /></span>
                            </div>
                         {% endif %}
                    {% endfor %} 
                {% endfor %} 
            {% endfor %}
            {% for metafield in product.metafields.details.addon2 %}
                {% for product in collections.all.products %}
                    {% for variant in product.variants %}
                        {% if metafield == variant.sku %}
                            <div class="add-on-product-container"> 
                              <a href="{{ product.url }}"><img src="{{ product.featured_media | img_url: 'x50' }}" class="add-on-image"></a>
                              <span class="add-on-element"><strong>Optional: {{ product.title }}</strong><span>
                               <span class="add-on-element">+ {{ product.price | money }}<span>
                               <span class="add-on-element"><input class="add-on-product-checkbox" type="checkbox" name="id[]" value="{{ variant.id }}" /></span>
                            </div>
                         {% endif %}
                    {% endfor %} 
                {% endfor %} 
            {% endfor %} 
            <! -- Add-on Item End -->     
       
          {% endform %}

I did two for loops to add either one or two add-ons, depending what is needed for the product.

 

3. Add the add-on SKU to the products metafields:

metafields.png

that's it.

 

Here's how it looks with one add-on:

addon1.png

 

Here is the 2 add-on example: 

addon2.png

In the cart the product and add-on show as separate items:

cart.png

 

Still need to line up the text and add photos of the add-ons, but other than that it works fine. The add-on quantity always matches the product quantity, so if you have a product that require multiples of one add-on, you need to make product sets.

Hope this helps,

Diego 

D.E.W. L.A. - Web Design
https://dew.la
mithun_biswas
Visitor
1 0 0

thank you brother for your advice. but can you help give me a video? [i need add-ons with dropdown menu] without the app.

gary07
Tourist
28 0 3

Hi

 

Did you find the soluction

 

 

gary07
Tourist
28 0 3

Hi @ogeid 

 

I am trying this option code you have given but When we display both or a Single item the add-on the Add to Cart button now working

ogeid
Shopify Partner
68 0 23

Hey @gary07 ,

 

You need to make sure the code for your add-on items is in between <form method="post" action="/cart/add"> ... and ....</form>. This allows your regular product and your add-on to be summited to the cart at the same time.

 

Hope that helps.

D.E.W. L.A. - Web Design
https://dew.la
gary07
Tourist
28 0 3

@ogeid  I have tried but does not work would you able to do it for me

ogeid
Shopify Partner
68 0 23

What theme are you using?

D.E.W. L.A. - Web Design
https://dew.la
gary07
Tourist
28 0 3

Hello @ogeid 

 

its https://boostertheme.com

 

 

gary07
Tourist
28 0 3

Hello 

 

WOuld you able to help me

ogeid
Shopify Partner
68 0 23

Hello @gary07,

Do you still need help with this project? The key is to place the other products within the existing form tags.  If you want me to take a look at your store send me a PM. 

Regards, Diego

D.E.W. L.A. - Web Design
https://dew.la
sethga
Shopify Partner
3 0 0

This is such an awesome idea! With the most recent version of Dawn, there is a {form} element within the product.liquid file, but there is also a <form> in the rendered buy-buttons.liquid file. I keep trying to figure out the right place to put everything, but I can't quite get it. Any recommendations or tips?

jbradbz
Visitor
1 0 0

Old Thread I know but here goes - Using dawn theme, there seems to be no product-template.liquid.

 

Would i simply create it? Or is there some wizardry done here that's actually wrong?

-JB
mervinyong
Shopify Partner
2 0 0

Hi @ogeid , are you able to help me with customization on my store for the feature above?

sethga
Shopify Partner
3 0 0

Hi! I had asked the same question a week or so ago, and since found a couple solutions that work! I may be able to help. Describe your specific scenario and/or share a link, and I'll do what I can!

JPQUAT
Tourist
8 0 4

Great! Do you think it'd be possible to add a discount to the add-on items when they are purchased by adding them to a product?

sethga
Shopify Partner
3 0 0

Is the intent that the add-on product would only have a discount in that scenario? My gut says in that case, you could possibly apply an automatic Buy X, Get Y discount to handle that use.