Once the app installation process is complete, you should be automatically redirected to its General settings screen:
Octolize Product Page Shipping settings
General
[PRO] Auto-populate the customers’ ‘Ship to’ address based on geolocation – tick this checkbox to let the customers’ shipping addresses be automatically filled in using the browser’s geolocation (if allowed by user). Learn how the auto-populating of the customers’ shipping address based on geolocation works →
Calculator
Display Shipping Rates calculator always expanded – tick this checkbox to hide the Shipping Rates calculator’s opening link on the product page and make it always expanded by default without the need to click the link first.
Calculator’s shipping address fields to be displayed – choose which shipping address fields should be displayed for the customers to fill in the shipping rates calculator form on the product page by ticking / unticking the relevant checkboxes.
Please mind that hiding the specific fields by unticking their checkboxes when they are required, especially when the geolocation has been disabled either in the app settings or in the customer’s browser, may result in preventing the shipping cost calculation from being performed.
Usage examples:
1. All shipping address fields ticked to be displayed in the Shipping Rates calculator form on the product page:
2. Shipping address fields displayed in the Shipping Rates calculator form limited only to ‘Country’, ‘Postal / ZIP code’ and ‘Region’ (e.g. ‘State’, ‘Province’, etc.) if it is required by Shopify for a specific country:
3. Shipping address fields displayed in the Shipping Rates calculator form limited only to ‘Postal / ZIP code’ and ‘Region’ if it is required by Shopify for a specific country. (Scenario applicable if you ship exclusively to one country and displaying the other fields is not necessary.)
Products to calculate the shipping rates for – select the products which shipping rates calculation should be based on by choosing one of the available options from the drop-down list:
- Only currently viewed products – the shipping cost will be calculated only for the product your customer is currently viewing.
Please mind that at the moment there is only one aforementioned option available to choose here, however, the app functionalities will be soon extended with the additional features.
Adding the Shipping Rates calculator block to the product page
In order to display the Shipping Rates calculator to your customers on the product pages in your store, you need to add the dedicated calculator block to the product page template first. If you haven’t done it yet, the following notice will be displayed at the very top of the app configuration screen:
Follow the instructions it contains, hit the Go to Shopify store theme customizer button and you should be redirected directly to the editor of the theme your store is currently using.
You can also reach it by choosing Sales channels → Online Store → Themes from the Shopify main menu in the left sidebar and then using the Customize button displayed next to the theme marked as Current theme.
While on the theme editor’s screen, click the drop-down list at the top and choose Products → Default product page template:
Once the Default product page template is loaded, click the + Add block option in the TEMPLATE tree in the sidebar and choose the Shipping Rates calculator from the blocks’ APPS section or use the search box if it is not displayed there by default:
The Shipping Rates calculator block will be added to the product page template and the Calculate and learn the shipping cost link opening the shipping cost calculator once clicked will appear according to the block’s placement:
You can freely modify the Shipping Rates calculator block’s placement according to your preferences. To do that, simply drag & drop it to reorder the blocks in the TEMPLATE tree:
What’s more, you can also customize the text of the link opening the Shipping Rates calculator on the product page. To do that, simply click on the Shipping Rates calculator block and modify the default Calculator-opening link text field content with your own custom text:
Once you are done here and the Shipping Rates calculator has been placed where you want it to be displayed, confirm the changes with the Save button in the top-right corner of the screen.
From now on, the Calculate and see the shipping cost link:
opening the shipping cost calculator once clicked and allowing to check the shipping cost:
will be displayed to your customers on every product page in your store, even before reaching the checkout.
If you enabled the Auto-populate the customers’ ‘Ship to’ address based on geolocation in the app settings (PRO plan required), the customers’ shipping experience will be smoothed out even further. Their current location will be automatically used as their shipping address and they will be provided with the accurate shipping cost upfront, with no need to enter all the shipping details manually:
Of course, they will still be able to modify and manually enter the shipping address using the Change option, if needed.