将Shopify产品添加到我的网站

Question

我正在创建一个在线商店，我在我的产品中添加了一些Shopify产品，但它们都显示在彼此之下。

我无法找到将它放在彼此旁边的方法。请告知我如何将我的所有产品放在一起。

我尝试添加bootstrap但它仍然无效。

这是我到目前为止所做的：

<section id="responsive">
    <div class="container">
        <div class="row text-center">
            <h2 id="how" class="os-animation" data-os-animation="zoomIn" data-os-animation-delay="0.3s">ASUS MOTHERBOARDS</h2>
            <p style="text-align: left">Whether upgrading or building afresh, choose your 200 series board from the world's No.1 motherboard brand. ASUS x CableMod.</p>
        </div>
        <div class="col-sm-4">
            <p>ASUS</p>
            <div id='product-component-aa41b971682'></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: 'mystore.myshopify.com',
      apiKey: 'e508fb07546e22c7abedd7b171cb31aa',
      appId: '6',
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: [123456789],
        node: document.getElementById('product-component-aa41b971682'),
        moneyFormat: 'R%20%7B%7Bamount%7D%7D',
        options: {
          "product": {
            "buttonDestination": "modal",
            "variantId": "all",
            "width": "240px",
            "contents": {
              "imgWithCarousel": false,
              "variantTitle": false,
              "options": false,
              "description": false,
              "buttonWithQuantity": false,
              "quantity": false
            },
            "text": {
              "button": "VIEW PRODUCT"
            },
            "styles": {
              "product": {
                "text-align": "left",
                "@media (min-width: 601px)": {
                  "max-width": "100%",
                  "margin-left": "0",
                  "margin-bottom": "50px"
                }
              },
              "compareAt": {
                "font-size": "12px"
              }
            }
          },
          "cart": {
            "contents": {
              "button": true
            },
            "styles": {
              "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"
                }
              }
            }
          },
          "productSet": {
            "styles": {
              "products": {
                "@media (min-width: 601px)": {
                  "margin-left": "-20px"
                }
              }
            }
          }
        }
      });
    });
  }
})();
/*]]>*/



            </script>
        </div>
        <div class="col-sm-4">
            <p>NVIDIA</p>
            <div id='product-component-aa41b971682'></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: 'mystore.myshopify.com',
      apiKey: 'e508fb07546e22c7abedd7b171cb31aa',
      appId: '6',
    });

    ShopifyBuy.UI.onReady(client).then(function (ui) {
      ui.createComponent('product', {
        id: [123456789],
        node: document.getElementById('product-component-aa41b971682'),
        moneyFormat: 'R%20%7B%7Bamount%7D%7D',
        options: {
          "product": {
            "buttonDestination": "modal",
            "variantId": "all",
            "width": "240px",
            "contents": {
              "imgWithCarousel": false,
              "variantTitle": false,
              "options": false,
              "description": false,
              "buttonWithQuantity": false,
              "quantity": false
            },
            "text": {
              "button": "VIEW PRODUCT"
            },
            "styles": {
              "product": {
                "text-align": "left",
                "@media (min-width: 601px)": {
                  "max-width": "100%",
                  "margin-left": "0",
                  "margin-bottom": "50px"
                }
              },
              "compareAt": {
                "font-size": "12px"
              }
            }
          },
          "cart": {
            "contents": {
              "button": true
            },
            "styles": {
              "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"
                }
              }
            }
          },
          "productSet": {
            "styles": {
              "products": {
                "@media (min-width: 601px)": {
                  "margin-left": "-20px"
                }
              }
            }
          }
        }
      });
    });
  }
})();
/*]]>*/



            </script>
        </div>
    </div>
</section>