Display & position

**Activate app**

To enable our app for your store, simply turn this option on. Remember, you also need to activate the app in the 'App Embeds' section within the Theme Editor (refer to Enable the app).



ETA banner placement

Choose where you would like the Estimated Time of Arrival (ETA) banner to be displayed in your store. Once activated, the banner may automatically appear in selected areas.

Product page: This is the most effective location for the ETA banner. All appearance display formats and layout graphics are fully supported here, and both general and specific rules function accurately.

Home, Collection, Page, Cart: These areas are outside the main product page and may have some limitations. The display formats and layout graphics might not work as effectively. Additionally, depending on your theme, ETA information may not show correctly on these pages. In this case, please contact our support team for possible assistance.

Specific rules may not be displayed precisely outside of the Product page due to potential issues in retrieving the correct productid_. If you have specific rules for multiple products, collections, or vendors, it is recommended to place the ETA banner on the Product page only for the highest effectiveness and accuracy.

For Products with variants, the estimated delivery text cannot be displayed on the Home, Collection pages, or any other area lacking an 'Add to Cart' button. This limitation occurs because customers need to select a variant before the estimate can be shown. Therefore, if your store features many products with variants, it is advisable to display the ETA banner on the Product page only to ensure the highest level of effectiveness and accuracy.




Positioning

To adjust where your ETA banner appears on your store, follow these guides based on your Shopify theme version.




Shopify Theme 2.0

There are 2 ways

Enable 'Synctrack: Estimated Delivery Date' in App embeds



Add block: You can use the provided quick deep link to add an app block on the Product page. Or you can manually navigate to your Theme Editor and add the 'Synctrack Estimated Delivery Date' block where you want the banner to show.


Shopify Theme 1.0

Copy and paste the code we have provided into the position you prefer for the banner. You can also use this code snippet to embed the app in Page Builder ( PageFly, GemPages, etc.)

Copy

<div class="ot-estimated-shipping"></div>

If the ETA widget seems to not show on your store or you find it hard to set up, please Contact us for support.

Custom positioning

You can customize the position of the ETA banner on your store by using codes. If you need help with coding, contact our support

[](https://estimated.synctrack.io/general-settings/display-and-position#date-mode-of-delivery-estimates-in-cart-and-checkout)

Date mode of delivery estimates in Cart and Checkout

Users can choose 1 in 2 date mode for rules enabling Show in cart

Category	Static date	Dynamic date
Compatibility	Any theme	Shopify themes
How it works	This displays a static delivery date when the product is added to the cart and remains unchanged, even if the customer revisits the cart later.	This dynamically updates the delivery estimate based on the current date, ensuring accuracy if the customer revisits their cart.
Placement
Cart page	✓	✓
Cart drawer	✓	✓
Cart popup	✓	x
Checkout, Thank you, Order status page	✓	x
Email	✓	x
Orders - Shopify Admin	✓	x

Shopify themes compatible with dynamic date

Themes by Shopify	Cart page	Cart drawer	Cart popup
Colorblock	✓	✓	Not compatible
Craft	✓	✓	-
Crave	✓	✓	-
Dawn	✓	✓	-
Origin	✓	✓	-
Publisher	✓	✓	-
Refresh	✓	✓	-
Ride	✓	✓	-
Sense	✓	✓	-
Spotlight	✓	Not compatible	-
Studio	✓	✓	-
Taste	✓	✓	-
Trade	✓	✓	-

How to check if a theme is compatible with dynamic date?

Inspect the cart page or drawer in the “Elements” tab. Ensure it includes cart-item, cart-item__details, and dl (written exactly like this) in the correct nesting order from outer to inner elements.






Show message text in Email



Since Shopify doesn’t allow third-party apps to modify emails directly, you can manually add the delivery estimates by following these steps.

Note that these instructions usually work for Shopify's default email template. If you use a different template, it might not work as expected. Please contact us for support.

Go to Store Settings > Notifications > Choose email template that you want to add message text

Inspect the line in a product cell (press F12 or right-click > Inspect) below which you want to display delivery estimates. The best practice is below the discount code. Copy the span class, here is:

Copy

class="order-list__item-discount-allocation"

3/ Click Edit code. Ctrl F and paste the class you have copied to search its location. Then paste this code below {% endif %} and above </td>

Copy

{% for p in line.properties %}
{% unless p.last == blank %}
{{ p.first }}: {{ p.last }}
{% endunless %}
{% endfor %}

FAQ: Why banner is not displaying

If your banner isn’t appearing on the store, even when you think the rules are set correctly, there might be some overlooked conditions.

If none of the rules are showing, it’s usually easier to diagnose the problem. However, if only some rules aren’t displaying, troubleshooting can be more complex. In that case, feel free to contact our support team for assistance.

App is not embedded or App block is not added

If the app isn’t displaying correctly, it could be due to a missing integration with your theme.

Possible issues

The app is not embedded within the current theme.

The app block hasn’t been added to the theme.

Resolution:

Review the Setup Checklist: Go to the Home section of the app to verify whether it’s embedded in your current theme.



Manually check: Open the Theme Editor to ensure the app block has been added to the appropriate page sections.

See more: Embed app - App block

App is embedded but still not displaying on store

For most cases, you can inspect the issue using the browser’s Developer Tools:

On MacOS, press: ⌥⌘I

On Windows, press: Ctrl+Shift+C

Once there, navigate to the Console tab to identify any errors or warnings.



Here’s how you can check and resolve common issues:

2.1 No rule is set for the product

Console message: No rule matched condition

This indicates that the banner is not displaying because no applicable rule has been found for the product.



Possible issues:

The product is not included in any rule.

The product is specifically excluded from a rule.

The product belongs to a collection that is excluded from a rule. Note that a product can be part of multiple collections, so check all relevant collections.

The detected location is not covered by any rule.

Resolution: Review Display condition in Rule setup to ensure the product, collection, and location align with the intended rules. Adjust the rules as needed to include the product or collection.

2.2 Product is out of stock

Console message: Out of stock! Current variant's inventory quantity: [inventory]

This indicates that the product variant does not have available stock.



Resolution: To ensure that the banner appears even when the product is out of stock, try enabling the Show message when out of stock option in the rule setup. This will allow the banner to display regardless of inventory status.

2.3 App is not set to display on page

Console message: isShowOnCurrrentPage false

This suggests that the app is not configured to display the banner on the current page.



Resolution: Review ETA banner placement settings to ensure the banner is enabled for the page where you expect it to appear.

2.4 App is not enabled

Console message: enableAppSetting false

This means that the app is currently disabled, preventing any banners from being displayed.



Resolution: Try to Activate app. Once activated, the banners should begin displaying as per the configured rules.

2.5 There is no workday

Console message: isValidWorkingDays false

This indicates that no working days have been configured.



Resolution: Set working day and cutoff time for preparation and delivery.

Updated on: 02/12/2024