{"id":1697,"date":"2024-12-13T07:27:39","date_gmt":"2024-12-13T07:27:39","guid":{"rendered":"https:\/\/synctrack.io\/?post_type=knowledgebase&#038;p=1697"},"modified":"2025-01-14T03:44:10","modified_gmt":"2025-01-14T03:44:10","slug":"embed-app","status":"publish","type":"knowledgebase","link":"https:\/\/synctrack.io\/knowledge-base\/edd\/general-settings\/embed-app\/","title":{"rendered":"Display &#038; Position"},"content":{"rendered":"\n<p class=\"p1\">This guide explains how to configure the <b>Display &amp; Position<\/b> settings to customize the Estimated Time of Arrival (ETA) widget on your Shopify store.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Configure to show on store<\/h2>\n\n\n\n<h3 class=\"wp-block-heading p1\"><b>Activate App<\/b><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Purpose<\/b>: Enable or disable the ETA widget across your store.<\/li>\n\n\n\n<li><b>How to Use<\/b>:\n<ul class=\"wp-block-list\">\n<li><b>Activate App<\/b>: Switch the toggle to \u201cOn\u201d to enable the widget.<\/li>\n\n\n\n<li><b>Deactivate App<\/b>: Switch the toggle to \u201cOff\u201d to hide the widget.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading grid-area-1-1 z-[1] mt-[1em]\">Add App to Store Theme<\/h3>\n\n\n\n<p class=\"p1\">Choose how to integrate the ETA widget into your store theme. Three methods are available:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Add App Block: <\/b>Easily add the widget as a block using Shopify\u2019s theme editor. Click \u201cAdd block\u201d to insert the widget into your store\u2019s desired section.<\/li>\n\n\n\n<li><b>Embed App: <\/b>Place the widget through Shopify\u2019s theme editor without writing code. Click \u201cEmbed app\u201d to automatically position the widget in your theme.<\/li>\n\n\n\n<li><b>Manual (Custom Liquid Code): <\/b>For advanced customization or precise widget placement.\n<ul class=\"wp-block-list\">\n<li>Copy the provided HTML snippet:<br>&lt;div class=&#8221;ot-estimated-shipping&#8221;&gt;&lt;\/div&gt;<\/li>\n\n\n\n<li>Insert it into the desired section in the Shopify theme.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>Note:<\/strong> If using Page Builder, embed the app in Shopify\u2019s Theme Editor and add the custom liquid code in the Page Builder\u2019s editor.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">&nbsp;<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\">Configure for Specific Places<\/h2>\n\n\n\n<p class=\"p1\">Control where the ETA widget appears on your store.<\/p>\n\n\n\n<h3 class=\"wp-block-heading p1\"><b>Pages<\/b><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Purpose<\/b>: Specify which pages the ETA banner displays on.<\/li>\n\n\n\n<li><b>Options<\/b>:\n<ul class=\"wp-block-list\">\n<li><b>Product<\/b>: Show widget on product pages.<\/li>\n\n\n\n<li><b>Home<\/b>: Show widget on the home page.<\/li>\n\n\n\n<li><b>Collection<\/b>: Show widget on collection pages.<\/li>\n\n\n\n<li><b>All Pages<\/b>: Display the widget across all store pages.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><b>Custom Positioning: <\/b>Custom code positioning.<\/li>\n<\/ul>\n\n\n\n<p class=\"p2\"><b>Note<\/b>: Rules with conditions may not display correctly on non-product pages due to Shopify\u2019s limitations.<\/p>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading p1\"><b>Show Banner When Inventory Is Not Tracked<\/b><b><\/b><\/h3>\n\n\n\n<p>You can choose whether to display ETA banner for product\/variant not enabled \u201c<a href=\"https:\/\/help.shopify.com\/en\/manual\/products\/inventory\/getting-started-with-inventory\/set-up-inventory-tracking\" data-type=\"link\" data-id=\"https:\/\/help.shopify.com\/en\/manual\/products\/inventory\/getting-started-with-inventory\/set-up-inventory-tracking\" target=\"_blank\" rel=\"noopener\">Track quantity<\/a>\u201d in Shopify admin. This can be useful for stores that sell made-to-order items, dropshipped products, or other cases where inventory is not explicitly tracked. Simply toggling on this option to enable. <\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Date Mode of Delivery Estimates in Cart and Checkout<\/h3>\n\n\n\n<p class=\"p1\">Choose how the ETA widget displays delivery estimates in the cart and checkout process.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><\/td><td><strong>Static date<\/strong><\/td><td><strong>Dynamic date<\/strong><\/td><\/tr><tr><td>Compatibility<\/td><td>Any theme<\/td><td>Shopify themes<\/td><\/tr><tr><td>How it works<\/td><td>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.<\/td><td>This dynamically updates the delivery estimate based on the current date, ensuring accuracy if the customer revisits their cart.<\/td><\/tr><tr><td><strong>Placement<\/strong><\/td><td><\/td><td><\/td><\/tr><tr><td>Cart page<\/td><td>\u2713<\/td><td>\u2713<\/td><\/tr><tr><td>Cart drawer<\/td><td>\u2713<\/td><td>\u2713<\/td><\/tr><tr><td>Cart popup<\/td><td>\u2713<\/td><td>x<\/td><\/tr><tr><td>Checkout, Thank you, Order status page<\/td><td>\u2713<\/td><td>x<\/td><\/tr><tr><td>Email<\/td><td>\u2713<\/td><td>x<\/td><\/tr><tr><td>Orders<\/td><td>\u2713<\/td><td>x<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"p3\"><b>How to check if a theme is compatible with dynamic date?<\/b><\/p>\n\n\n\n<p>Inspect the cart page or drawer in the \u201cElements\u201d tab. Ensure it includes <code>cart-item<\/code>, <code>cart-item__details<\/code>, and <code>dl<\/code> (written exactly like this) in the correct nesting order from outer to inner elements.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"589\" src=\"https:\/\/synctrack.io\/wp-content\/uploads\/2024\/12\/image-16-1024x589.png\" alt=\"\" class=\"wp-image-1945\" srcset=\"https:\/\/synctrack.io\/wp-content\/uploads\/2024\/12\/image-16-1024x589.png 1024w, https:\/\/synctrack.io\/wp-content\/uploads\/2024\/12\/image-16-300x173.png 300w, https:\/\/synctrack.io\/wp-content\/uploads\/2024\/12\/image-16-768x442.png 768w, https:\/\/synctrack.io\/wp-content\/uploads\/2024\/12\/image-16.png 1060w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"659\" height=\"233\" src=\"https:\/\/synctrack.io\/wp-content\/uploads\/2024\/12\/image-17.png\" alt=\"\" class=\"wp-image-1946\" style=\"width:469px;height:auto\" srcset=\"https:\/\/synctrack.io\/wp-content\/uploads\/2024\/12\/image-17.png 659w, https:\/\/synctrack.io\/wp-content\/uploads\/2024\/12\/image-17-300x106.png 300w\" sizes=\"auto, (max-width: 659px) 100vw, 659px\" \/><\/figure>\n\n\n\n<p>&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Show Message Text in Email<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"589\" height=\"548\" src=\"https:\/\/synctrack.io\/wp-content\/uploads\/2024\/12\/image-18.png\" alt=\"\" class=\"wp-image-1947\" srcset=\"https:\/\/synctrack.io\/wp-content\/uploads\/2024\/12\/image-18.png 589w, https:\/\/synctrack.io\/wp-content\/uploads\/2024\/12\/image-18-300x279.png 300w\" sizes=\"auto, (max-width: 589px) 100vw, 589px\" \/><\/figure>\n<\/div>\n\n\n<p>Since Shopify doesn\u2019t allow third-party apps to modify emails directly, you can manually add the delivery estimates by following these steps.<\/p>\n\n\n\n<p>Note that these instructions usually work for Shopify&#8217;s default email template. If you use a different template, it might not work as expected. Please contact us for support.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to Store Settings &gt; Notifications &gt; Choose email template that you want to add message text<\/li>\n\n\n\n<li>Inspect the line in a product cell (press F12 or right-click &gt; Inspect) below which you want to display delivery estimates. The best practice is below the discount code. Copy the span class, here is:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>class=\"order-list__item-discount-allocation<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"569\" height=\"264\" src=\"https:\/\/synctrack.io\/wp-content\/uploads\/2024\/12\/CleanShot-2025-01-14-at-10.42.50.png\" alt=\"\" class=\"wp-image-2358\" srcset=\"https:\/\/synctrack.io\/wp-content\/uploads\/2024\/12\/CleanShot-2025-01-14-at-10.42.50.png 569w, https:\/\/synctrack.io\/wp-content\/uploads\/2024\/12\/CleanShot-2025-01-14-at-10.42.50-300x139.png 300w\" sizes=\"auto, (max-width: 569px) 100vw, 569px\" \/><\/figure>\n\n\n\n<p>3\/ Click Edit code. Ctrl F and paste the class you have copied to search its location. Then paste this code below <strong>{% endif %}<\/strong> and above <strong>&lt;\/td><\/strong>Copy<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{% for p in line.properties %}\n{% unless p.last == blank %}\n{{ p.first }}: {{ p.last }}\n{% endunless %}\n{% endfor %}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"751\" height=\"668\" src=\"https:\/\/synctrack.io\/wp-content\/uploads\/2024\/12\/CleanShot-2025-01-14-at-10.43.49.png\" alt=\"\" class=\"wp-image-2359\" srcset=\"https:\/\/synctrack.io\/wp-content\/uploads\/2024\/12\/CleanShot-2025-01-14-at-10.43.49.png 751w, https:\/\/synctrack.io\/wp-content\/uploads\/2024\/12\/CleanShot-2025-01-14-at-10.43.49-300x267.png 300w\" sizes=\"auto, (max-width: 751px) 100vw, 751px\" \/><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This guide explains how to configure the Display &amp; Position settings to customize the Estimated Time of Arrival (ETA) widget on your Shopify store. Configure to show on store Activate App &nbsp; Add App to Store Theme Choose how to [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"open","template":"","knowledgebase_cat":[267],"class_list":["post-1697","knowledgebase","type-knowledgebase","status-publish","hentry","knowledgebase_cat-general-settings"],"acf":[],"_links":{"self":[{"href":"https:\/\/synctrack.io\/wp-json\/wp\/v2\/knowledgebase\/1697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/synctrack.io\/wp-json\/wp\/v2\/knowledgebase"}],"about":[{"href":"https:\/\/synctrack.io\/wp-json\/wp\/v2\/types\/knowledgebase"}],"author":[{"embeddable":true,"href":"https:\/\/synctrack.io\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/synctrack.io\/wp-json\/wp\/v2\/comments?post=1697"}],"version-history":[{"count":11,"href":"https:\/\/synctrack.io\/wp-json\/wp\/v2\/knowledgebase\/1697\/revisions"}],"predecessor-version":[{"id":2360,"href":"https:\/\/synctrack.io\/wp-json\/wp\/v2\/knowledgebase\/1697\/revisions\/2360"}],"wp:attachment":[{"href":"https:\/\/synctrack.io\/wp-json\/wp\/v2\/media?parent=1697"}],"wp:term":[{"taxonomy":"knowledgebase_cat","embeddable":true,"href":"https:\/\/synctrack.io\/wp-json\/wp\/v2\/knowledgebase_cat?post=1697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}