Shopify Theme Configuration

Before Droppable can function properly on your store, you need to add a specific app block to your product page template. This block will automatically replace the standard "Add to Cart" section with a button that requires user verification via Droppable.

Follow the steps below to complete the integration:

Step 1: Edit Your Theme Code

1. From your Shopify admin dashboard, go to Online Store > Themes.
2. Find your current theme and click the Edit theme button.

Step 2: Navigate to the Product Page

1. At the top of the theme editor, you will see a dropdown menu displaying the current page you are viewing (e.g., "Home page").

2. Click this dropdown, change the page type to Products, and select the Default product (or the specific product template you wish to edit).

   

Step 3: Insert the App Block

1. In the theme editor, look for the section containing the "Add to Cart" button (usually named similar to "Product information").
2. Click on this section to bring up its settings in the left sidebar.
3. Look for a button labeled Add block.
   • Note: Depending on your theme, this may be located at the bottom of the section settings or inside a specific block container.
4. A list of available blocks will appear. Find the block named [Conditional Cart Buttons] under the Droppable section.

5. Click on it to insert the block into your product page layout.

   

Step 4: Save and Verify

1. Once the block is inserted, ensure it is placed in a logical position (usually near the price or variant selector).
2. Click the Save button at the top right of the theme editor.

Once installed, the standard "Add to Cart" buttons will be dynamically replaced during a drop, requiring your customers to complete verification with Droppable before proceeding to checkout.

Note: If the product you are using for preview is not currently in an active drop, the buttons will not be replaced in the theme editor. The replacement will only appear live on the storefront when a drop is running.

Disclaimer: Please note that some custom Shopify themes may require additional adjustments. If you have inserted the block but the default "Add to Cart" button is not being replaced once a drop begins, and instead the Droppable button appears below or next to the existing button, please open a support ticket for further assistance.