Q: 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: 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. 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. Adjust Appearance Settings: In the app block settings, you’ll find various options to customize the widget’s appearance. 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. 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.

Question 1

How do I install the app to my store?

Accepted Answer

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 Go to your Shopify admin dashboard and click on &#8216;Online Store&#8217; . Select &#8216;Customize&#8217; to open the theme editor. In the theme editor, navigate to the Shopping Cart page. Click on &#8216;Add block&#8217; and search for the Progress Bar application in the drop-down list. After selecting the Progress Bar block, click the &#8216;Save&#8217; button to apply the changes. Congratulations! The theme app extension (app block) has been successfully added to your store.

Question 2

Why isn't the extension displaying on My Store?

Accepted Answer

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

Question 3

How can I create a checkpoint?

Accepted Answer

Creating a Checkpoint: Navigate to the Progress Bar page: Go to the &#8220;Progress Bar&#8221; section within your app. View the Demo: At the top of the page, you&#8217;ll see a demo of your progress bar. By default, there are no checkpoints. Add a New Checkpoint: Scroll down to the &#8220;Add New Checkpoint&#8221; section. Set the Trigger Price: Enter the price at which the buyer will receive a gift. Select Checkpoint Type: Choose the type of checkpoint you want to create: Gift: The buyer receives a free product. Note: Clicking the &#8220;Gift&#8221; 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. 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&#8217;s the correct item.

Question 4

How do checkpoints work?

Accepted Answer

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: Gift: The buyer receives a free product. The gift is selected from your existing product catalog. Free Shipping: The buyer qualifies for free shipping upon reaching this checkpoint. Note: Only one free shipping checkpoint can be created.

Question 5

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

Accepted Answer

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&#8217;t universally supported. However, we&#8217;ve implemented a workaround to help theme developers achieve this. Enable the progressBarWidgetUpdated Event: Our application fires a custom &#8216;progressBarWidgetUpdated&#8217; 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. Disable Automatic Page Refresh: In your Shopify theme customizer, navigate to the section where you&#8217;ve added our app block. Here, you&#8217;ll find an option to disable the page refresh specifically after user interactions with our app&#8217;s widget. Enabling this option ensures that the &#8216;progressBarWidgetUpdated&#8217; 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. Implement Event Listener in Your Theme: Theme developers can subscribe to the &#8216;progressBarWidgetUpdated&#8217; event to update the cart dynamically. Add the following JavaScript code to your theme&#8217;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&#8217;re here to help you optimize your store&#8217;s functionality!

Question 6

How can I create a offer?

Accepted Answer

You can also add offers with our application. You need to select the product that the user should buy and the product that the user will receive at a discount. The discount is also set in the offer settings. In the widget, when you click on the `Add to cart` button, both products are added to the cart and the page is reloaded. Rules for the operation of offers If the cart contains both products from an offer or one of the products is out of stock, then the offer will not be displayed in the grid of other offers. If you remove the «gift», then the offer will reappear in the grid of other offers. If you delete the «main product», then the «gift» will be deleted along with it. If you increase the amount of «gift» in the cart by more than 1, then the page will reload and return the amount of «gift» to 1. If you add the «main product» of the offer from another place (for example the product page), then the «gift» will not be added. «gift» will be added to the cart only if you add it through the «Add to cart» button in the widget.

Question 7

How do offers work?

Accepted Answer

Understanding Offers: Offers allow you to provide special deals to your customers by pairing products together with discounts. Here&#8217;s how they work: 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. Add to Cart: When a customer clicks the &#8220;Add to cart&#8221; 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 &#8220;gift&#8221; product from their cart, the offer will reappear in the grid of available offers. Deleting Products: If the customer deletes the &#8220;main product&#8221; from their cart, the associated &#8220;gift&#8221; product will also be removed automatically. Adding Products Elsewhere: If the customer adds the &#8220;main product&#8221; of an offer from a different location (e.g., directly from the product page), the &#8220;gift&#8221; will not be added to the cart. The &#8220;gift&#8221; is only added when the &#8220;main product&#8221; is added via the Add to cart button in the widget.

Question 8

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

Accepted Answer

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&#8217;t universally supported. However, we&#8217;ve implemented a workaround to help theme developers achieve this. Enable the offersWidgetUpdated Event: Our application fires a custom &#8216;offersWidgetUpdated&#8217; 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. Disable Automatic Page Refresh: In your Shopify theme customizer, navigate to the section where you&#8217;ve added our app block. Here, you&#8217;ll find an option to disable the page refresh specifically after user interactions with our app&#8217;s widget. Enabling this option ensures that the &#8216;offersWidgetUpdated&#8217; 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. Implement Event Listener in Your Theme: Theme developers can subscribe to the &#8216;offersWidgetUpdated&#8217; event to update the cart dynamically. Add the following JavaScript code to your theme&#8217;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&#8217;re here to help you optimize your store&#8217;s functionality!

Question 9

How can I test my application in a Development Store?

Accepted Answer

Testing Your Application: To ensure that your application works seamlessly before going live, you can test it in a Shopify development store. Here&#8217;s how to do it: 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. 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. 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. Verify Functionality: Test all aspects of the application to ensure everything functions as expected. This includes adding products, configuring settings, and checking integrations. 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.

Question 10

Can I change the appearance of the extension?

Accepted Answer

Customizing the Widget&#8217;s Appearance: Yes, you can customize the appearance of the app block to match your store&#8217;s design. Here&#8217;s how to do it: Access the Theme Customizer: In your Shopify admin dashboard, navigate to &#8216;Online Store&#8217; > &#8216;Themes&#8217; and click on &#8216;Customize&#8217; for the theme where you&#8217;ve added our app block. Locate the App Block: Within the theme customizer, find the section where you&#8217;ve installed our app block. This is typically labeled with the app&#8217;s name or a related identifier. Adjust Appearance Settings: In the app block settings, you&#8217;ll find various options to customize the widget&#8217;s appearance. 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 &#8216;Save&#8217; 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&#8217;s CSS files directly or by consulting with a Shopify expert. 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.

Question 11

Does the application store any user data?

Accepted Answer

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&#8217;s data integrity and adhere to Shopify&#8217;s security standards to ensure that your information remains protected.

Question 12

How do I uninstall the app from My Store?

Accepted Answer

Uninstalling the Application: Removing our app from your Shopify store is a straightforward process. Follow these steps to ensure a smooth uninstallation: Delete Created Checkpoints: &#8211; Delete all checkpoints & offers you have created. This step ensures that no residual data remains after uninstallation. Remove the App from Your Store: &#8211; Go to your Shopify admin dashboard. &#8211; Click on &#8216;Apps&#8217; in the sidebar. &#8211; Find our application in the list of installed apps. &#8211; Click on the app, then select &#8216;Delete&#8217; or &#8216;Uninstall&#8217; to remove it from your store.

Question 13

Do you have any questions?

Accepted Answer

We&#8217;re Here to Help! If you have any questions, need assistance, or want to share feedback about our application, please don&#8217;t hesitate to reach out to us. Contact Us: support@utdapp.tech We&#8217;re committed to providing you with the best possible support to ensure your store&#8217;s success. Feel free to reach out anytime!

Progress Bar & Deals Motivator

Summary

Demo

Installation guide

Uninstallation guide

FAQ

Our Products

BoxKing

Popup King

SaleX

DiscountX

BoxKing

Popup King