add tick button

[sarpow]

does anyone know of a way too add a tick box like the one in the photo so that customers can add shipping protection straight from my product?

[FastBundle-Ian]

Hi @sarpow . It's Ian from Fast bundle.

Yes, you can add a checkbox like the one in your image to offer shipping protection as an add-on directly on your product page in Shopify. This can be done by customizing your Shopify theme or using an app. Here are the steps to achieve this:

---

Method 1: Customize Your Theme (Code Method)

1. Access Your Theme Code:

   • Go to Shopify Admin > Online Store > Themes.
   • Click on Actions for your current theme and select Edit Code.

2. Locate Your Product Page Template:

   • Open the product.liquid or product.json file under the Sections or Templates folder, depending on your theme structure.

3. Add the Checkbox:

   • Add the following code where you want the checkbox to appear (e.g., below the "Add to Cart" button):

     <div class="shipping-protection">
         <label>
             <input type="checkbox" id="shippingProtection" name="shippingProtection" value="5.00">
             <span>Shipping Protection $5.00 AUD</span>
         </label>
         <p>Protect your order from damage and loss.</p>
     </div>

4. Update the Add-to-Cart Logic:

   • Locate the form for your "Add to Cart" button (usually <form method="post" action="/cart/add">).
   • Ensure the checkbox input is included inside the form so that its value is submitted with the product:

     <input type="hidden" name="properties[Shipping Protection]" value="No">
     <script>
         document.getElementById('shippingProtection').addEventListener('change', function () {
             document.querySelector('[name="properties[Shipping Protection]"]').value = this.checked ? 'Yes' : 'No';
         });
     </script>

5. Save Your Changes:

   • Click Save after making these adjustments.

6. Test Your Product Page:

   • Visit your product page, check the checkbox, and add the product to your cart to ensure the "Shipping Protection" option is included in the cart.

---

Method 2: Use a Shopify App (No Coding Required)

If you're not comfortable editing the theme code, you can use a third-party app designed for adding product options or upsells:

1. Apps to Use:

   • Infinite Options: Allows you to add checkboxes, dropdowns, and more.
   • Bold Product Options: Adds customization options to your product pages.
   • Variant Option Product Options: Great for advanced product customizations.

2. Steps with an App:

   • Install the app from the Shopify App Store.
   • Create a new option group for your product.
   • Add a checkbox with the label "Shipping Protection $5.00 AUD" and set the price.
   • Assign this option group to your desired product(s).
   • Save and publish the changes.

---

Advantages of Each Method

• Custom Code:
  • More control over design and behavior.
  • No additional app fees.
• App:
  • Easier to implement, especially if you're not comfortable with code.
  • Often comes with support for advanced features.

[vpsbohra]

Hi @sarpow 

How are you?

This could be done using the custom liquid code and css and javaScript.

Have to create product with  name on this and have to set the price, using javaScript we can add this product with the main product.

You can Hire a shopify developer for this.

If need any help from my end Please let me know, Contact info is in signature.

With Regards,
Shuvam