Sayduck Shopify App integration

Connecting Sayduck Platform with your Shopify Store

Install the Application
a. Click the Add App button on the listing page
b. On the next page, click ‘Install App’

Connecting the App to Sayduck Platform

a. Log in to your Sayduck Platform account
b. Open Organization page and copy your Organization ID
c. Paste ID to your Sayduck Configurator app

Embed 3D viewer to your theme

a. Download scripts
b. Open the Shopify theme page, click on the ‘Actions’ dropdown menu and select ‘Edit Code’
c. Open Assets, click Add a new asset and upload sayduck_scripts folder

d. Create a new template from your original product.liquid and call it product.sayduck.liquid

e. Paste these lines at the top of the file to assign the product_uuid and part_collection_handle from the Shopify container product automatically created during the Sayduck Configurator install:

{% assign sayduck_product_uuid = product.metafields.sayduck.product_uuid %}
{% assign part_collection_handle = product.metafields.sayduck.part_collection_handle %}

f. Paste this where the viewer should be in theme.

Easiest way is to replace the product image(s) html with the 3D viewer div, and style it as needed:

{% comment %} ------ Sayduck code ------ {% endcomment %}
<div style="position:relative;min-height:450px;min-width:300px;width:100%;height:100%;display:flex;">
<div id="sayduck-3d-viewer-container" style="flex:1;"/>
<div id="sayduck-3d-configurator-picker-container" style="position:absolute;bottom:0;padding-left:8px;rgba(0,0,0,0.2);" />
{% comment %} ------ End Sayduck code ------ {% endcomment %}

g. Connect to the Add to cart button

Add data-sayduck-configurator=“add-to-cart” to your “Add to Cart” button

<button id=“AddToCart” class=“button dark large” data-sayduck-configurator=“add-to-cart”>Add to Cart</button>

h. Connect to the product quantity dropdown

Add data-sayduck-configurator=“quantity-dropdown” to the quantity dropdown element

<select id=“Quantity” name=“quantity” class=“quantity-selector” data-sayduck-configurator=“quantity-dropdown”> ... </select>


You can add an error container which will display error messages (for example: “Product XXX is currently out of stock”):
<div class=“cart-error”></div>

You can add data-sayduck-configurator=“price” to your price container, along with data-sayduck-configurator-money-filter=“{{- 150 | money -}}” {%- if condition_to_apply_discount -%}data-sayduck-configurator-discount-fraction=“{{- discount_fraction -}}“{%- endif -%} to get dynamic pricing when changing selection.

For example:
<span id=“ProductPrice” class=“price” itemprop=“price” data-sayduck-configurator=“price” data-sayduck-configurator-money-filter=“{{- 150 | money -}}” {%- if settings[‘apply_discount’] -%}data-sayduck-configurator-discount-fraction=“{{- discount_fraction -}}“{%- endif -%} >...</span>

Create your configurator product
a) Open Sayduck App and select a configurator from the dropdown
b) Add Container product name and create product
c) Click Add products to match button and select all products used in the configurator

Match products / variants its counterpart(s) in the configurator
a) Click dropdown and select configuration to connect it with product
b) Products connected to an active configuration will be added to the cart.
c) Part > Group(s) ... > Variant

Viewer settings (optional)
a) Click Viewer settings
b) Choose settings you wish to use
c) Settings added here will override Brand viewer settings
Was this article helpful?
Thank you!