Skip to content

Instantly share code, notes, and snippets.

@enamhasan

enamhasan/advance-product-descripton-shopify

Created February 5, 2021 10:48
Show Gist options
  • Save enamhasan/0d37bab2b8f8771b4c8e22ad0323de18 to your computer and use it in GitHub Desktop.
Save enamhasan/0d37bab2b8f8771b4c8e22ad0323de18 to your computer and use it in GitHub Desktop.
Download ZIP
Dynamic product description for ElectJet
Raw
advance-product-descripton-shopify
{% include 'product-template',
description_style: section.settings.description_style,
image_container_width: section.settings.image_size,
section_id: product.id,
social: section.settings.social_enable,
thumbnail_position: section.settings.thumbnail_position,
thumbnail_arrows: section.settings.thumbnail_arrows
%}
{% if settings.enable_product_reviews and settings.reviews_layout == 'full' %}
<hr id="Reviews-{{ product.id }}" class="hr--large">
<div class="index-section index-section--small product-reviews product-reviews--full">
<div class="page-width">
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
</div>
</div>
{% endif %}
{% comment %}
{% include 'page-template-blocks' %}
{% endcomment %}
{% schema %}
{
"name": "Product.description",
"settings": [
{
"type": "select",
"id": "image_size",
"label": "Image size",
"default": "medium",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
]
},
{
"type": "select",
"id": "thumbnail_position",
"label": "Thumbnail position",
"default": "beside",
"options": [
{
"value": "beside",
"label": "Next to image"
},
{
"value": "below",
"label": "Below image"
}
]
},
{
"type": "checkbox",
"id": "thumbnail_arrows",
"label": "Show thumbnail arrows"
},
{
"type": "select",
"id": "description_style",
"label": "Description position",
"default": "default",
"options": [
{
"value": "default",
"label": "Next to images"
},
{
"value": "full",
"label": "Below images"
}
]
},
{
"type": "checkbox",
"id": "social_enable",
"label": "Enable social sharing",
"default": true
}
],
"blocks": [
{
"type": "image-hero",
"name": "Image hero",
"settings": [
{
"type": "textarea",
"id": "title",
"label": "Heading",
"default": "Two line\ntitle image"
},
{
"type": "range",
"id": "title_size",
"label": "Heading text size",
"default": 80,
"min": 40,
"max": 100,
"unit": "px"
},
{
"type": "text",
"id": "subheading",
"label": "Subheading",
"default": "And an optional subheading"
},
{
"type": "url",
"id": "link",
"label": "Link"
},
{
"type": "text",
"id": "link_text",
"label": "Link text",
"default": "Optional button"
},
{
"type": "select",
"id": "text_align",
"label": "Text alignment",
"default": "vertical-bottom horizontal-left",
"options": [
{
"value": "vertical-center horizontal-left",
"label": "Center left"
},
{
"value": "vertical-center horizontal-center",
"label": "Center"
},
{
"value": "vertical-center horizontal-right",
"label": "Center right"
},
{
"value": "vertical-bottom horizontal-left",
"label": "Bottom left"
},
{
"value": "vertical-bottom horizontal-center",
"label": "Bottom center"
},
{
"value": "vertical-bottom horizontal-right",
"label": "Bottom right"
}
]
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "select",
"id": "focal_point",
"label": "Image focal point",
"info": "Used to keep the subject of your photo in view.",
"default": "center center",
"options": [
{
"value": "top left",
"label": "Top left"
},
{
"value": "top center",
"label": "Top center"
},
{
"value": "top right",
"label": "Top right"
},
{
"value": "center left",
"label": "Left"
},
{
"value": "center center",
"label": "Center"
},
{
"value": "center right",
"label": "Right"
},
{
"value": "bottom left",
"label": "Bottom left"
},
{
"value": "bottom center",
"label": "Bottom center"
},
{
"value": "bottom right",
"label": "Bottom right"
}
]
},
{
"type": "select",
"id": "section_height",
"label": "Desktop height",
"default": "650px",
"options": [
{
"label": "Natural",
"value": "natural"
},
{
"label": "450px",
"value": "450px"
},
{
"label": "550px",
"value": "550px"
},
{
"label": "650px",
"value": "650px"
},
{
"label": "750px",
"value": "750px"
},
{
"label": "Full screen",
"value": "100vh"
}
]
},
{
"type": "select",
"id": "mobile_height",
"label": "Mobile height",
"default": "auto",
"info": "Not used if desktop height is set to natural",
"options": [
{
"label": "Auto",
"value": "auto"
},
{
"label": "250px",
"value": "250px"
},
{
"label": "300px",
"value": "300px"
},
{
"label": "400px",
"value": "400px"
},
{
"label": "500px",
"value": "500px"
},
{
"label": "Full screen",
"value": "100vh"
}
]
},
{
"type": "checkbox",
"id": "parallax",
"label": "Enable parallax",
"default": true
}
]
},
{
"type": "text-and-image",
"name": "Image with text",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "range",
"id": "image_width",
"label": "Image width",
"default": 500,
"min": 100,
"max": 500,
"step": 10,
"unit": "px"
},
{
"type": "text",
"id": "subtitle",
"label": "Subtitle",
"default": "Improved"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Image with text"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Pair large text with an image to tell a story, explain a detail about your product, or describe a new promotion.</p>"
},
{
"type": "text",
"id": "button_label",
"label": "Button label",
"default": "Optional button"
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
},
{
"type": "select",
"id": "layout",
"label": "Layout",
"default": "left",
"options": [
{
"value": "left",
"label": "Image on left"
},
{
"value": "right",
"label": "Image on right"
}
]
}
]
},
{
"type": "map",
"name": "Map",
"settings": [
{
"id": "map_title",
"type": "text",
"label": "Title",
"default": "Our retail store"
},
{
"id": "address",
"type": "richtext",
"label": "Text",
"default": "<p>301 Front St W<br>Toronto, Canada</p><p>Mon - Fri, 8:30am - 10:30pm<br>Saturday, 8:30am - 10:30pm<br>Sunday, 8:30am - 10:30pm</p>"
},
{
"id": "map_address",
"type": "text",
"label": "Map address",
"info": "Google maps will find the exact location",
"default": "301 Front St W, Toronto, ON M5V 2T6"
},
{
"id": "api_key",
"type": "text",
"label": "Google Maps API key",
"info": "You'll need to [register a Google Maps API Key](https://help.shopify.com/manual/using-themes/troubleshooting/map-section-api-key) to display the map"
},
{
"id": "show_button",
"type": "checkbox",
"label": "Show 'Get directions' button",
"default": true
},
{
"type": "image_picker",
"id": "background_image",
"label": "Image",
"info": "Displayed if the map isn’t loaded"
},
{
"type": "select",
"id": "background_image_position",
"label": "Image focal point",
"default": "center center",
"options": [
{
"label": "Top left",
"value": "top left"
},
{
"label": "Top center",
"value": "top center"
},
{
"label": "Top right",
"value": "top right"
},
{
"label": "Middle left",
"value": "center left"
},
{
"label": "Middle center",
"value": "center center"
},
{
"label": "Middle right",
"value": "center right"
},
{
"label": "Bottom left",
"value": "bottom left"
},
{
"label": "Bottom center",
"value": "bottom center"
},
{
"label": "Bottom right",
"value": "bottom right"
}
],
"info": "Used to keep the subject of your photo in view."
}
]
},
{
"type": "rich-text",
"name": "Rich text",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Rich text block"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Use this section for any descriptive text you need to fill out your pages or to add introductory headings between other blocks.</p>"
},
{
"type": "select",
"id": "align_text",
"label": "Text alignment",
"default": "left",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Centered"
}
]
},
{
"type": "checkbox",
"id": "narrow_column",
"label": "Narrow column",
"default": true
},
{
"type": "checkbox",
"id": "enlarge_text",
"label": "Enlarge text"
}
]
},
{
"type": "image-row",
"name": "Row of images",
"settings": [
{
"type": "image_picker",
"id": "image_1",
"label": "Image 1"
},
{
"type": "url",
"id": "image_1_link",
"label": "Link 1",
"info": "Optional"
},
{
"type": "image_picker",
"id": "image_2",
"label": "Image 2"
},
{
"type": "url",
"id": "image_2_link",
"label": "Link 2",
"info": "Optional"
},
{
"type": "image_picker",
"id": "image_3",
"label": "Image 3"
},
{
"type": "url",
"id": "image_3_link",
"label": "Link 3",
"info": "Optional"
},
{
"type": "image_picker",
"id": "image_4",
"label": "Image 4"
},
{
"type": "url",
"id": "image_4_link",
"label": "Link 4",
"info": "Optional"
},
{
"type": "checkbox",
"id": "enable_gutter",
"label": "Add spacing",
"default": false
},
{
"type": "checkbox",
"id": "enable_zoom",
"label": "Enable image zoom",
"info": "Not active if any image links set",
"default": true
}
]
},
{
"type": "text-columns",
"name": "Text columns with images",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title"
},
{
"type": "select",
"id": "align_text",
"label": "Text alignment",
"default": "left",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Centered"
}
]
},
{
"type": "header",
"content": "Column 1"
},
{
"type": "checkbox",
"id": "enable_image_1",
"label": "Show image",
"default": true
},
{
"type": "image_picker",
"id": "image_1",
"label": "Image"
},
{
"type": "text",
"id": "title_1",
"label": "Heading",
"default": "Example title"
},
{
"type": "richtext",
"id": "text_1",
"label": "Text",
"default": "<p>Use this section to explain a set of product features, to link to a series of pages, or to answer common questions about your products. Add images for emphasis.</p>"
},
{
"type": "text",
"id": "button_label_1",
"label": "Button label"
},
{
"type": "url",
"id": "button_link_1",
"label": "Link"
},
{
"type": "header",
"content": "Column 2"
},
{
"type": "checkbox",
"id": "enable_image_2",
"label": "Show image",
"default": true
},
{
"type": "image_picker",
"id": "image_2",
"label": "Image"
},
{
"type": "text",
"id": "title_2",
"label": "Heading",
"default": "Example title"
},
{
"type": "richtext",
"id": "text_2",
"label": "Text",
"default": "<p>Use this section to explain a set of product features, to link to a series of pages, or to answer common questions about your products. Add images for emphasis.</p>"
},
{
"type": "text",
"id": "button_label_2",
"label": "Button label"
},
{
"type": "url",
"id": "button_link_2",
"label": "Link"
},
{
"type": "header",
"content": "Column 3"
},
{
"type": "checkbox",
"id": "enable_image_3",
"label": "Show image",
"default": true
},
{
"type": "image_picker",
"id": "image_3",
"label": "Image"
},
{
"type": "text",
"id": "title_3",
"label": "Heading",
"default": "Example title"
},
{
"type": "richtext",
"id": "text_3",
"label": "Text",
"default": "<p>Use this section to explain a set of product features, to link to a series of pages, or to answer common questions about your products. Add images for emphasis.</p>"
},
{
"type": "text",
"id": "button_label_3",
"label": "Button label"
},
{
"type": "url",
"id": "button_link_3",
"label": "Link"
}
]
}
]
}
{% endschema %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment