Installing Option Price Calculator (JSON) #

#

1. Open the App and Navigate to the Install Tab
   • Launch the Option Price Calculator app.
   • Go to the Install tab.
     
     
2. Select the Theme for Installation
   • Choose the theme you want to install the app into:
     • The theme marked active is the currently published live theme.
     • Other listed themes are draft themes.
   • For liquid-based themes or page builders that don’t support app blocks natively, use the provided Manual method.
     
     
     
     
3. Install the App into Your Active Theme
   • It’s recommended to install the app into your active theme.
     
     
4. Ensure You Have a Product in Your Store
   • Verify that your Shopify store has at least one product. Most stores already meet this requirement.
     
     
5. Activate the App Embed
   • Click the Activate App Embed button. This will open a new tab displaying your theme’s app embed settings.
   • After activating, return to the app’s install page and refresh the page status to confirm that the app embed has been successfully installed.
     
     
6. Add the App Block to Your Product Page
   • Click the Add Product Page App Block button to open the theme editor.
   • The app will automatically add the product page app block for you. Alternatively:
     • Manually add the app block:
       • Click Add Section in the theme editor.
       • Switch to Apps tab.
       • Select the Option Calculator app block.
   • Only the first Option Price Calculator app block will be rendered on the product page.
     
     
7. Position and Configure the App Block
   • Move the calculator app block to your preferred location on the product page.
   • Hide any unnecessary product page elements, such as:
     • Variant Picker
     • Quantity Selector
     • Price
     • Buy buttons
   • If using product page metadata, replace placeholder text with your custom metadata from Shopify.
     
     
8. Save Your Changes
   • After making your adjustments, click Save to finalize your product page configuration.
     
     
9. Refresh the Install Page
   • Return to the app’s install page and refresh the status to verify the installation.
     
     
10. Begin Using the App

• The Option Price Calculator app is now fully installed and ready to use. You can create calculators and associate them with specific products as needed.

---

Installing Option Price Calculator in Liquid-Based Themes and Page Builders #

Step 1: Open the App and Select Your Theme

1. Open the Option Price Calculator app and navigate to the Install tab.
2. Select your Liquid-Based Theme from the options provided. You’ll also see an option for manual installation, but both options follow the same steps.

---

Step 2: Activate the App Embed

1. Click the Activate App Embed button.
2. This will open the App Embed Settings for your theme.
3. Ensure the Option Price Calculator app embed is activated, then click Save.
4. Close the tab and return to the install page.
5. Click Refresh to confirm the app embed has been successfully activated.

---

Step 3: Add the Product Page Code

There are two methods to add the product page code:

Method 1: Add Code to a Product Description

1. Copy the provided code from the install page.
2. Open your Shopify admin and select a product.
3. In the product description editor, click the Show HTML button.
4. Paste the code into the HTML editor. This ensures the code is recognized as HTML and not plain text.
5. Save the product.
6. Refresh the product page to confirm the calculator is displayed.
   • Note: This method applies the calculator only to the specific product you edited. To use the calculator on multiple products, you’ll need to repeat this step for each product.

---

Method 2: Add Code to a Product Template

1. Open your Shopify Online Store and click Themes.
2. Select the theme you’re working on and click Edit Code.
3. Locate the product template file, usually named something like product-template.liquid.
4. Decide where you want the calculator to appear (e.g., below the product price).
   • Look for code related to the product price in the template file.
5. Paste the code in the desired location.
6. Save the changes and refresh your product page to verify the calculator is visible.
   • Pro Tip: If you want to move the calculator to a different location (e.g., above the price), simply cut and paste the code to the new position, then save and refresh the page.

---

Step 4: Add the Calculator to a Page Builder (Optional)

If your page builder doesn’t support adding the product page app block directly, follow these steps:

1. Copy the same code provided on the install page.
2. In the page builder, add a Custom Liquid Block or HTML Block.
3. Paste the code into the block.
4. Save your changes and refresh the page to confirm the calculator is displayed.
   • Note: Using a page builder allows you to adjust the order of the calculator block within your layout.

---

Conclusion

You’ve successfully installed the Option Price Calculator in your store. Whether using a liquid-based theme, product template, or page builder, the calculator should now display on your product pages.