Implementing the Shipped widget to your Shopify store is straight forward and simple. Use the following instructions to complete implementation.
If you have a conflicting app that needs to be uninstalled, contact us at support@invisiblecommerce.com to uninstall the conflicting app and install the Shipped widget.
For 2.0 Themes - Add app block
From the left menu navigation. Go to Online Store > Themes.
In the “Current Theme” section, click into “Customize”.
In the preview, go to the cart page.
From the left menu, expand “Subtotal” section and click “Add block”.
Select “Shipped” and ensure the toggle is defaulted to “on” from the right menu.
Move the block above “Checkout button”.
Save.
For use with Shipped Green or other advanced customization options, see How to customize Shipped widget.
If you would like our expert team to install the assets, contact us at support@invisiblecommerce.com.
For Vintage themes
Create Test Theme
From the left menu navigation. Go to Online Store > Themes.
In the “Live Theme” section, locate the “Actions” dropdown and select “Duplicate”.
Rename duplicated theme to “Test Shipped”.
Install Shipped on Test Theme
For Free Shopify Themes that does not have customized cart pages
Go back to the “Test Shipped” theme, locate the “Actions” dropdown and select “Edit Code”.
Based on your store theme, use the following guide to select the code file and locate insertion point code of the Shipped Shield widget.
Minimal
File: cart-template.liquid
Insertion point code: <p class="cart__policies"><em>{{ taxes_shipping_checkout }}</em></p>
Debut
File: cart-template.liquid
Insertion point code: <div class="cart__shipping rte">{{ taxes_shipping_checkout }}</div>
Express
File: cart-drawer.liquid
Insertion point code: <p class="cart-drawer__notice">{{ taxes_shipping_checkout }}</p>
Brooklyn
File: cart-template.liquid
Insertion point code: <p class="rte"><em>{{ taxes_shipping_checkout }}</em></p>
Narrative
File: cart-drawer.liquid
Insertion point code: <p class="cart-drawer__disclaimer rte">{{ taxes_shipping_checkout }}</p>
Venture
File: cart-template.liquid
Insertion point code: <p class="cart__taxes rte">{{ taxes_shipping_checkout }}</p>
Simple
File: cart-template.liquid
Insertion point code: <p class="cart__policies txt--emphasis rte">{{ taxes_shipping_checkout }}</p>
Supply
File: cart-template.liquid
Insertion point code: <p class="cart__policies"><em>{{ taxes_shipping_checkout }}</em></p>Add a line below the code and insert
<div class="shipped-widget"></div>Click "Save" at the top right corner.
Open "Preview" in an incognito window and test the checkout to see if the Shipped Shield is installed properly.
Add an item to cart and view cart. Double check that the Shipped product is the cart and widget is sitting above the "Check out" button.
With Shipped Shield in the cart, continue to payment and make sure Shipped Shield appears in the list of product.
Go back to cart, and remove Shipped Shield by clicking "Remove" in the widget. Continue to payment and make sure Shipped Shield does not appear.
If all seems to be working properly, you can move on to implementing on the live store.
For Other Shopify Themes
On the “Test Shipped” theme, locate the “Actions” dropdown and select “Preview”.
In the preview, add an item to cart to test checkout.
In the cart, test the placement of Shipped Shield. Right-click on the “checkout” button and select “Inspect” to show the code for the checkout line, which will be highlighted.
Right click on the highlighted code and select “Edit as HTML”.
Add a line above the code and insert
<div class="shipped-widget"></div>.Click into the blank space on the left side of the code and check placement of Shipped Shield.
If the Shipped widget sits right above the checkout button, it’s in the correct location. Then go to step “12”.
If it’s in the wrong location, continue to the next step to fix placement.Locate the Shipped code in the inspect window, right click and select “Delete Element”.
Right click on the line right above the checkout button and select “Edit as HTML”.
Add a line above the code and insert
<div class="shipped-widget"></div>.Click into the blank space on the left side of the code and check placement of the asset.
Take note of where the code was installed by taking a screenshot or copy the code and paste onto a notepad.
If you have multiple checkout carts, please go through the above steps for each checkout cart to note the proper placement for Shipped widget.Go back to the “Test Shipped” theme, locate the “Actions” dropdown and select “Edit Code”.
In the “Sections” folder, choose the theme file for your checkout option. See the various types of checkout options below and how the files will likely show as.
Main Cart Page: This is a standard checkout option on the main cart page when customers check out.
Common files that contain this code are: cart.liquid, cart-template.liquid
Free themes with this cart style: Minimal, Debut, Brooklyn, Venture, and SimpleHeader Cart: This checkout option appears at the top of the page under the cart icon on websites.
Common files that contain this code are: header.liquidModal Cart: This checkout option appears in the middle of the screen when a customer adds an item to their cart.
Common files that contain this code are: modal-cart.liquid, ajax-cart-template.liquid
Free themes with this cart style: SupplyDrawer Cart: This checkout option appears on the side of the screen when customers add an item to their cart or clicks on the cart icon.
Common files that contain this code are: drawer-cart.liquid, ajax-cart-template.liquid
Free themes with this cart style: Express, Narrative, and Boundless
In the theme file, refer back to the screenshot or note, use “CTRL and F” to search for the keywords and find the lines where the Shipped code was installed correctly.
Once you found the line of code, add a line above and insert the Shipped code.
Click “Save” at the top right corner.
Open “Preview” in an incognito window and test the checkout to see if the Shipped asset is in the proper location.
Add an item to cart and checkout. With the Shipped Shield in the cart, go to payment and ensure the Shipped Shield appears.
Go back to the checkout. Remove Shipped Shield and proceed to payment to ensure that Shipped Shield does not appear in cart.
If the asset is in the right location and working properly, repeat steps 15-20 for any additional checkout options.
Install Shipped Assets on Live Theme
Follow the same steps as above for the live theme.
On the live theme, go to the “Actions” dropdown and select “Edit code”.
Select the same theme file(s) as you did in the test theme and install the Shipped assets.
Test and check placement of the installation.
Shipped is now live in your store.
For use with Shipped Green or other advanced customization options, see How to customize Shipped widget.
If you would like our expert team to install the assets, contact us at support@invisiblecommerce.com.