Add tick button

Store Design
1

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?

Screenshot 2025-01-11 124349.png
Screenshot 2025-01-11 124349.png550Ă—136 6.54 KB

Screenshot 2025-01-11 124524.png

2

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

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

5

To achieve this setup without modifying your theme code, you can use a product option builder like Misk Smart Product Options.

The best approach here is to use the Checkbox feature within the app dashboard to neatly display your terms or custom choices. While a radio button can work, a checkbox is usually much more intuitive for this specific customer action.

image
image1905Ă—771 104 KB

The app seamlessly syncs with your store’s native currency settings automatically, though you also have the flexibility to manually lock in a preferred currency if your strategy requires it.

image
image1903Ă—763 94.7 KB

7

Hello, @sarpow
I trust all is well on your end!
Yes, this is possible. Many merchants use apps like Navidium Shipping Protection, Order Protection by Appiers or other cart upsell/product apps to add a checkbox for shipping protection directly on the product page. Some themes can also support this with custom code if you prefer not to use an app.

8

Hi there :raising_hands:

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 :heart:

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

  • This is the result:

image
image1717Ă—1113 146 KB

  • This is the app setup:

image
image2048Ă—1039 187 KB

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.

image
image2048Ă—1039 208 KB

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 :blush: