Shopify Button Drops down

Support
#1

I am trying to add an HTML code from Shopify into a text element.

After its entered, the Shopify button then drops into the section below the text element, not where I was entering it. After saving and refreshing it, it created several Shopify buttons?!

I am new to this and would be very thankful for any help.

Thanks in advance.

#2

Hi Eliot,

Thanks for reaching out.

May I know the code you’re trying to add? And please provide the URL that has this issue. Even if the code doesn’t work, it shouldn’t duplicate itself. I’m curious how it was implemented.

Thanks!

#3
#4

sure…
www.studio2121.com/promotions

the code is:

<div id='product-component-450f85dea17'></div>
    <script type="text/javascript">
    /*<![CDATA[*/

    (function () {
      var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
      if (window.ShopifyBuy) {
        if (window.ShopifyBuy.UI) {
          ShopifyBuyInit();
        } else {
          loadScript();
        }
      } else {
        loadScript();
      }

      function loadScript() {
        var script = document.createElement('script');
        script.async = true;
        script.src = scriptURL;
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
        script.onload = ShopifyBuyInit;
      }

      function ShopifyBuyInit() {
        var client = ShopifyBuy.buildClient({
          domain: 'studio-2121.myshopify.com',
          storefrontAccessToken: '83af7a29009a2379491757eca1ced94e',
        });

        ShopifyBuy.UI.onReady(client).then(function (ui) {
          ui.createComponent('product', {
            id: [1682704302123],
            node: document.getElementById('product-component-450f85dea17'),
            moneyFormat: '%24%7B%7Bamount%7D%7D',
            options: {
  "product": {
    "buttonDestination": "checkout",
    "variantId": "all",
    "width": "240px",
    "contents": {
      "img": false,
      "imgWithCarousel": false,
      "title": false,
      "variantTitle": false,
      "price": false,
      "description": false,
      "buttonWithQuantity": false,
      "quantity": false
    },
    "text": {
      "button": "Feburary 1st at 10am"
    },
    "styles": {
      "product": {
        "text-align": "left",
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0",
          "margin-bottom": "50px"
        }
      },
      "button": {
        "background-color": "#949992",
        ":hover": {
          "background-color": "#858a83"
        },
        "border-radius": "0px",
        ":focus": {
          "background-color": "#858a83"
        }
      },
      "compareAt": {
        "font-size": "12px"
      }
    }
  },
  "cart": {
    "contents": {
      "button": true
    },
    "styles": {
      "button": {
        "background-color": "#949992",
        ":hover": {
          "background-color": "#858a83"
        },
        "border-radius": "0px",
        ":focus": {
          "background-color": "#858a83"
        }
      },
      "footer": {
        "background-color": "#ffffff"
      }
    }
  },
  "modalProduct": {
    "contents": {
      "img": false,
      "imgWithCarousel": true,
      "variantTitle": false,
      "buttonWithQuantity": true,
      "button": false,
      "quantity": false
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      },
      "button": {
        "background-color": "#949992",
        ":hover": {
          "background-color": "#858a83"
        },
        "border-radius": "0px",
        ":focus": {
          "background-color": "#858a83"
        }
      }
    }
  },
  "toggle": {
    "styles": {
      "toggle": {
        "background-color": "#949992",
        ":hover": {
          "background-color": "#858a83"
        },
        ":focus": {
          "background-color": "#858a83"
        }
      }
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  }
}
          });
        });
      }
    })();
    /*]]>*/
    </script>
#5

#6
[quote=“young18206, post:6, topic:51852, full:true”]

[/quote]
#7

Hi There,

I’ve added your embed code to the text element and the button is showing up:

When I clicked on the button, the express checkout showed up:

Could you please try adding to the text element again? Don’t forget switching to the HTML tab:

Regards!

#8

#9

I clicked the text box and input the html code, but it is throwing it under the box and not in the text box.

#10

#11

After I save it and refresh the page, it duplicates the buttons.

#12

Hello Eliot,

Thanks for updating in! The button in the promotion’s live page stays within the text element container. The duplication may only happen in the Cornerstone preview. Would you mind providing us some access to your page so that we can take a closer look? You can add the WP credentials in a secure note. To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Cheers.

1 Like
#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.