Docs

[Sheila]

I can’t find a short code that will allow me to embed a widget from shopify.com and have it show up correctly. In wordpress page, I simply put it under text and it works fine. Help!

The code I’m trying to embed is the following:

<div data-button_background_color=”f0712a” data-button_text_color=”ffffff” data-buy_button_text=”Buy now” data-display_size=”compact” data-embed_type=”product” data-has_image=”true” data-product_handle=”community-event-founders-voice” data-product_name=”Community Event: Founder’s Voice” data-redirect_to=”checkout” data-shop=”the-akasha-store.myshopify.com”></div>
<script type=”text/javascript”>
document.getElementById(‘ShopifyEmbedScript’) || document.write(‘<script type=”text/javascript” src=”https://widgets.shopifyapps.com/assets/widgets/embed/client.js&#8221; id=”ShopifyEmbedScript”><\/script>’);
</script>
<noscript>Buy Community Event: Founder’s Voice</noscript>

[Nabeel A]

Hi there,

You can paste the HTML code in the Text element and for the JavaScript you can paste your code in your child theme’s functions.php file like this:

add_action('wp_head','my_code');
function my_code() { 
?>
<script>
/* Paste your Code here */
</script>
<?php 
}

Just paste your code where it says /* Paste your Code here */

Let us know how this goes!

[Sheila]

This worked perfectly. Thanks!

[Rue Nel]

You are most welcome!

[Javios]

Hello,

I am having trouble with this. I have a similar piece to embed:

<div data-embed_type="product" data-shop="onomo.myshopify.com" data-product_name="HAIZE - Smart compass navigation" data-product_handle="haize-smart-compass-navigation" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Pre-Order now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="7db461" data-button_text_color="ffffff" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page"></div>
<script type="text/javascript">
document.getElementById('ShopifyEmbedScript') || document.write('<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript"><\/script>');
</script>
<noscript><a href="https://onomo.myshopify.com/cart/11142876487:1" target="_blank">Buy HAIZE - Smart compass navigation</a></noscript>

I have pasted the javasript part into the functions.php
<script type=”text/javascript”>
document.getElementById(‘ShopifyEmbedScript’) || document.write(‘<script type=”text/javascript” src=”https://widgets.shopifyapps.com/assets/widgets/embed/client.js&#8221; id=”ShopifyEmbedScript”><\/script>’);
</script>
<noscript>Buy HAIZE – Smart compass navigation</noscript>`

And when I go to edit with Cornerstone, and paste this in the text: <div data-embed_type=”product” data-shop=”onomo.myshopify.com” data-product_name=”HAIZE – Smart compass navigation” data-product_handle=”haize-smart-compass-navigation” data-has_image=”true” data-display_size=”compact” data-redirect_to=”checkout” data-buy_button_text=”Pre-Order now” data-buy_button_out_of_stock_text=”Out of Stock” data-buy_button_product_unavailable_text=”Unavailable” data-button_background_color=”7db461″ data-button_text_color=”ffffff” data-product_modal=”false” data-product_title_color=”000000″ data-next_page_button_text=”Next page”></div>

It makes the entire previsualization go blank. Could you please let me know what the problemmay be?

[Javios]

This is how my functions.php look at the moment:

<?php

// =============================================================================
// FUNCTIONS.PHP
// -----------------------------------------------------------------------------
// Overwrite or add your own custom functions to X in this file.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Enqueue Parent Stylesheet
//   02. Additional Functions
// =============================================================================

// Enqueue Parent Stylesheet
// =============================================================================

add_filter( 'x_enqueue_parent_stylesheet', '__return_true' );

// Additional Functions
// =============================================================================

add_action('wp_head','my_code');
function my_code() { 
?>
<script>

<script type="text/javascript">
document.getElementById('ShopifyEmbedScript') || document.write('<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript"><\/script>');
</script>
<noscript><a href="https://onomo.myshopify.com/cart/11142876487:1" target="_blank">Buy HAIZE - Smart compass navigation</a></noscript>

</script>
<?php 
}

[Zeshan]

Hi there,

Please provide us with the URL of page in question so we can take a closer look to the issue. Please note that since it’s an issue caused by a 3rd party script, we cannot guarantee a solution here.

Thank you!

[Javios]

This reply has been marked as private.

[Thai]

Hi Javios,

Please update your code to this:

add_action('wp_head','my_code');
function my_code() { 
?>

<script type="text/javascript">
document.getElementById('ShopifyEmbedScript') || document.write('<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript"><\/script>');
</script>
<noscript><a href="https://onomo.myshopify.com/cart/11142876487:1" target="_blank">Buy HAIZE - Smart compass navigation</a></noscript>

<?php 
}

Hope it helps 🙂

[Author]

Posts