-
-
Save dimitaruzunoff/e393afb7f76b2dcc84ff6f276145bbc8 to your computer and use it in GitHub Desktop.
Custom Product feature section for Product page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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' -%} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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