Showing a list of products (3 to 4 products per row)

Activello
1

Hi,

I have a new page (Shop) in Draft mode added to my blog at http://sparkandspoon.com to show a list of products I’m promoting as an Amazon Affiliate. I have the necessary code from Amazon that links to the product on their website, ready to be embedded into my blog page.

Question: How do I organize these products into a table, with 3 to 4 products per row, just like they look on this other blog: Healthy Kitchen Essentials - Cookie and Kate

Right now, my products all show in a single column, one product per row.

Sample product code to embed:

<iframe style=“width: 120px; height: 240px;” src="//rcm-na.amazon-adsystem.com/e/cm?ref=tf_til&t=sparkandspoon-20&m=amazon&o=15&p=8&l=as1&IS2=1&asins=B004ECJKNS&linkId=fea67d092fbee87dcd269f2e27fe918a&bc1=000000&lt1=_blank&fc1=696969&lc1=0066c0&bg1=ffffff&f=ifr" width=“300” height=“150” frameborder=“0” marginwidth=“0” marginheight=“0” scrolling=“no”>
</iframe>

<iframe style=“width: 120px; height: 240px;” src="//rcm-na.amazon-adsystem.com/e/cm?ref=tf_til&t=sparkandspoon-20&m=amazon&o=15&p=8&l=as1&IS2=1&asins=B0076NOGPY&linkId=6ec9e0bb7207bc8fb225d783dc9584c7&bc1=000000&lt1=_blank&fc1=696969&lc1=0066c0&bg1=ffffff&f=ifr" width=“300” height=“150” frameborder=“0” marginwidth=“0” marginheight=“0” scrolling=“no”>
</iframe>

<iframe style=“width: 120px; height: 240px;” src="//rcm-na.amazon-adsystem.com/e/cm?ref=tf_til&t=sparkandspoon-20&m=amazon&o=15&p=8&l=as1&IS2=1&asins=B000ITRBZA&linkId=402ad6a2b365bb5296770223d432e345&bc1=000000&lt1=_blank&fc1=696969&lc1=0066c0&bg1=ffffff&f=ifr" width=“300” height=“150” frameborder=“0” marginwidth=“0” marginheight=“0” scrolling=“no”>
</iframe>

2

Hi there

Hope you are having a good day and thank you for your question :slight_smile:
You can use this html markup:

<div class=”container”>
</div class=”row”>
</div class=”col-sm-12 col-md-4″>
<iframe style=”width: 120px; height: 240px;” src=”//rcm-na.amazon-adsystem.com/e/cm?ref=tf_til&t=sparkandspoon-20&m=amazon&o=15&p=8&l=as1&IS2=1&asins=B0076NOGPY&linkId=6ec9e0bb7207bc8fb225d783dc9584c7&bc1=000000&lt1=_blank&fc1=696969&lc1=0066c0&bg1=ffffff&f=ifr” width=”300″ height=”150″ frameborder=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no”>
</iframe>
</div>
</div class=”col-sm-12 col-md-4″>
<iframe style=”width: 120px; height: 240px;” src=”//rcm-na.amazon-adsystem.com/e/cm?ref=tf_til&t=sparkandspoon-20&m=amazon&o=15&p=8&l=as1&IS2=1&asins=B0076NOGPY&linkId=6ec9e0bb7207bc8fb225d783dc9584c7&bc1=000000&lt1=_blank&fc1=696969&lc1=0066c0&bg1=ffffff&f=ifr” width=”300″ height=”150″ frameborder=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no”>
</iframe>
</div>
</div class=”col-sm-12 col-md-4″>
<iframe style=”width: 120px; height: 240px;” src=”//rcm-na.amazon-adsystem.com/e/cm?ref=tf_til&t=sparkandspoon-20&m=amazon&o=15&p=8&l=as1&IS2=1&asins=B0076NOGPY&linkId=6ec9e0bb7207bc8fb225d783dc9584c7&bc1=000000&lt1=_blank&fc1=696969&lc1=0066c0&bg1=ffffff&f=ifr” width=”300″ height=”150″ frameborder=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no”>
</iframe>
</div>
</div>
</div>

Thanks!
Colorlib Support Team

3

Hi,

This code doesn’t seem to work. I’ve attached a screenshot to show you how it looks.

Could you please tell me how to present the products in the following embedded code in a single row (second product next to the first one), instead of two rows? It’s live now at http://sparkandspoon.com/shop/

