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. General Discussion
  3. Adding Shopify Button to Site

Adding Shopify Button to Site

Scheduled Pinned Locked Moved General Discussion
11 Posts 4 Posters 1.8k 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.
  • F Offline
    F Offline
    fran
    wrote on last edited by arminunruh
    #1

    I am a fashion designer and will be using Lay Theme as a portfolio for my clients and buyers to see past and present work and collections. I would have been happy to be able to use the Shopify plugin but understand Lay theme does not support it. I realize there is no easy way to use the Shopify Buy button plugin because I will have many items for sale and also have no coding experience. Can someone please suggest options where I can have a link visible for people to click that will directly lead them to my shopify page? Would it be possible to add a link at the bottom of each page or project even? Any help given will be appreciated.

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

      Hey fran!

      Could you paste the code for one of your buy buttons here? Then I will try out if I can make at least buy button embed work with lay theme. If we realize lay theme is not a good choice for what you want to do you can get a refund, no problem!

      1 Reply Last reply
      0
      • A Offline
        A Offline
        alexgoldstein
        wrote on last edited by
        #3

        Just purchased Lay Theme — working beautifully so far!

        Wanting to know if this will work on a page too:
        https://www.shopify.com/buy-button

        It seems pretty straight forward but is it possible to know before I register for their service?

        Thanks!

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

          Hey Alex and fran!

          Ah thanks for the link.

          So what you need to do is go to "lay options" -> "custom css & html" -> "custom <head> content" and paste this:

          <script>
              Frontend.GlobalEvents.on('newpageshown', function(){
                  function ShopifyBuyInit() {
                      var client = ShopifyBuy.buildClient({
                        domain: 'embeds.myshopify.com',
                        apiKey: '952162710f94aa7b7644b14b2a94f4a3',
                        appId: '6',
                      });
                  
                      ShopifyBuy.UI.onReady(client).then(function (ui) {
                        ui.createComponent('product', {
                          id: [3030475907],
                          node: document.getElementById('product-component-05cfb487fb6'),
                          moneyFormat: '%24%7B%7Bamount%7D%7D',
                          options: {
                            "product": {
                              "styles": {
                                "button": {
                                  "background-color": "#292929",
                                  ":hover": {"background-color": "#464646"},
                                  ":focus": {"background-color": "#464646"}
                                },
                              }
                            }
                          }
                        });
                      });
                    }
                  
                  (function () {
                    var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
                    window.ShopifyBuy && window.ShopifyBuy.UI ? ShopifyBuyInit() : 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;
                    }
                  })(); 
              });
          </script>
          

          Then in the gridder where you want to show the shopify button click "+more" -> "+html" and insert

          <div id='product-component-05cfb487fb6'></div>
          

          Basically this is all the code of the shopify button example, you just need to insert it in different places like that. And the content of the <script></script> part needs to be wrapped inside

          Frontend.GlobalEvents.on('newpageshown', function(){  … });
          
          A 1 Reply Last reply
          0
          • F Offline
            F Offline
            fran
            wrote on last edited by
            #5

            This is amazing help thank you so much! I will try it and let you know :)

            1 Reply Last reply
            0
            • arminunruhA arminunruh

              Hey Alex and fran!

              Ah thanks for the link.

              So what you need to do is go to "lay options" -> "custom css & html" -> "custom <head> content" and paste this:

              <script>
                  Frontend.GlobalEvents.on('newpageshown', function(){
                      function ShopifyBuyInit() {
                          var client = ShopifyBuy.buildClient({
                            domain: 'embeds.myshopify.com',
                            apiKey: '952162710f94aa7b7644b14b2a94f4a3',
                            appId: '6',
                          });
                      
                          ShopifyBuy.UI.onReady(client).then(function (ui) {
                            ui.createComponent('product', {
                              id: [3030475907],
                              node: document.getElementById('product-component-05cfb487fb6'),
                              moneyFormat: '%24%7B%7Bamount%7D%7D',
                              options: {
                                "product": {
                                  "styles": {
                                    "button": {
                                      "background-color": "#292929",
                                      ":hover": {"background-color": "#464646"},
                                      ":focus": {"background-color": "#464646"}
                                    },
                                  }
                                }
                              }
                            });
                          });
                        }
                      
                      (function () {
                        var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
                        window.ShopifyBuy && window.ShopifyBuy.UI ? ShopifyBuyInit() : 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;
                        }
                      })(); 
                  });
              </script>
              

              Then in the gridder where you want to show the shopify button click "+more" -> "+html" and insert

              <div id='product-component-05cfb487fb6'></div>
              

              Basically this is all the code of the shopify button example, you just need to insert it in different places like that. And the content of the <script></script> part needs to be wrapped inside

              Frontend.GlobalEvents.on('newpageshown', function(){  … });
              
              A Offline
              A Offline
              alexgoldstein
              wrote on last edited by
              #6

              @arminunruh

              Wondering if there's some sort of work around to make radio buttons or a dropdown (like this) to have variants (like size or color) for this sort of thing...?

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

                I'm not sure alex! :/

                1 Reply Last reply
                0
                • A Offline
                  A Offline
                  alexgoldstein
                  wrote on last edited by
                  #8

                  Hi Armin,

                  I've tried to make it work, but it doesn't seem like this is going to be the best solution for me...

                  Is it still possible to get a refund?

                  Thank you.

                  Alex

                  1 Reply Last reply
                  0
                  • A Offline
                    A Offline
                    alexgoldstein
                    wrote on last edited by
                    #9

                    Any word on this? ^^^

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

                      Yea sure! I'm sending you a refund now. Good luck with your shop! Maybe one day the gridder will come to shopify as an addon, let's see.

                      1 Reply Last reply
                      0
                      • F fran

                        I am a fashion designer and will be using Lay Theme as a portfolio for my clients and buyers to see past and present work and collections. I would have been happy to be able to use the Shopify plugin but understand Lay theme does not support it. I realize there is no easy way to use the Shopify Buy button plugin because I will have many items for sale and also have no coding experience. Can someone please suggest options where I can have a link visible for people to click that will directly lead them to my shopify page? Would it be possible to add a link at the bottom of each page or project even? Any help given will be appreciated.

                        K Offline
                        K Offline
                        Kimy
                        wrote on last edited by
                        #11

                        @fran I use to doing business with ChinaDivision.com, they also use the Plugin of Shopify. it amazed me that Shopify is so convenient and practical, Shopify provides you with the ocean of excellent tools for excellence in aspects of marketing, sales, social media, transportation, inventory, accounting, customer service, reporting, tools and sales channels. When you apply these Shopify applications, your store will see impressive traffic, which means that sales may increase significantly.

                        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
                        arminunruhA
                        arminunruh
                        F
                        francesco
                        L
                        lurchifon
                        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