Amazon link Builder Template

template.css

div.az-item{
  transition:all 0.15s ease;
  padding-bottom: 1px;
  position: relative;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
div.az-item:hover {
  transform:translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
div.az-item:before {
  content: "";
  display: block;
  height: 4px;
  width:100%;
  border-radius: 4px 4px 0 0;
  background-color: #FF9901;
}
div.az-item:after {
  content: "Amazon.co.jp";
  display:block;
  position:absolute;
  right: 4px;
  bottom: 0;
  color: #CCC;
  font-size: 0.8em;
}

div.az-item .az-image {
  width: 160px;
  max-height: 160px;
  text-align: center;
  margin-right: 8px;
}

div.az-item .az-title{
  color: #e47911;
}
div.az-item a:hover .az-title{
  text-decoration:underline;
}

div.az-item .az-by{
  font-size: 0.8em;
  display: inline-block;
}

div.az-item ul{
    list-style-type: none;
  	padding: 0;
    margin: 0;
}

div.az-item li{
  margin-bottom: 0;
}

div.az-item a{
  text-decoration:none;
  display: flex;
  align-items: center;
  margin: 16px;
}

div.az-item a p.img img{
  width:auto;
  height:auto;
}

div.az-item a div.info{
  flex: 1;
  overflow:hidden;
}

div.az-item a div.info{
  color:#555;
  text-decoration:none;
}

div.az-item a div.info ul{
  font-size:0.8em;
}

div.az-item .az-price{
  margin-right:5px;
  display:inline-block;
  color:#900;
  font-size: 1em;
}

div.az-item .az-strikeprice{
  text-decoration: line-through;
}

div.az-item .az-icon-prime {
    background: url("https://images-na.ssl-images-amazon.com/images/G/01/AUIClients/AmazonUIBaseCSS-sprite_2x_weblab_AUI_100106_T1-4e9f4ae74b1b576e5f55de370aae7aedaedf390d._V2_.png") no-repeat;
    display: inline-block;
    margin-top: -1px;
    vertical-align: middle;
    background-position: -192px -911px;
    background-size: 560px 938px;
    width: 52px;
    height: 15px;
    transform: scale(0.8);
}

@media screen and (max-width:540px){
  div.az-item a{
    margin: 16px 8px;
  }
  
  div.az-item .az-title{
    font-size:0.9em;
  }
  div.az-item .az-by{
    font-size:0.7em;
  }

  div.az-item ul{
    font-size:0.8em;
  }
}

template.html

{{#Items}}
<div class="az-item">
{{#Item}}
{{#aalb}}
<a href="{{DetailPageURL}}" target="_blank" onclick="ga('send', 'event', 'AmazonAssociates', 'Click', '{{ASIN}}' + ' ' + '{{Title}}');">
<div class="az-image"><img src="{{MediumImageURL}}"></div>
<div class="info">
<span class="az-title">{{Title}}</span>
{{#By}}
<span class="az-by">{{By}}</span>
{{/By}}
<ul>
{{#InStock}}
<li>価格：<span class="az-price">{{CurrentPrice}}</span>{{#Saving}}<span class="az-strikeprice">{{StrikePrice}}</span>{{/Saving}}{{#Prime}}<i class="az-icon-prime"></i>{{/Prime}}</li>
{{/InStock}}
{{#Merchant}}
<li>販売者：{{Merchant}}</li>
{{/Merchant}}
</ul>
</div>
{{/aalb}}
{{/Item}}
</a>
</div>
{{/Items}}