Shopify themes, liquid, logos, and UX
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.
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
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>
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
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";
}
});
})
});
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024