Sayduck 3D & AR Configurator Integration to 2.0 Themes

Sayduck 3D viewer allows you to easily embed products from your Sayduck Platform to your Shopify Theme.
Creating a product

Creating a product

Start by selecting one of your configurable products from the dropdown menu.



Now choose a name for your Shopify product and click Create product. This will create a product to your Shopify store and connect our 3D viewer to it.



Sayduck 3D viewer app block

Sayduck 3D viewer App block is the container for our 3D viewer. When a user clicks the Load 3D Viewer button on a Sayduck Product Shopify store page, it will then load the correct 3D model for that product.



How to add Sayduck 3D viewer app block

Open your Theme editor with the by clicking Customize.



Navigate to the Product page in which you wish to embed your 3D viewer.



Click Add block and select Sayduck viewer



And you are done! The 3D viewer has been embedded. Now the 3D viewer will work on all products created by the app. To see how it look, you simply need to preview the Product page.



In the Theme editor the app block will not load any products when you click Load 3D Viewer because there no product to load. It will simply display a loading animation.

App block settings

Users can freely customize the height and width of the 3D viewer from the settings on the right.



How to remove Add block?

To remove the Add block, simply open your Theme editor and select the Sayduck Viewer and click Remove Block



Sayduck Shopify App Integration to Legacy Themes

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

Example Debut templates:
https://s3.amazonaws.com/static.sayduck.com/shopify-demo/product.sayduck.liquid
https://s3.amazonaws.com/static.sayduck.com/shopify-demo/product-template-sayduck.liquid

a. Download scripts:
https://s3.amazonaws.com/static.sayduck.com/shopify/sayduck_configurator_checkout.min.js
https://s3.amazonaws.com/static.sayduck.com/shopify/sayduck_configurator_cartjs.min.js
https://s3.amazonaws.com/static.sayduck.com/shopify/sayduck_configurator_loader.min.js

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%}
{% assign configuratorData = product.metafields.sayduck.configuratorData %}


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

Optional:

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?
Cancel
Thank you!