Theme customizations using ShipScout data
The definitive guide to updating shipping related copy and UI throughout your shop
Last updated
The definitive guide to updating shipping related copy and UI throughout your shop
Last updated
As you design your test, it's critical that you update the places in your shop that mention your shipping rate. Here's a list of places that merchants typically show shipping rate information:
Top announcement banner
Upsell modal
Product detail page
Cart and cart drawer
Shipping policy page
FAQ
Depending on the implementation of the copy or UI element, your approach to update it may differ. We offer two different ways to update your theme. Our goal is make it as easy as possible for you to make sure your customers see the right shipping information.
Please give us feedback at support@shipscout.app on how we can improve our developer SDK.
If your copy and/or variables are primarily set in your theme, this is the best method for updating it.
Step 1 - update the places that refer to the shipping threshold value
In liquid, you can access the shipping rate threshold value from the cart object in liquid. This value will be updated to reflect the correct thresholdValue for the given user.
Here's a example code snippet that checks for the shipscout threshold value and has a default value in case that is not set. This pattern is great to ensure that uninstalling ShipScout doesn't impact the shop.
Step 2 - Dynamically re-render sections using this variable after the variant data changes
When a customer visits your store for the first time, ShipScout will assign a variant to the customer after the page loads via javascript. This happens after the liquid page gets rendered. Since on this first page load, the liquid page was rendered based on no variant, the threshold value won't necessarily match the variant threshold value.
To dynamically render sections, add this code to the <head /> of your shop:
If the area you're trying to update cannot be updated via liquid because it is rendered via javascript or by a different app, you can use our Javascript API to drive it.
Include the following JavaScript wherever you'd like (we recommend somewhere before the closing </head> tag). It will execute as soon as ShipScout has loaded and will inform you on which test the current user is in.
Here's a description of the properties and values to expect in the response object.
Property | Value Type | Example | Description |
testId | integer | null | 1 | The test number. |
variant | string | null | A | The variant this user is in. |
thresholdCents | integer | 5000 | Only present if threshold is true. The amount, in cents, required to get the threshold rate. |
thresholdMetRateAmountCents | integer | null | 0 | Only present if threshold is true. The shipping price, in cents, if threshold amount is met |
shippingPriceCents | integer | 1000 | The price, in cents, of shipping. |
threshold | boolean | true | If there's a free shipping threshold for this user. |
testType | string | null | threshold | The value can either be "threshold", "flat-rate" or "new-vs-returning". |
isNewAssignment | boolean | true | True if this is the shipscout response data changed within this page load. Useful for optimizing expensive effects. |
If there's no test live but you do have a Default Shipping Rate set in ShipScout the rate settings will still be returned by the JS SDK. The following 3 properties will be null however: testId, testType, and variant.
You can append ?shipscout_preview=yes to any URL on your website to test your SDK integration without a live test. Appending this URL will simulate these hard-coded values for the SDK:
If you need to overwrite these hard-coded preview values to simulate a different setup or variant you can do that like this: