Skip to content

Instantly share code, notes, and snippets.

@dimitaruzunoff
Last active Jan 26, 2021
Embed
What would you like to do?
Custom Product feature section for Product page
Add
{%- section 'product__additional-details' -%}
to
{%- section 'product-template' -%}
{%- section 'faq-section__product' -%}
{%- section 'related-products' -%}
to look like this:
{%- section 'product-template' -%}
{%- section 'product__additional-details' -%}
{%- section 'faq-section__product' -%}
{%- section 'related-products' -%}
<section data-section-type="product-additional-details" data-section-id="{{ section.id }}">
{%- if section.blocks.size > 0 -%}
{%- for block in section.blocks -%}
{%- assign current_product = all_products[block.settings.product] -%}
{%- if current_product == product -%}
{%- assign section_id = block.id -%}
{%- assign image_position = block.settings.image_position -%}
{%- assign image_layout = block.settings.image_layout -%}
{%- assign text_position = block.settings.text_position -%}
{%- assign text_alignment = block.settings.text_alignment -%}
{%- assign bg_color = block.settings.bg_color -%}
{%- comment -%} Text {%- endcomment -%}
{%- assign heading = block.settings.heading -%}
{%- assign description = block.settings.description -%}
{%- comment -%} Button {%- endcomment -%}
{%- assign button_text = block.settings.button_text -%}
{%- assign button_link = block.settings.button_link -%}
{%- assign button_style = block.settings.button_style -%}
{%- comment -%} Images {%- endcomment -%}
{%- assign image_1 = block.settings.image_1 -%}
{%- assign image_2 = block.settings.image_2 -%}
{%- assign image_link_1 = block.settings.image_link_1 -%}
{%- assign image_link_2 = block.settings.image_link_2 -%}
{%- assign hide_image_2 = block.settings.hide_image_2 -%}
{%- if bg_color != 'rgba(0,0,0,0)' and bg_color != '' -%}
{%- style -%}
#ProductFeature--{{ section_id }} {
--bg: {{ bg_color }};
background-color: {{ bg_color }};
}
{%- endstyle -%}
{%- endif -%}
<div id="ProductFeature--{{ section_id }}" class="product-feature" {{ block.shopify_attributes }}>
<div class="wrapper">
{%- render 'product-feature',
section_id: section_id,
image_position: image_position,
image_layout: image_layout,
text_position: text_position,
text_alignment: text_alignment,
heading: heading,
description: description,
button_text: button_text,
button_link: button_link,
button_style: button_style,
image_1: image_1,
image_2: image_2,
image_link_1: image_link_1,
image_link_2: image_link_2,
hide_image_2: hide_image_2 -%}
</div>
</div>
{%- endif -%}
{%- endfor -%}
{%- endif -%}
</section>
{% schema %}
{
"name": "Additional details",
"settings": [],
"blocks": [
{
"name": "Item",
"type": "item",
"settings": [
{
"type": "product",
"id": "product",
"label": "Product"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "image_layout",
"label": "Image layout",
"default": "square",
"options": [
{ "label": "Square", "value": "square" },
{ "label": "Portrait", "value": "portrait" }
]
},
{
"type": "select",
"id": "image_position",
"label": "Image position",
"info": "Affects the second image in this section.",
"default": "inline",
"options": [
{ "label": "Inline", "value": "inline" },
{ "label": "Overlapping", "value": "overlapping" }
]
},
{
"type": "select",
"id": "text_position",
"label": "Text position",
"default": "right",
"options": [
{ "label": "Right", "value": "right" },
{ "label": "Left", "value": "left" }
]
},
{
"type": "select",
"id": "text_alignment",
"label": "Text alignment",
"default": "center",
"options": [
{ "label": "Center", "value": "center" },
{ "label": "Left", "value": "left" }
]
},
{
"type": "header",
"content": "Images"
},
{
"type": "image_picker",
"id": "image_1",
"label": "Image"
},
{
"type": "url",
"id": "image_link_1",
"label": "Image link"
},
{
"type": "image_picker",
"id": "image_2",
"label": "Second image"
},
{
"type": "url",
"id": "image_link_2",
"label": "Second image link"
},
{
"type": "checkbox",
"id": "hide_image_2",
"label": "Hide on mobile",
"default": false
},
{
"type": "header",
"content": "Text"
},
{
"type": "textarea",
"id": "heading",
"label": "Heading",
"default": "This is a heading for a Product feature block."
},
{
"type": "richtext",
"id": "description",
"label": "Description",
"default": "<p>Use this text to share information about the point put forth above. Describe a product, your brand, or what makes you special.</p>"
},
{
"type": "header",
"content": "Button"
},
{
"type": "text",
"id": "button_text",
"label": "Text"
},
{
"type": "url",
"id": "button_link",
"label": "Link"
},
{
"type": "select",
"id": "button_style",
"label": "Style",
"default": "primary",
"options": [
{ "label": "Primary", "value": "primary" },
{ "label": "Secondary", "value": "secondary" }
]
},
{
"type": "header",
"content": "Colors"
},
{
"type": "color",
"id": "bg_color",
"label": "Background"
}
]
}
]
}
{% endschema %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment