Shopify Buy Buttons

Forum|Forum|4 years ago
October 18, 2021
2 replies
695 views

I have a page with product images - 4 items on each row. I have tried to insert the Shopify code for the Buy Button under each product but I can't get the buttons to line up properly. They stack on top of each other vertically.

Would anyone know how to add the correct styles to my style sheet to have the buttons line up under each item? Here is the webpage:

https://sharonepsteintextiles.com/ketubahs_buy_button.html

I've asked some of the Shopify "Experts" but none seems to have exerience with Dreamweaver.

This topic has been closed for replies.

Nancy OShea

Community Expert

According to Shopify, <script> must go in the <head> tag of your document and the button <div> goes below your image in the <body> tag. As an example, this responsive layout is made with Bootstrap 4.5.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4.5 Starter Page </title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--latest Bootstrap on CDN-->
<link rel="stylesheet" href="
https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">


<style>
/**a few custom styles**/
body {
	min-height: 100vh;
	padding-top: 15vh;
	background: #555555}
 
.flex-grow { flex: 1; }
</style>

<!--SHOPIFY SCRIPT FOR PRODUCT ID 1634564439619-->
<script>
(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: 'ketubahs.myshopify.com',
      storefrontAccessToken: '7541953dd0b349057c1a5559ff4f22f9',
    });
    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: '7329540997352',
        node: document.getElementById('product-component-1634564439619'),
        moneyFormat: '%24%7B%7Bamount%7D%7D',
        options: {
  "product": {
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "calc(25% - 20px)",
          "margin-left": "20px",
          "margin-bottom": "50px"
        }
      },
      "button": {
        "font-size": "13px",
        "padding-top": "14.5px",
        "padding-bottom": "14.5px",
        ":hover": {
          "background-color": "#797c77"
        },
        "background-color": "#868a84",
        ":focus": {
          "background-color": "#797c77"
        },
        "padding-left": "14px",
        "padding-right": "14px"
      },
      "quantityInput": {
        "font-size": "13px",
        "padding-top": "14.5px",
        "padding-bottom": "14.5px"
      }
    },
    "buttonDestination": "modal",
    "contents": {
      "img": false,
      "title": false,
      "price": false,
      "options": false
    },
    "text": {
      "button": "View product"
    }
  },
  "productSet": {
    "styles": {
      "products": {
        "@media (min-width: 601px)": {
          "margin-left": "-20px"
        }
      }
    }
  },
  "modalProduct": {
    "contents": {
      "img": false,
      "imgWithCarousel": true,
      "button": false,
      "buttonWithQuantity": true
    },
    "styles": {
      "product": {
        "@media (min-width: 601px)": {
          "max-width": "100%",
          "margin-left": "0px",
          "margin-bottom": "0px"
        }
      },
      "button": {
        "font-size": "13px",
        "padding-top": "14.5px",
        "padding-bottom": "14.5px",
        ":hover": {
          "background-color": "#797c77"
        },
        "background-color": "#868a84",
        ":focus": {
          "background-color": "#797c77"
        },
        "padding-left": "14px",
        "padding-right": "14px"
      },
      "quantityInput": {
        "font-size": "13px",
        "padding-top": "14.5px",
        "padding-bottom": "14.5px"
      },
      "price": {
        "font-size": "16px"
      },
      "compareAt": {
        "font-size": "13.6px"
      },
      "unitPrice": {
        "font-size": "13.6px"
      }
    },
    "text": {
      "button": "Add to cart"
    }
  },
  "option": {},
  "cart": {
    "styles": {
      "button": {
        "font-size": "13px",
        "padding-top": "14.5px",
        "padding-bottom": "14.5px",
        ":hover": {
          "background-color": "#797c77"
        },
        "background-color": "#868a84",
        ":focus": {
          "background-color": "#797c77"
        }
      }
    },
    "text": {
      "total": "Subtotal",
      "notice": "Shipping is calculated at checkout.",
      "button": "Checkout",
      "noteDescription": ""
    }
  },
  "toggle": {
    "styles": {
      "toggle": {
        "background-color": "#868a84",
        ":hover": {
          "background-color": "#797c77"
        },
        ":focus": {
          "background-color": "#797c77"
        }
      },
      "count": {
        "font-size": "13px"
      }
    }
  }
},
      });
    });
  }
})();
</script>
</head>

<body class="d-flex flex-column">

<!--BEGIN RESPONSIVE NAVBAR-->
<nav class="navbar navbar-dark navbar-expand-lg bg-info justify-content-center fixed-top"> <a class="navbar-brand" href="#"><img class="img-fluid rounded"  src="https://dummyimage.com/300x65" alt="Your Logo" title="Company Logo or Brand"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="https://example.com" id="mydropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="mydropdown"> <a class="dropdown-item" href="#">Something</a> <a class="dropdown-item" href="#">Another thing</a> <a class="dropdown-item" href="#">One more thing</a> </div>
</li>
<li class="nav-item"><a class="nav-link" href="#">Menu2</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu3</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu4</a></li>
</ul>
</div>
</nav><!--/end navbar-->

<!--BEGIN MAIN CONTENT-->
<main class="container-fluid flex-grow">
<div class="row">
<div class="jumbotron col-md-8 mx-auto">
<h1>XYZ Website</h1>
<h2>Some Pithy Slogan</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi ipsa facilis voluptatum non.</p>
</div>
</div>

<!--BEGIN COLUMN ROW-->
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 pt-3">

<!--COL 1, CARD 1-->
<div class="col mb-3">
<div class="card h-100"> 
<img src="https://dummyimage.com/250x125" class="card-img-top" alt="placeholder image">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a card with supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-center">
Together Ketubah
<!--SHOPIFY BUTTON DIV-->
 <div id="product-component-1634564439619"></div>
</div>
</div>
</div>

<!--COL 2, CARD 2-->
<div class="col mb-3">
<div class="card h-100"> 
<img src="https://dummyimage.com/250x125" class="card-img-top" alt="placeholder image">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a card with supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-center">
Shopify button here
<!--SHOPIFY BUTTON DIV-->
 <div id="product-component-IDxxxxxxxxxxxxx"></div>
</div>
</div>
</div>

<!--COL 3, CARD 3-->
<div class="col mb-4">
<div class="card h-100"> 
<img src="https://dummyimage.com/250x125" class="card-img-top" alt="placeholder image">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a card with supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-center">
Shopify button here
<!--SHOPIFY BUTTON DIV-->
 <div id="product-component-IDxxxxxxxxxxxxx"></div>
</div>
</div>
</div>

<!--COL 4, CARD 4-->
<div class="col mb-4">
<div class="card h-100"> 
<img src="https://dummyimage.com/250x125" class="card-img-top" alt="placeholder image">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a card with supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-center">
Shopify button here
<!--SHOPIFY BUTTON DIV-->
 <div id="product-component-IDxxxxxxxxxxxxx"></div>
</div>
</div>
</div>
</div><!--end column row-->
</main><!--/end main content-->

<!--BEGIN FOOTER-->
<footer class="bg-info text-white mt-4">
<div class="container-fluid py-3">
<div class="row text-center">
<div class="col-md-4">
<h5>Footer Column 1</h5>
</div>
<div class="col-md-4">
<h5>Footer Column 2</h5>
</div>
<div class="col-md-4">
<h5>Footer Column 3</h5>
</div>
</div>
</div>
</footer>

<!--First jQuery then Popper then Bootstrap--> 
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

Hope that helps.

Nancy O'Shea— Product User & Community Expert

Nancy OShea

Community Expert

For starters, your document is outdated XHTML transitional instead of modern HTML5 code.
It's not responsive on mobile and tablet devices.
And your code contains critical errors.

http://validator.w3.org/check?verbose=1&uri=https%3A%2F%2Fsharonepsteintextiles.com%2Fketubahs_buy_button.html

I suggest a re-build with Bootstrap responsive layout in DW CC.

=====================================
Read the chapters, do code exercises and take quizzes at the end.
- https://www.w3schools.com/html/
- https://www.w3schools.com/bootstrap4/

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded