Using a custom Hypervisual product embed code

Embedding a product inside your Hypervisual pages is easy, but sometimes you need a bit more power and flexibility.

Instead of using the built-in product selector, you can also add a Custom HTML block to your page, and have much more control over how the product is displayed.

Just paste this code in, then tweak each setting as you need:

<div data-hypervisual-embed="product" 
     data-button-action="cart" 
     data-product-handle="your-product-handle"
     data-variant-id=30313387977 
     data-shop-url="https://www.yourshop.com" 
     data-show-selector=true
     data-image-src=""
     data-show-price=true
     data-show-compare-at-price=true
     data-show-product-title=true
     data-show-variant-title=true></div>

Here's what each of those settings means:

data-button-action
This can be "cart" (to add to cart, default), "ajax-cart" (to add products to the cart without refreshing the page), "product" (to link to the product) or "none" (to hide the button).

data-button-text
You can add this to override the button text you've chosen in Hypervisual Settings for individual embeds. You will normally not need to use this.

data-product-handle
This has to be your product handle, found in the URL of your product. For example /products/mens-sweatshirt would have the product handle mens-sweatshirt.

data-variant-id (optional)
If you want to add a specific variant to the cart, provide the Shopify variant ID here. To find the variant ID, edit the product in your Shopify admin then click the Edit button under the Variants list. The variant ID will be the last number in the URL in the browser address bar:

data-shop-url
This must be the full URL of your store's homepage. Make sure it's the exact URL of your store, including the https://. Watch out for whether your store uses www in the URL or not! 

data-show-selector
true to show a dropdown with your variant list (default), false to hide it. This only shows when data-button-action is "cart".

data-image-src  (optional)
If you provide an image URL in this setting, the embed will use that image in preference to the standard product image. If you leave it blank, there will be no image. To use a specific product image, edit the product in your Shopify admin then click the Preview button on the image you'd like to use. When the image pops up, ctrl-click it and choose Copy image address.

data-show-price (optional)
true to show the product price and 'compare at' price (default), false to hide both.

data-show-compare-at-price  (optional)
true to show the 'compare at' price, false to hide it. This can only be shown if data-show-priceis true or omitted.

data-show-product-title (optional)
true to show the product title inside the embed (default), false to hide it.

data-show-variant-title (optional)
true to show the variant title inside the embed (default), false to hide it.

data-button-color  (optional)
The CSS color of your button text, e.g. #333333

data-button-bg-color  (optional)
The CSS color of your button's background, e.g. #AA3333;

Showing a button only

You can show only an add to cart button, with no image, price, variant selector or product title using this set of settings:

<div data-hypervisual-embed="product" 
     data-button-action="cart" 
     data-product-handle="your-product-handle"
     data-variant-id=30313387977 
     data-shop-url="https://www.yourshop.com" 
     data-show-selector=false
     data-image-src=""
     data-show-price=false
     data-show-compare-at-price=false
     data-show-product-title=false
     data-show-variant-title=false></div>