Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. Bug Reports
  3. Add HTML | Shopify Buy Button

Add HTML | Shopify Buy Button

Scheduled Pinned Locked Moved Bug Reports
shopifybuttonhtmlhtml on pagesembed
8 Posts 4 Posters 3.2k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S Offline
    S Offline
    stdhd
    wrote on last edited by
    #1

    Hi there,

    I would like to add html for the Shopify Buy Botton (https://www.shopify.com/buy-button

    Here is the code, but I can't use it with laytheme (other templates work). Any idea?

    Thank you!

    <div data-embed_type="product" data-shop="embeds.myshopify.com" data-product_name="YELLOW WATCHES" data-product_handle="yello-w" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="30373b" data-button_text_color="ffffff" data-background_color="f1f1e9" 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://embeds.myshopify.com/cart/8829753283:1" target="_blank">Buy YELLOW WATCHES</a></noscript>

    1 Reply Last reply
    0
    • arminunruhA Offline
      arminunruhA Offline
      arminunruh
      Global Moderator
      wrote on last edited by
      #2

      Hello, I see there is some javascript in that buy button. This javascript is not executed in lay theme because lay theme is a single page javascript application but this button only works on "normal" websites.

      If it is enough for you to just have a text link you could only use this portion of the code. Thats what I would recommend:

      <a href="https://embeds.myshopify.com/cart/8829753283:1" target="_blank">Buy YELLOW WATCHES</a>

      If you need the same appearance as here https://www.shopify.com/buy-button meaning you want to execute the javascript, it is doable but needs some more work and might be a bit difficult to handle if you have many buy buttons.

      Basically this: https://help.shopify.com/manual/sell-online/buy-button/add-embed-code#script-tags

      But the separate javascript would need to be added a bit differently. If you want me to explain this let me know.

      1 Reply Last reply
      0
      • E Offline
        E Offline
        eanna
        wrote on last edited by
        #3

        Hi there - I'm having the exact same problem. Can you show me how you achieved your html edit?

        This is the code gives me when I create a buy button:
        "<div id='product-component-b6909048211'></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: 'the-velvet-cell.myshopify.com',
        apiKey: '195dc061d6ef9847159e73e335970fd6',
        appId: '6',
        });

        ShopifyBuy.UI.onReady(client).then(function (ui) {
          ui.createComponent('product', {
            id: [6095685505],
            node: document.getElementById('product-component-b6909048211'),
            moneyFormat: '%C2%A3%7B%7Bamount%7D%7D',
            options: {
        

        "product": {
        "variantId": "all",
        "width": "240px",
        "viewData": {
        },
        "templates": {
        "description": "<div class="{{data.classes.product.description}}" data-element="product.description">{{{data.sanitizeDescription}}}</div>"
        },
        "contents": {
        "img": false,
        "imgWithCarousel": false,
        "title": false,
        "variantTitle": false,
        "price": false,
        "description": false,
        "buttonWithQuantity": false,
        "quantity": false
        },
        "styles": {
        "product": {
        "text-align": "left",
        "@media (min-width: 601px)": {
        "max-width": "100%",
        "margin-left": "0",
        "margin-bottom": "50px"
        }
        },
        "button": {
        "background-color": "#3582ac",
        "font-size": "13px",
        "padding-top": "14.5px",
        "padding-bottom": "14.5px",
        "padding-left": "10px",
        "padding-right": "10px",
        ":hover": {
        "background-color": "#30759b"
        },
        "border-radius": "5px",
        ":focus": {
        "background-color": "#30759b"
        }
        },
        "quantityInput": {
        "font-size": "13px",
        "padding-top": "14.5px",
        "padding-bottom": "14.5px"
        },
        "compareAt": {
        "font-size": "12px"
        }
        }
        },
        "cart": {
        "contents": {
        "button": true
        },
        "text": {
        "title": "Your Cart",
        "total": "Total",
        "button": "GO TO CHECKOUT"
        },
        "styles": {
        "button": {
        "background-color": "#3582ac",
        "font-size": "13px",
        "padding-top": "14.5px",
        "padding-bottom": "14.5px",
        ":hover": {
        "background-color": "#30759b"
        },
        "border-radius": "5px",
        ":focus": {
        "background-color": "#30759b"
        }
        },
        "footer": {
        "background-color": "#ffffff"
        }
        }
        },
        "modalProduct": {
        "contents": {
        "img": false,
        "imgWithCarousel": true,
        "variantTitle": false,
        "buttonWithQuantity": false,
        "quantity": false
        },
        "styles": {
        "product": {
        "@media (min-width: 601px)": {
        "max-width": "100%",
        "margin-left": "20px",
        "margin-bottom": "50px"
        }
        },
        "button": {
        "background-color": "#3582ac",
        "font-size": "13px",
        "padding-top": "14.5px",
        "padding-bottom": "14.5px",
        "padding-left": "10px",
        "padding-right": "10px",
        ":hover": {
        "background-color": "#30759b"
        },
        "border-radius": "5px",
        ":focus": {
        "background-color": "#30759b"
        }
        },
        "price": {
        "font-size": "14px"
        },
        "quantityInput": {
        "font-size": "13px",
        "padding-top": "14.5px",
        "padding-bottom": "14.5px"
        }
        }
        },
        "toggle": {
        "styles": {
        "toggle": {
        "background-color": "#3582ac",
        ":hover": {
        "background-color": "#30759b"
        },
        ":focus": {
        "background-color": "#30759b"
        }
        },
        "count": {
        "font-size": "13px"
        }
        }
        },
        "productSet": {
        "styles": {
        "products": {
        "@media (min-width: 601px)": {
        "margin-left": "-20px"
        }
        }
        }
        }
        }
        });
        });
        }
        })();
        /]]>/
        </script>"

        I cant find any "<a href="https://embed..."

        Thanks so much - I love your theme but its useless if I cant embed this!

        1 Reply Last reply
        0
        • mariusjopenM Offline
          mariusjopenM Offline
          mariusjopen
          Global Moderator
          wrote on last edited by
          #4

          Hi!

          Armin meant that you should only use that piece of code:
          <a href="https://embeds.myshopify.com/cart/8829753283:1" target="_blank">Buy YELLOW WATCHES</a>

          And not a real embedd button.
          This is more of a workaround than adding a read shopify button.

          if that solution does not work for you – you can always get a refund.

          All the best :-)

          Marius

          www.mariusjopen.world

          1 Reply Last reply
          0
          • E Offline
            E Offline
            eanna
            wrote on last edited by
            #5

            Hi Marius - thank you for getting back to me so quickly.

            I am happy to use a workaround - but Armin got the workaround from the code provided in the first post...but now it seems shopify uses different code...so how can I do my workaround?

            Is this something a developer could fix for me? I just need to be able to show a button/link on project pages so that buyers can purchase.

            This theme is so amazing - I hope we can make it work.

            Best
            Eanna

            1 Reply Last reply
            0
            • mariusjopenM Offline
              mariusjopenM Offline
              mariusjopen
              Global Moderator
              wrote on last edited by
              #6

              Hi Eanna!

              Can you post a link to the shopify product that I can have a look?

              Best!

              Marius

              www.mariusjopen.world

              1 Reply Last reply
              0
              • E Offline
                E Offline
                eanna
                wrote on last edited by
                #7

                Here is an example of the product - and the code is above in my first comment:
                https://www.thevelvetcell.com/products/american-motel-signs

                1 Reply Last reply
                0
                • mariusjopenM Offline
                  mariusjopenM Offline
                  mariusjopen
                  Global Moderator
                  wrote on last edited by
                  #8

                  Dear Eanna,

                  this might be one option:

                  <a href="https://www.thevelvetcell.com/cart/18836551041:1" target="_blank">Buy YELLOW WATCHES</a>
                  

                  This is the product ID: 18836551041

                  and :1 is the quantity

                  I hope that works for you!

                  Best!

                  Marius

                  www.mariusjopen.world

                  1 Reply Last reply
                  0
                  Reply
                  • Reply as topic
                  Log in to reply
                  • Oldest to Newest
                  • Newest to Oldest
                  • Most Votes


                  I also code custom websites or custom Lay features.
                  💿 Email me here: 💿
                  info@laytheme.com

                  Before you post:
                  1. When using a WordPress Cache plugin, disable it or clear your cache.
                  2. Update Lay Theme and all Lay Theme Addons
                  3. Disable all Plugins
                  4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                  This often solves issues you might run into

                  When you post:
                  1. Post a link to where the problem is
                  2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                  3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                  Online Users
                  Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                  laytheme.com
                  • Login

                  • Don't have an account? Register

                  • Login or register to search.
                  • First post
                    Last post
                  0
                  • Recent
                  • Tags
                  • Popular
                  • Users
                  • Search