Product Options 3rd-Party Integrations

Modified on Fri, 1 Sep, 2023 at 3:32 AM

Overview

Product Options 2.0 integrates with Order Printer, Slide Cart, and PageFly to allow the display of your options.

Select an option below to view more information about each integration.


Slide Cart

Slide Cart (on Shopify) allows you to utilize features to help with customer experience and improving conversion rates on your store. This app works by replacing the default cart page on your store with an on-page enhanced version.

Setup

  1. From the Shopify admin, select Slide Cart.
  2. From within the Slide Cart app, select Settings.
  3. Select the following settings:
    Compatibility mode
    Show custom properties in cart
    Custom property format set to Key: Value

Slide_Cart_Settings.png




Display Product Options in Shopify Order Printer

Order Printer is an app that allows you to print custom packing slips, invoices, labels, and receipts. If you are using the Shopify Order Printer app to print your invoices, you can use this template to display the selected options in the invoice.


Setup

  1. From the Shopify admin, select Apps.
  2. Select Order Printer.
  3. Select Manage templates.
  4. Select Add Template.
  5. Enter a Name for the template.
  6. In the Codefield, copy and paste this Order Printer Template:
  7. Select Save.

Display Product Options Widget on PageFly Product Template

By default, Bold Product Options will not display on a PageFly product page. In order to display options on a PageFly product page, you will need to enter the appropriate Liquid code.


Setup

  1. From the Shopify admin, select Apps > PageFly Builder > Product Pages.
  2. Edit a Product Page and make sure the Default Product Details is set to Hide.
    Hide_Product_Details.png
  3. Add Product Details to the page by dragging and dropping.
    Add_Product_Details.png
  4. Drag and drop an HTML5/LIQUID element and insert it between or above the qty and add to cart button.
  5. Once the HTML5/LIQUID element is chosen, select Open Code Editor.
  6. In the Code Editormodal, insert the following line of code:
    <div class="bold_options" data-product-id="{{ product.id }}"></div>
  7. Select Save & Close.
  8. Select Publish.

To test that this worked, reload your product page and ensure that the Product Options are showing.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article