Progress Bar & Deals Motivator

How do I install the app to my store?

Preliminary Step:

Make sure your app subscription is activated. The theme app extension (app block) will not appear in your store unless the subscription is active.
Adding the Widget via the Customizer:

Watch our video tutorial

1. 1. Go to your Shopify admin dashboard and click on ‘Online Store’.
   2. Select ‘Customize’ to open the theme editor.
   3. In the theme editor, navigate to the Shopping Cart page.
   4. Click on ‘Add block’ and search for the Progress Bar application in the drop-down list.
   5. After selecting the Progress Bar block, click the ‘Save’ button to apply the changes.

Congratulations! The theme app extension (app block) has been successfully added to your store.

Why isn’t the extension displaying on My Store?

Common Issues and Solutions:

1. 1. Verify Your Subscription:
      Ensure that your app subscription is active. The form will not appear if the subscription is not activated.
   2. Clear Browser Cache:
      Sometimes, changes may not reflect immediately. Clear your browser cache and refresh your store to see if the form appears.
   3. Check for App Conflicts:
      Ensure there are no other apps or scripts that might be conflicting with the form’s display. Temporarily disable other apps to test.

How can I create a checkpoint?

Creating a Checkpoint:

1. 1. Navigate to the Progress Bar page:
      Go to the “Progress Bar” section within your app.
   2. View the Demo:
      At the top of the page, you’ll see a demo of your progress bar. By default, there are no checkpoints.
   3. Add a New Checkpoint:
      Scroll down to the “Add New Checkpoint” section.
   4. Set the Trigger Price:
      Enter the price at which the buyer will receive a gift.
   5. Select Checkpoint Type:
      Choose the type of checkpoint you want to create:
      • Gift: The buyer receives a free product.
        Note: Clicking the “Gift” button will open a product picker. Select the desired product from the picker, and it will be set as the gift.
      • Free Shipping: The buyer will receive free shipping upon reaching the checkpoint.
   6. Manage Checkpoints:
      To edit or delete a checkpoint, locate it in your progress bar demo and click the edit icon next to the corresponding checkpoint.

Important Tips:

• • Ensure that each checkpoint has a unique price to prevent overlaps.
  • Double-check the selected gift product in the picker to ensure it’s the correct item.

How do checkpoints work?

Understanding Checkpoints:

A checkpoint is a milestone in your store that, when reached by a buyer, grants them a reward such as a gift or free shipping.
Types of Checkpoints:

1. 1. Gift:

      The buyer receives a free product. The gift is selected from your existing product catalog.

   2. Free Shipping:

      The buyer qualifies for free shipping upon reaching this checkpoint.

      Note: Only one free shipping checkpoint can be created.

How can I prevent the page from reloading when a gift is added to the cart?

Issue:
When a gift is added to the cart through our application, the page currently reloads. You might prefer to have this process happen without a page refresh for a smoother user experience.

Solution:
Due to the diversity of Shopify themes and how each handles cart functionalities, real-time cart updates without reloading aren’t universally supported. However, we’ve implemented a workaround to help theme developers achieve this.

1. 1. Enable the progressBarWidgetUpdated Event:
      Our application fires a custom ‘progressBarWidgetUpdated’ event every time it modifies the cart. This event allows you to execute custom code in response to cart changes without requiring a page reload.
   2. Disable Automatic Page Refresh:
      In your Shopify theme customizer, navigate to the section where you’ve added our app block. Here, you’ll find an option to disable the page refresh specifically after user interactions with our app’s widget. Enabling this option ensures that the ‘progressBarWidgetUpdated’ event can handle the cart updates seamlessly without reloading the page. Please note that this setting only affects interactions with our app and does not override any existing page refresh logic implemented by your theme.
   3. Implement Event Listener in Your Theme:
      Theme developers can subscribe to the ‘progressBarWidgetUpdated’ event to update the cart dynamically. Add the following JavaScript code to your theme’s script files:

            window.addEventListener("progressBarWidgetUpdated", () => {
              // Your custom code to update the cart without reloading the page
              // For example, you might re-render the cart sidebar or update cart totals
            });
      

      Note: Ensure that your custom code properly handles the cart updates to maintain synchronization between the front-end display and the actual cart contents.

Need Further Assistance?
If you encounter any challenges or need personalized support, please contact our support team. We’re here to help you optimize your store’s functionality!

How can I create a offer?

Creating a New Offer:

Watch our video tutorial

1. 1. Navigate to the Offers Page:
      Use the navigation menu to go to the “Offers” section. Click on the + icon to create a new offer.
   2. Select Products:
      Choose the two products you want to include in the offer. You can search for products by name or browse through your product list.
   3. Set the Discount:
      Enter the discount amount or percentage you want to apply to the offer. Ensure that the discount is competitive and attractive to your customers.
   4. Save the Offer:
      After configuring the offer details, click on the “Save” button to apply the offer to your store.

Tips for Creating Effective Offers:

• • Ensure that the selected products complement each other to maximize the appeal of the offer.
  • Regularly review and update your offers to keep them relevant and enticing to customers.
  • Promote your offers through your store’s marketing channels to increase visibility and sales.

How do offers work?

Understanding Offers:
Offers allow you to provide special deals to your customers by pairing products together with discounts. Here’s how they work:

1. 1. Select Products:
      Choose the primary product that the customer should purchase and the secondary product that they will receive at a discounted rate. You can set the discount amount or percentage in the offer settings.
   2. Add to Cart:
      When a customer clicks the “Add to cart” button in the extension, both the primary and secondary products are added to the cart automatically, and the page reloads to reflect the changes.

