Want to sell two or more optional products in one page.

Want to sell two or more optional products in one page.

Anna_Wang1
Excursionist
72 1 4

I am using the Empire theme now, and regarding the company needs, we would like to add one or more optional products on one page, like the below image. I tried some Apps, but it doesn't work for us. Could you please let me know what I should do. Thanks.

 

kit builder.PNG

Replies 4 (4)

made4Uo
Shopify Partner
3853 717 1201

Hi @Anna_Wang1,

 

Based on the image provided, this can be achieve by adding the option product as a variant and change the coding in the product section to add the image, title, price and quantity. You will need to hire a developer to do so

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
Anna_Wang1
Excursionist
72 1 4

Hi, thank you for your reply. I just want to create a really simple one.  Thank you for your help.

 

testing below
<div class="products-container">
<div class="another-product-1">
<div class="text-left">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div class="product-single__prices">
<span class="product-single__price">$795</span>
</div>
</div>
<h1 itemprop="name">Testing</h1>
<div class="swatch swatch-drop">
<div class="swatch-element first-product-swatch available">
<input id="first-size-xs" name="first-product-size" type="radio" value="xs"> <label for="first-size-xs">XS</label>
</div>

</div><button class="btn regular" id="first-addtocart" name="add" style="display: inline-block !important;" type="submit"><span id="AddToCartText">Add to Cart</span></button>
</div>
</div>
</div>

 

and for the JS part, I really confused. 


<script>
var bundle = document.getElementById("first-size-xs");
if(bundle.checked)
{
$.post('/cart/add.js', {
//quantity: 1,
id: 6931022381156
});
}
</script>

made4Uo
Shopify Partner
3853 717 1201

Hi @Anna_Wang1 

 

You need to make sure the id  corresponds to your product id that you want to add. There are more codes you needed by the way, you need the remove code when the user uncheck the box

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
Anna_Wang1
Excursionist
72 1 4

Hi, thanks for your reply. I have updated my code. The id is correct, but it can't be added to the cart. Thank you.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(document).on('click','.add_to_cart',function(){
var quantity = $(".quantity").val();
quantity = parseInt(quantity);
var id="6836213612609";
$.ajax({
type: 'POST',
url: '/cart/add.js',
dataType: 'json',
data: {id:id,quantity:quantity},
success: function(){
location.href="/cart";
}
});
})
});