OVERVIEW
Does Manual Placement Work For Me?
In some cases, our Fast-Tag auto placement will not work as expected due to the website theme being used. At this time, we do not have a list of themes that do or do not work, so it’s always best to test auto placement first by using the Fast-Tag preview plugin:
- Save the following code snippet as a bookmark in Google Chrome:
javascript:(function(cartMin=50)%7Bwindow.Shopify.shop%C2%A0%3D "fasttagspreview.myshopify.com"%3Bif(!window.location.href.includes("deliverrPreview")) %7Bhistory.pushState(%7B%7D%2C "Deliverr Preview"%2C%C2%A0window.location.href %2B (%2F%5C%3F%2F.test(window.location.href)%3F "%26" %3A "%3F") %2B "deliverrPreview%3Dtrue%26deliverrCartMinimum="%2BcartMin)%3B%7Dconst s %3D document.createElement('script')%3Bs.type %3D 'text%2Fjavascript'%3Bs.src %3D 'https%3A%2F%2Fs3.amazonaws.com%2Fdeliverr-shopify-admin-prod%2Fshopify-storefront%2Fmain.js'%3Bdocument.body.appendChild(s)%7D)()
- After this code is saved as a bookmark (only works in Google Chrome), navigate to your Shopify store's product display page and/or collections page, THEN run the plugin (or open the bookmark) to preview auto-placement fast-tags. To open a bookmark in Google Chrome, click the three vertical dots in the upper right corner of the browser.
When Auto-Placement Works:
When Auto-Placement does not work:
If the auto placement is misplacing or warping images, it’s best for you (or a developer) to manually place the below code in your Shopify liquid theme. Flexport can assist with placing this code in most instances, but will require theme access to your Shopify account.
Note: For more complicated website themes, you will need to review/utilize our fast-tag dev kit resources found here, and have access to a developer (outside of Flexport) that has experience with Shopify website development. Please note, you must first request access to our dev kit resources by completing this form.
Code Snippets & Respective Locations:
Below you will find <deliverr></deliverr> code to be used in their respective locations. Each location of your website will have its own liquid file in Shopify that controls that page.
Product Details:
product-info.liquid, product.liquid, index.liquid, or main-product-blocks.liquid
<deliverr data-component="BadgeWithCountdown"></deliverr>
Home & Collections:
collections.liquid, collections-template.liquid, card-image.liquid
<deliverr data-component="Badge" data-productId="{{product.id}}"></deliverr>
Home & Collections with Countdown: (If you have a featured product)
featured-products.liquid
<deliverr data-component="BadgeWithCountdown" data-productId="{{product.id}}"></deliverr>
PREREQUISITES
Flexport recommends that the merchant has their own developer, is able to obtain paid assistance from a Shopify developer, or has experience (or is comfortable with) the following:
- How to read/understand basic HTML.
- How to read/understand Shopify’s Liquid code.
- Understand where to locate liquid files associated with your product display page and/or home & collections pages.
- Understand the risks associated with erroneously updating your theme code, and that Flexport may not be able to assist with placement in certain situations. Flexport may recommend that you reach out to and/or hire a qualified developer who specializes in Shopify website themes. This is especially true if you have a custom developed theme.
Product Display Page: Placing the Fast-Tag Code Manually:
- In Shopify, navigate to Online Store → Theme
- On the right, click the drop down arrow next to “Actions” and select “Edit Code”. A screen similar to the one below will appear:
- In the directory or in the search bar, locate the file named product-info.liquid, product.liquid, index.liquid, or main-product-blocks.liquid The correct filename may vary depending on the theme. However, these are the four most common.
- You will see HTML code embedded in Shopify’s Liquid code. Do not place the code within any liquid code. Much of the theme’s liquid file will contain HTML, but you will see staggered liquid code in between, which looks like this:
- Locate the span class “price price--compare” (or similar). You may need to inspect the website using Google Chrome’s developer tool to determine exactly where the code should be placed within that code block/file. In the below example, this seller wants the code placed underneath the product’s price, so we’re placing the code underneath the code that manages the price tag:
- You may need to add a <div> tag before the fast-tag code, and a closing </div> tag after for the fast-tag to format properly. In some cases, not doing this will cause the tag to be hidden by an image, cut off, or misplaced entirely.
- To preview, click the “Preview” button in the upper right corner. To save, click “Save” below it.
- You may need to remove/replace the code multiple times, save, then preview until the code generates a fast-tag in the desired place.
Home & Collections: Placing the Fast-Tag Code Manually:
- Follow the same steps as above, except this time, locate the collections.liquid, collections-template.liquid, or card-image.liquid file instead. This page may also be located in featured-products.liquid depending on the theme.
- The code is generally placed under the price, so be sure to locate the HTML code that controls the visual price tag for that product. That code will usually look something like this:
<span class="price price--large">
- Place the fast-tag code underneath the HTML code associated with the product’s price:
- If you want the fast-tag to appear directly underneath your product image, ensure that you are placing the code within the file that controls your collections images. That file may be titled card-image.liquid or something similar.
- Preview, then Save
- Note: Fast Tag placement is often a "trial & error" process. The fast-tag should always show in the Shopify preview if it worked properly, if Fast-Tags are activated in the Seller Portal, and if inventory exists in Flexport for that product. If the fast-tag does not show in the Shopify preview, carefully remove the code you added and try again elsewhere or locate the correct file. If you need further assistance, please contact our support team and we would be happy to arrange access to your account so that our team can review.
Important Notes:
- The Flexport Fast-Tag app must already be installed for the code to function properly. This code will pull data from the Flexport Fast-Tag app and apply the fast-tag where applicable. Please be sure to navigate through the Shopify Fast-Tag workflow in the Seller Portal prior to placement.
- If you were previously using auto-placement, you must switch to manual in the Seller Portal by clicking on Shopify Fast-Tags → Edit → Continue through the workflow and select "I don't want Flexport to place the badge for me" when prompted. Note that you must do this for both the product display page, and home & collections. This change may take 3-6 hours to take affect.