Rules for Offers:

• • Reappearing Offers: If the customer removes the “gift” product from their cart, the offer will reappear in the grid of available offers.
  • Deleting Products: If the customer deletes the “main product” from their cart, the associated “gift” product will also be removed automatically.
  • Adding Products Elsewhere:
    If the customer adds the “main product” of an offer from a different location (e.g., directly from the product page), the “gift” will not be added to the cart. The “gift” is only added when the “main product” is added via the Add to cart button in the widget.

How can I prevent the page from reloading when a offer product is added to the cart?

Issue:
When a offer product is added to the cart through our application, the page currently reloads. You might prefer to have this process happen without a page refresh for a smoother user experience.

Solution:
Due to the diversity of Shopify themes and how each handles cart functionalities, real-time cart updates without reloading aren’t universally supported. However, we’ve implemented a workaround to help theme developers achieve this.

1. 1. Enable the offersWidgetUpdated Event:
      Our application fires a custom ‘offersWidgetUpdated’ event every time it modifies the cart. This event allows you to execute custom code in response to cart changes without requiring a page reload.
   2. Disable Automatic Page Refresh:
      In your Shopify theme customizer, navigate to the section where you’ve added our app block. Here, you’ll find an option to disable the page refresh specifically after user interactions with our app’s widget. Enabling this option ensures that the ‘offersWidgetUpdated’ event can handle the cart updates seamlessly without reloading the page. Please note that this setting only affects interactions with our app and does not override any existing page refresh logic implemented by your theme.
   3. Implement Event Listener in Your Theme:
      Theme developers can subscribe to the ‘offersWidgetUpdated’ event to update the cart dynamically. Add the following JavaScript code to your theme’s script files:

            window.addEventListener("offersWidgetUpdated", () => {
              // Your custom code to update the cart without reloading the page
              // For example, you might re-render the cart sidebar or update cart totals
            });
      

      Note: Ensure that your custom code properly handles the cart updates to maintain synchronization between the front-end display and the actual cart contents.

Need Further Assistance?
If you encounter any challenges or need personalized support, please contact our support team. We’re here to help you optimize your store’s functionality!

How can I test my application in a Development Store?

Testing Your Application:
To ensure that your application works seamlessly before going live, you can test it in a Shopify development store. Here’s how to do it:

1. 1. Access Your Development Store:
      Log in to your Shopify Partner account and navigate to your Development Stores section. Select the store where you want to test the application.
   2. Select and Confirm a Plan:
      Within your development store, go to the Apps section. Find your application and select the desired plan. Click on the Confirm button to proceed.
   3. Understand Test Subscriptions:
      For development stores, all subscriptions are set to test mode. This means you can explore and use the full features of the app without incurring any charges.
   4. Verify Functionality:
      Test all aspects of the application to ensure everything functions as expected. This includes adding products, configuring settings, and checking integrations.
   5. Make Adjustments as Needed:
      If you encounter any issues or need to tweak settings, you can do so freely in the development environment without affecting your live store.

Can I change the appearance of the extension?

Customizing the Widget’s Appearance:
Yes, you can customize the appearance of the app block to match your store’s design. Here’s how to do it:

1. 1. Access the Theme Customizer:
      In your Shopify admin dashboard, navigate to ‘Online Store’ > ‘Themes’ and click on ‘Customize’ for the theme where you’ve added our app block.
   2. Locate the App Block:
      Within the theme customizer, find the section where you’ve installed our app block. This is typically labeled with the app’s name or a related identifier.
   3. Adjust Appearance Settings:
      In the app block settings, you’ll find various options to customize the widget’s appearance.
   4. Add Custom CSS (If Supported by Your Theme):
      While our app does not provide built-in custom CSS options, some Shopify themes allow you to add custom CSS within the same section where the app block is added. If your theme supports this:
      • Locate the Custom CSS field within the app block settings.
      • Add your custom CSS rules to further style the widget as desired.
      • Click ‘Save’ to apply your custom styles.

      Note: If your theme does not support adding custom CSS in this section, you can add custom styles by editing your theme’s CSS files directly or by consulting with a Shopify expert.

   5. Custom Icons:
      If you choose to upload custom icons for the widget, please note that their colors cannot be changed through the customizer settings. Make sure to upload icons in the desired colors from the start, as the appearance of custom icons is not adjustable within the app settings.

Does the application store any user data?

Data Privacy and Security:
No, our application does not store any personal user data. We are committed to maintaining the privacy and security of your information.

What We Process:
Product Information: Our app processes product details to facilitate the creation of gifts and offers.

Your Privacy Matters:
We prioritize your store’s data integrity and adhere to Shopify’s security standards to ensure that your information remains protected.

How do I uninstall the app from My Store?

Uninstalling the Application:
Removing our app from your Shopify store is a straightforward process. Follow these steps to ensure a smooth uninstallation:

1. 1. Delete Created Checkpoints:
      – Delete all checkpoints & offers you have created. This step ensures that no residual data remains after uninstallation.
   2. Remove the App from Your Store:
      – Go to your Shopify admin dashboard.
      – Click on ‘Apps’ in the sidebar.
      – Find our application in the list of installed apps.
      – Click on the app, then select ‘Delete’ or ‘Uninstall’ to remove it from your store.

Do you have any questions?

For support, please contact us by contact form or support@utdapp.tech