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.

1. Locate Your Product Page Template:

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

2. 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>
     

3. Update the Add-to-Cart Logic:

   • Locate the form for your “Add to Cart” button (usually ).

   • 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>
     

4. Save Your Changes:

   • Click Save after making these adjustments.

5. 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.

[laddisahsi]

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

[Easify-Ariel]

Hi @sarpow

If you would like customers to be able to add shipping protection directly on the product page, you can easily do this using our Easify Custom Product Options.

To help you visualize it, I’ve created a similar demo:

• This is the result:

• This is the app setup:

I’ve created a similar setup using a Checkbox option for services such as Shipping Protection directly on the product page. Customers can simply tick the box before adding the product to their cart, making the process much more convenient.

To set it up, you just need to create a Checkbox option, upload an image or icon for the Shipping Protection service, customize the label however you’d like, and enter the additional fee in the Price field.

You can also add a short description such as “Protect your bouquet against loss, damage, or delivery issues during transit.” to help customers understand the benefit.

The image, text, and pricing can all be customized to match your store’s branding, and the extra fee will automatically be added when the customer selects the option.

It’s a very straightforward setup and doesn’t require any coding. Hope this helps