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. Shopify Button

Shopify Button

Scheduled Pinned Locked Moved General Discussion
3 Posts 1 Posters 334 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.
  • T Offline
    T Offline
    tivnwvng
    wrote on Dec 1, 2017, 11:26 PM last edited by
    #1

    Hi I am trying to add a shopify button to my website, but everytime I add in the javascript for it the button shows at the bottom of my homepage. What am I doing wrong?

    <!-- SHOPIFY -->
    <script>
    Frontend.GlobalEvents.on('newpageshown', function(){

    function ShopifyBuyInit() {
        var client = ShopifyBuy.buildClient({
            domain: 'sixoverone.myshopify.com',
            apiKey: '6bcba7d0a1f8b95ab9e5b16f854ab92f',
            appId: '6',
            });
        
    ShopifyBuy.UI.onReady(client).then(function (ui) {
        ui.createComponent('product', {
            id: [454150389802],
            node: document.getElementById('product-component-855b57d3151'),
            moneyFormat: '%24%7B%7Bamount%7D%7D',
            options: {
                "product": {
                    "variantId": "all",
                    "width": "240px",
                    "contents": {
                        "img": false,
                        "imgWithCarousel": false,
                        "title": false,
                        "variantTitle": false,
                        "price": false,
                        "description": false,
                        "buttonWithQuantity": true,
                        "quantity": false
                    },
                
                "styles": {
                    "product": {
                        "text-align": "left",
                        "@media (min-width: 601px)": {
                            "max-width": "100%",
                            "margin-left": "0",
                            "margin-bottom": "50px"
                            }
                        },
                
                    "button": {
                        "background-color": "#f4e973",
                        "color": "#000000",
                        ":hover": {
                            "background-color": "#dcd268",
                            "color": "#000000"
                            },
                        "border-radius": "0px",
                        ":focus": {
                            "background-color": "#dcd268"
                            }
                        },
                
                    "title": {
                        "font-size": "26px"
                        },
                    
                    "price": {
                        "font-size": "18px"
                        },
                
                    "compareAt": {
                        "font-size": "15px"
                        }
                    }
                },
                
                "cart": {
                    "contents": {
                        "button": true
                        },
                
                    "styles": {
                        "button": {
                            "background-color": "#f4e973",
                            "color": "#000000",
                            ":hover": {
                                "background-color": "#dcd268",
                                "color": "#000000"
                                },
                    
                        "border-radius": "0px",
                        ":focus": {
                            "background-color": "#dcd268"
                            }
                        },
                
                        "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": "#f4e973",
                    "color": "#000000",
                    ":hover": {
                        "background-color": "#dcd268",
                        "color": "#000000"
                        },
                    "border-radius": "0px",
                        ":focus": {
                            "background-color": "#dcd268"
                            }
                        }
                    }
                },
            
                "toggle": {
                    "styles": {
                        "toggle": {
                            "background-color": "#f4e973",
                            ":hover": {
                                "background-color": "#dcd268"
                                },
                            ":focus": {
                                "background-color": "#dcd268"
                                }
                            },
                        "count": {
                            "color": "#000000",
                            ":hover": {
                                "color": "#000000"
                                }
                            },
            
                        "iconPath": {
                            "fill": "#000000"
                            }
                        }
                    },
            
                "productSet": {
                    "styles": {
                        "products": {
                            "@media (min-width: 601px)": {
                                "margin-left": "-20px"
                                }
                            }
                        }
                    }
                }
            });
        });
    }
    

    (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>

    1 Reply Last reply
    0
    • T Offline
      T Offline
      tivnwvng
      wrote on Dec 2, 2017, 2:59 AM last edited by
      #2

      And everytime I refresh the page one more add to cart button comes up. So If I clicked on 4 different pages, I would have 4 add to cart buttons stacked up on top of each other.

      1 Reply Last reply
      0
      • T Offline
        T Offline
        tivnwvng
        wrote on Dec 2, 2017, 3:24 AM last edited by
        #3

        Nevermind I figured it out.

        Holy shit ahahahaha.

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

        2/3

        Dec 2, 2017, 2:59 AM


        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
        C
        craigfeldspar
        4 minutes ago
        M
        MWPA
        25 minutes ago
        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.
        2 out of 3
        • First post
          2/3
          Last post
        0
        • Recent
        • Tags
        • Popular
        • Users
        • Search