HI all,
I have a section template with a block of type product. This works and I can select the product in customise. However, when it comes to getting the product data to display via liquid, I can’t seem to get to the product?
“blocks”: [
{
“type”: “advert”,
“name”: “Product Block”,
“settings”: [
{
“type”: “product”,
“id”: “product”,
“label”: “Product-Handle”
},…
Example:
“{{block.settings.product.url}}”
“{{block.product.url}}”
“{{section.product.url}}”
“{{products.product..}}”
None of the selectors seem to work. Anyone able to advise? My shop regularly have price updates so having a database driven product advert would be ideal yet it seems functionality doesn’t support this??
Full Section Sample for anyone able to get it working:
.ph_container { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background: #f6f6f6; position: relative; } .ph_box { width: 0%; height: 620px; background: #FFF; position: absolute; animation: openBox 1s cubic-bezier(.74, .06, .4, .92) forwards; } .ph_product__img { width: 600px; position: absolute; left: -150px; top: 50px; opacity: 0; animation: fadeImg 1s ease-in-out forwards; animation-delay: 1s; } } .ph_product__video { width: 320px; height: 100px; position: absolute; left: 50px; bottom: 50px; } .ph_video { display: flex; align-items: center; position: absolute; bottom: 0px; opacity: 0; animation: upVideo 1s cubic-bezier(.74, .06, .4, .92) forwards; animation-delay: 1.2s; } i.ph { width: 70px; height: 70px; display: flex; justify-content: center; align-items: center; font-size: 12px; color: #F71568; border: 2px solid #F71568; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; transition: ease-in-out 220ms; cursor: pointer; } i.ph:hover { background: #F71568; color: #fff; box-shadow: 0 0 26px #F71568; } p.ph { margin-left: 25px; font-family: 'Poppins'; } .ph_product__disc { width: 0px; height: 430px; background: #FFCA1B; display: flex; align-items: center; justify-content: center; position: absolute; left: 0px; top: 50px; animation: showDisc 1s cubic-bezier(.74, .06, .4, .92) forwards; } .ph_product__disc--content { width: 80%; height: 80%; display: flex; justify-content: space-between; flex-direction: column; animation: fadeContent 1s ease-in-out forwards; animation-delay: 1s; opacity: 0; } .ph_disc__content--about { width: 100%; } h1.ph { font-size: 32px; font-family: 'Poppins'; } span.ph { font-family: 'Lato'; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; display: flex; opacity: 0.5; } p.ph { margin-top: 35px; font-size: 14px; font-family: 'Poppins'; } .ph_product__view--more { width: 100%; display: flex; align-items: center; position: relative; cursor: pointer; } .ph_product__view--more:hover .view__more--block { width: 220px; height: 35px; } .ph_view__more--block { width: 10px; height: 15px; position: absolute; background: #f6f6f6; z-index: 1; transition: cubic-bezier(0.68, -0.55, .27, 01.55) 320ms; } p.ph { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; display: flex; z-index: 2; margin-left: 15px; font-family: 'Poppins'; } .ph_product_buttons { width: 500px; height: 100px; bottom: 50px; right: -50px; position: absolute; } .ph_btn { width: 240px; height: 70%; font-size: 16px; font-weight: bold; font-family: 'Poppins'; -webkit-transition: ease-in-out 220ms; -moz-transition: ease-in-out 220ms; -ms-transition: ease-in-out 220ms; -o-transition: ease-in-out 220ms; transition: ease-in-out 220ms; cursor: pointer; } .ph_wishlist { border: 2px solid #F71568; background:transparent; color: #F71568; position: absolute; bottom: -25px; left: 0; opacity: 0; animation: fadeWish 1s cubic-bezier(.74, .06, .4, .92) forwards; animation-delay: 1s; } .ph_wishlist:hover { background: #F71568; color: #FFF; box-shadow: 0 0 26px #F71568; } .ph_buy { border: none; background: #F71568; color: #FFF; position: absolute; right: 0; bottom: 0; opacity: 0; animation: fadeBuy 1s cubic-bezier(.74, .06, .4, .92) forwards; animation-delay: 1s; } .ph_buy :hover { box-shadow: 0 0 26px #F71568; } /* keyframes */ @keyframes openBox { 0% { width: 0px; left: 15%; } 100% { width: 900px; left: 15%; } } @keyframes fadeImg { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes upVideo { 0% { opacity: 0; bottom: -20px; } 100% { opacity: 1; bottom: 0px; } } @keyframes showDisc { 0% { width: 0px; left: 450px; } 100% { width: 500px; left: 450px; } } @keyframes fadeContent { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeWish { 0% { opacity: 0; bottom: -25px; } 100% { opacity: 1; bottom: 0; } } @keyframes fadeBuy { 0% { opacity: 0; bottom: -25px; } 100% { opacity: 1; bottom: 0; } } @keyframes top { 0% { opacity: 0; bottom: -80px } 100% { opacity: 1; bottom: 0px } } @keyframes icon { 0% { opacity: 0; transform: scale(0.0); } 50% { opacity: 1; transform: scale(1.3) rotate(-02deg); } 100% { opacity: 1; bottom: 0px; } }{%- for block in section.blocks -%}
{%- assign lowestPrice = block.settings.product.price_min -%}
{{product.title}}
From {{lowestPrice | money}}
{{block.settings.title}}
{{block.settings.subtext}}{{block.settings.description}}
view all options
KLARNA
Pay Later
Pay in 3 Instalments.
learn more
Cancellation
30 Days to cancel if you change your mind.
learn more
{% schema %}
{
“name”: “Product Hero”,
“class”: “shopify-section__product__hero”,
“max_blocks”: 1,
“settings”: [{
“type”: “paragraph”,
“content”: “Add Product Adverts - Database Driven Pricing”
}],
“blocks”: [
{
“type”: “advert”,
“name”: “Product Block”,
“settings”: [
{
“type”: “product”,
“id”: “product”,
“label”: “Product-Handle”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Title”,
“default”: “Treat Yourself”
},
{
“type”: “text”,
“id”: “subtext”,
“label”: “Sub Title”
},
{
“type”: “text”,
“id”: “description”,
“label”: “Description”
}
]
}
],
“presets”: [
{
“category”: “Text”,
“name”: “Product Hero”
}]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}