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 #
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.