Adding Shopify Button to Site

[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.

[arminunruh]

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!

[alexgoldstein]

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!

[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(){  … });

[fran]

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

[alexgoldstein]

@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...?

[arminunruh]

I'm not sure alex! :/

[alexgoldstein]

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

[alexgoldstein]

Any word on this? ^^^

[arminunruh]

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.

[Kimy]

@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.