'X Away From Free Shipping' App User Guide

The X Away From Free Shipping app encourages shoppers to add more items to their cart (thus increasing your site's Average Order Value, or AOV) by showing a customizable 'You're only $X away from free shipping' message on the Cart page. Once the customer's order total is sufficient to qualify them for free shipping, the message automatically updates to confirm that shipping will be free.

1. Install the 'X Away From Free Shipping' app
2. Add the 'X Away From Free Shipping' section/block to your Cart page
3. Configure settings

1. Install the 'X Away From Free Shipping' App

2. Add the 'X Away From Free Shipping' Section/Block to Your Cart Page

3. Configure Settings

• Display style - Use the dropdown to choose whether you want the 'X Away From Free Shipping' box to show: a) a progress bar with text, or b) Text only (i.e. no progress bar graphic).
  
  
• Amount to qualify for free shipping - Enter the minimum order amount to qualify for free shipping (as already set up in your Shopify store's shipping/checkout settings). Do not enter a currency symbol (such as a $ sign) in the field; only enter a number (the app will automatically detect what currency your store uses based on you Shopify settings). Please note that this field does not affect your store's shipping/checkout settings directly (you need to set them up separately); this setting only enables this app to work.
  
  
• Progress bar style - Use the radio buttons to choose whether you want the completed (left) portion of the progress bar to be a) a solid color, or b) an animated stripe pattern that "moves" from left to right (i.e. the progress bar is animated).
  
  
• Progress bar icon - Use the dropdown to choose which icon you want to use for the progress bar indicator.
  
  
• Show progress bar after customer qualifies for free shipping - Tick this checkbox if you want the progress bar to be shown above the 'You qualify for free shipping' message if the customer qualifies for free shipping. (Note: The progress bar will obviously appear as 100% complete in this case.)
  
  
• Show icon after customer qualifies for free shipping - Tick this checkbox if you want the icon (selected above) to be shown in front of the 'You qualify for free shipping' message. (Note: If you ticked the above checkbox, you probably don't want to tick this box as well.)
  
  
• Progress bar width - Use the slider to select what percentage of the container's width the progress bar should use. (Note: The progress bar -- as well as the message below it -- are always centered within the section/block.)
  
  
• Text to display before %amount% - Enter the text you want to appear in front of the auto-calculated amount remaining in order to qualify for free shipping. Basic HTML formatting is allowed (bold, italics, underline, and hyperlink).
  
  
• %amount% color - Use the color selector tool to choose the text color for the auto-calculated amount remaining in order to qualify for free shipping. Note: This text is always bold.
  
  
• Text to display after %amount% - Enter the text you want to appear after the auto-calculated amount remaining in order to qualify for free shipping. Here again, basic HTML formatting is allowed (bold, italics, underline, and hyperlink).
  
  
• Success message - Enter the text you want to appear in place of the 'X away from free shipping' message when the customer's order total is enough to qualify them for free shipping.
  
  
• Box background color - Use the color selector tool to choose the background color of the box containing the progress bar (if applicable) and message. If you don't want the progress bar / message to appear inside of a box, simply delete the color hex code from the field (which will make the background color transparent).
  
  
• Icon color - Use the color selector tool to choose the icon's color.
  
  
• Progress bar completed color - Use the color selector tool to choose the color of the completed portion of the progress bar (i.e. to the left of the icon). For example, if the customer's order total is $24.99 and your store requires a $35 minimum purchase to qualify for free shipping, the completed portion of the progress bar would be 71% (which is $24.99 / $35.00) of the progress bar.
  
  
• Progress bar incompleted color - Use the color selector tool to choose the incomplete portion of the progress bar (i.e. the remaining 29% of the progress bar to the right of the icon, using the same numbers from the example above).

Still have questions? We're here to help. Simply submit a help ticket.