<div id=“product-component-19ef8476ddf”></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: ‘spark-and-spoon.myshopify.com’, apiKey: ‘e0a54b6423948cce89879897df9d711f’, appId: ‘6’, }); ShopifyBuy.UI.onReady(client).then(function (ui) { ui.createComponent(‘product’, { id: [629103001663], node: document.getElementById(‘product-component-19ef8476ddf’), moneyFormat: ‘%24%7B%7Bamount%7D%7D’, options: { “product”: { “buttonDestination”: “modal”, “variantId”: “all”, “contents”: { “imgWithCarousel”: false, “variantTitle”: false, “options”: false, “description”: false, “buttonWithQuantity”: false, “quantity”: false }, “text”: { “button”: “VIEW PRODUCT” }, “styles”: { “product”: { “@media (min-width: 601px)”: { “max-width”: “100%”, “margin-left”: “0”, “margin-bottom”: “50px” } }, “button”: { “background-color”: “#8fa50e”, “:hover”: { “background-color”: “#81950d” }, “:focus”: { “background-color”: “#81950d” } }, “compareAt”: { “font-size”: “12px” } } }, “cart”: { “contents”: { “button”: true }, “styles”: { “button”: { “background-color”: “#8fa50e”, “:hover”: { “background-color”: “#81950d” }, “:focus”: { “background-color”: “#81950d” } }, “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”: “#8fa50e”, “:hover”: { “background-color”: “#81950d” }, “:focus”: { “background-color”: “#81950d” } } } }, “toggle”: { “styles”: { “toggle”: { “background-color”: “#8fa50e”, “:hover”: { “background-color”: “#81950d” }, “:focus”: { “background-color”: “#81950d” } } } }, “productSet”: { “styles”: { “products”: { “@media (min-width: 601px)”: { “margin-left”: “-20px” } } } } } }); }); } })(); /]]>/
</script>
<div id=“product-component-ca77a784d09”></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: ‘spark-and-spoon.myshopify.com’, apiKey: ‘e0a54b6423948cce89879897df9d711f’, appId: ‘6’, }); ShopifyBuy.UI.onReady(client).then(function (ui) { ui.createComponent(‘product’, { id: [629889630271], node: document.getElementById(‘product-component-ca77a784d09’), moneyFormat: ‘%24%7B%7Bamount%7D%7D’, options: { “product”: { “buttonDestination”: “modal”, “variantId”: “all”, “contents”: { “imgWithCarousel”: false, “variantTitle”: false, “options”: false, “description”: false, “buttonWithQuantity”: false, “quantity”: false }, “text”: { “button”: “VIEW PRODUCT” }, “styles”: { “product”: { “@media (min-width: 601px)”: { “max-width”: “100%”, “margin-left”: “0”, “margin-bottom”: “50px” } }, “button”: { “background-color”: “#8fa50e”, “:hover”: { “background-color”: “#81950d” }, “:focus”: { “background-color”: “#81950d” } }, “compareAt”: { “font-size”: “12px” } } }, “cart”: { “contents”: { “button”: true }, “styles”: { “button”: { “background-color”: “#8fa50e”, “:hover”: { “background-color”: “#81950d” }, “:focus”: { “background-color”: “#81950d” } }, “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”: “#8fa50e”, “:hover”: { “background-color”: “#81950d” }, “:focus”: { “background-color”: “#81950d” } } } }, “toggle”: { “styles”: { “toggle”: { “background-color”: “#8fa50e”, “:hover”: { “background-color”: “#81950d” }, “:focus”: { “background-color”: “#81950d” } } } }, “productSet”: { “styles”: { “products”: { “@media (min-width: 601px)”: { “margin-left”: “-20px” } } } } } }); }); } })(); /]]>/
</script>

4

Hi there,

  1. Try this code instead but add it to the page editor when its in text mode:
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4">
<iframe style="width: 100%; height: 240px;" src="//rcm-na.amazon-adsystem.com/e/cm?ref=tf_til&t=sparkandspoon-20&m=amazon&o=15&p=8&l=as1&IS2=1&asins=B0076NOGPY&linkId=6ec9e0bb7207bc8fb225d783dc9584c7&bc1=000000&lt1=_blank&fc1=696969&lc1=0066c0&bg1=ffffff&f=ifr" width="100%" height="150" frameborder="0" marginwidth="0" marginheight="0" scrolling="no">
</iframe>
</div>
<div class="col-sm-12 col-md-4">
<iframe style="width: 100%; height: 240px;" src="//rcm-na.amazon-adsystem.com/e/cm?ref=tf_til&t=sparkandspoon-20&m=amazon&o=15&p=8&l=as1&IS2=1&asins=B0076NOGPY&linkId=6ec9e0bb7207bc8fb225d783dc9584c7&bc1=000000&lt1=_blank&fc1=696969&lc1=0066c0&bg1=ffffff&f=ifr" width="100%" height="150" frameborder="0" marginwidth="0" marginheight="0" scrolling="no">
</iframe>
</div>
<div class="col-sm-12 col-md-4">
<iframe style="width: 100%; height: 240px;" src="//rcm-na.amazon-adsystem.com/e/cm?ref=tf_til&t=sparkandspoon-20&m=amazon&o=15&p=8&l=as1&IS2=1&asins=B0076NOGPY&linkId=6ec9e0bb7207bc8fb225d783dc9584c7&bc1=000000&lt1=_blank&fc1=696969&lc1=0066c0&bg1=ffffff&f=ifr" width="100%" height="150" frameborder="0" marginwidth="0" marginheight="0" scrolling="no">
</iframe>
</div>
</div>
</div>

Try to use the full width page template for the above.

  1. That code you posted in the private reply does not seem to work when we add it to a page. Please check it.
    Also note that the way this code is displays is not really something the theme can help and you will need to do your own modifications on it to get it to look the way you want. Its not something we should be supporting.

Hope you understand.