.layout { border: 1px solid {{design.borderColor.toColor()}}; } .productImageContainer { border: 1px solid {{design.borderColor.toColor()}}; } .header { border-color: {{design.borderColor.toColor()}}; } .background { background-color: {{design.bgColor.toColor()}}; opacity: {{design.bgAlpha}}; } .background.gradient { background-image: -moz-linear-gradient(top, rgba(255,255,255,0.5), {{design.bgColor.toColor()}}); background-image: -ms-linear-gradient(top, rgba(255,255,255,0.5), {{design.bgColor.toColor()}}); background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from({{design.bgColor.toColor()}}), to(rgba(255,255,255,0.5))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5), {{design.bgColor.toColor()}}); background-image: linear-gradient(to bottom, rgba(255,255,255,0.5), {{design.bgColor.toColor()}}); } .bg-image.image-bg { background-image: url({{design.bgImageUrl}}); opacity: {{design.bgAlpha}}; } .background.image-bg { background-color: transparent; } .selectedThumb .productImageContainer { border: 1px solid {{design.glowColor.toColor()}}; } .button { background-color: {{design.btnColor.toColor()}}; color: {{design.txtColorCta.toColor()}}; } .button:hover { background-color: {{design.btnRollColor.toColor()}}; } .button.text:hover { background: none; } .headline { color: {{design.txtColorTitle.toColor()}}; font-size: {{design.headlineSize}}px; } .productPrice { color: {{design.txtColorPrice.toColor()}}; font-size: {{design.priceSize}}px; } .productPriceStrike { color:{{design.txtColorPrice.toColor()}}; } .productSalePrice { color: {{design.txtColorPrice.toColor()}}; font-size: {{design.priceSize}}px; } .productName { color: {{design.txtColorProduct.toColor()}}; font-size: {{design.nameSize}}px; }
{{product.name}}
{{product.price}}
{{product.salePrice}}
{{headline.cta}}