2562 lines
83 KiB
Plaintext
2562 lines
83 KiB
Plaintext
<!-- /sections/product.liquid -->
|
|
|
|
{%- liquid
|
|
assign current_variant = product.selected_or_first_available_variant
|
|
assign product_sticky_enable = section.settings.product_sticky_enable
|
|
assign enable_video_looping = section.settings.enable_video_looping
|
|
assign image_size = section.settings.image_size
|
|
assign image_layout = section.settings.image_layout
|
|
assign mobile_image_style = section.settings.mobile_image_style
|
|
assign featured_media = current_variant.featured_media | default: product.featured_media
|
|
assign featured_media_aspect_ratio = featured_media.aspect_ratio | default: 1
|
|
assign is_title_linked = true
|
|
if template.name == 'product'
|
|
assign is_title_linked = false
|
|
endif
|
|
|
|
assign show_thumbnails = false
|
|
assign enable_thumbs = false
|
|
assign enable_thumbs_mobile = false
|
|
|
|
if image_layout == 'thumbnails' or image_layout == 'thumbnails-left'
|
|
assign enable_thumbs = true
|
|
assign show_thumbnails = true
|
|
endif
|
|
|
|
if mobile_image_style == 'thumbs'
|
|
assign show_thumbnails = true
|
|
assign enable_thumbs_mobile = true
|
|
endif
|
|
|
|
assign modifier = image_layout | default: 'thumbnails'
|
|
assign product_wrapper_modifier = 'product__wrapper--' | append: modifier
|
|
|
|
assign wrapper_tag = 'div'
|
|
if product_sticky_enable
|
|
assign wrapper_tag = 'product-sticky'
|
|
endif
|
|
|
|
assign show_buy_buttons = false
|
|
assign buy_buttons = section.blocks | where: 'type', 'buttons'
|
|
|
|
if buy_buttons.size > 0
|
|
assign show_buy_buttons = true
|
|
endif
|
|
|
|
assign image_width = 770
|
|
|
|
if image_size == 'small'
|
|
assign product_wrapper_modifier = product_wrapper_modifier | append: ' product__wrapper--small'
|
|
assign image_width = 525
|
|
endif
|
|
|
|
if image_size == 'stretch'
|
|
assign product_wrapper_modifier = product_wrapper_modifier | append: ' product__wrapper--stretch'
|
|
assign image_width = 970
|
|
endif
|
|
|
|
assign product_form_id = 'ProductForm--' | append: section.id | append: '-' | append: product.id
|
|
assign show_cart_bar = false
|
|
assign unique = section.id
|
|
|
|
assign sibling_color = product.metafields.theme.sibling_color.value | default: product.metafields.theme.sibling_colour.value | default: product.metafields.theme.siblings_color.value | default: product.metafields.theme.siblings_colour.value | default: product.metafields.theme.siblings_colors.value | default: product.metafields.theme.siblings_colours.value
|
|
|
|
if section.settings.show_cart_bar
|
|
assign show_cart_bar = true
|
|
endif
|
|
|
|
capture product_images_classlist
|
|
echo 'product__images'
|
|
|
|
if enable_thumbs
|
|
echo ' product__images--thumbs'
|
|
else
|
|
echo ' product__images--no-thumbs'
|
|
endif
|
|
|
|
if enable_thumbs_mobile
|
|
echo ' product__images--mobile-thumbs'
|
|
else
|
|
echo ' product__images--mobile-slider'
|
|
endif
|
|
endcapture
|
|
|
|
assign preorder = false
|
|
if product.metafields.theme.preorder.type == 'boolean' and product.metafields.theme.preorder.value == true
|
|
assign preorder = true
|
|
endif
|
|
|
|
assign sold_out = false
|
|
unless product.available
|
|
assign sold_out = true
|
|
endunless
|
|
|
|
assign product_tags = product.tags | join: ','
|
|
if product_tags contains '_preorder'
|
|
assign preorder = true
|
|
endif
|
|
|
|
assign product_price = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price
|
|
assign product_compare_at_price = product.compare_at_price
|
|
assign product_compare_at_price_max = product.compare_at_price_max
|
|
|
|
if product.metafields.app--168074346497.discount_percentage.value > 0.01
|
|
assign deducted_percentage = 1.0 | minus: product.metafields.app--168074346497.discount_percentage.value
|
|
|
|
assign product_price = product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
|
|
|
|
assign product_compare_at_price = product.price
|
|
assign product_compare_at_price_max = product.price_max
|
|
|
|
if product.compare_at_price > product_compare_at_price
|
|
assign product_compare_at_price = product.compare_at_price
|
|
endif
|
|
|
|
if product.compare_at_price_max > product_compare_at_price_max
|
|
assign product_compare_at_price_max = product.compare_at_price_max
|
|
endif
|
|
endif
|
|
|
|
assign on_sale = false
|
|
if product_compare_at_price > product_price
|
|
assign on_sale = true
|
|
endif
|
|
|
|
assign badge = ''
|
|
if badge == '' and product_tags contains '_badge_'
|
|
assign badge = product_tags | split: '_badge_'
|
|
assign badge = badge[1] | split: ',' | first | replace: '_', ' '
|
|
endif
|
|
|
|
assign color_scheme = 'color-' | append: section.settings.color_scheme
|
|
-%}
|
|
|
|
{%- style -%}
|
|
{%- if show_cart_bar -%}
|
|
:root { --cart-bar-height: 80px; }
|
|
{%- endif -%}
|
|
|
|
#Product--{{ section.id }} {
|
|
--PT: {{ section.settings.padding_top }}px;
|
|
--PB: {{ section.settings.padding_bottom }}px;
|
|
|
|
--swatch-size: var(--swatch-size-product);
|
|
}
|
|
{%- endstyle -%}
|
|
|
|
<script src="{{ 'product.js' | asset_url }}" defer="defer"></script>
|
|
{%- if product_sticky_enable -%}
|
|
<script src="{{ 'product-sticky.js' | asset_url }}" defer="defer"></script>
|
|
{%- endif -%}
|
|
|
|
<product-component
|
|
id="Product--{{ unique }}"
|
|
class="index-product section-padding {{ color_scheme }}"
|
|
data-section-id="{{ unique }}"
|
|
data-section-type="product"
|
|
data-product-handle="{{ product.handle }}"
|
|
data-enable-history-state="true"
|
|
data-overlay-header
|
|
data-sticky-enabled="{{ product_sticky_enable }}"
|
|
data-variant-image-scroll="{{ section.settings.variant_image_scroll }}"
|
|
{% if show_cart_bar %}
|
|
data-cart-bar-enabled
|
|
{% endif %}
|
|
>
|
|
<{{ wrapper_tag }} class="product__wrapper {{ product_wrapper_modifier }}" data-product>
|
|
<div class="product__wrapper__inner">
|
|
<div class="product__page">
|
|
<product-images
|
|
class="{{ product_images_classlist }}"
|
|
data-active-media="{{ section.id }}-{{ featured_media.id }}"
|
|
{% if enable_thumbs %}
|
|
data-fader-desktop
|
|
{% endif %}
|
|
{% if enable_thumbs_mobile %}
|
|
data-fader-mobile
|
|
{% endif %}
|
|
>
|
|
{%- if product.media.size > 0 -%}
|
|
{%- capture product_slides_attributes -%}
|
|
class="product__slides product-single__photos"
|
|
style="--featured-media-aspect-ratio: {{ featured_media_aspect_ratio | round: 2 }};"
|
|
data-product-media-list
|
|
{%- endcapture -%}
|
|
|
|
{%- if section.settings.enable_zoom -%}
|
|
<zoom-images {{ product_slides_attributes }}>
|
|
{%- else -%}
|
|
<div {{ product_slides_attributes }}>
|
|
{%- endif -%}
|
|
|
|
{%- for media in product.media -%}
|
|
{%- render 'media',
|
|
media: media,
|
|
featured_media: featured_media,
|
|
enable_video_looping: enable_video_looping,
|
|
sectionkey: unique,
|
|
image_width: image_width,
|
|
cover: true
|
|
-%}
|
|
{%- endfor -%}
|
|
|
|
{%- if section.settings.enable_zoom -%}
|
|
</zoom-images>
|
|
|
|
<script src="{{ 'load-photoswipe.js' | asset_url }}" defer="defer"></script>
|
|
<script src="{{ 'zoom.js' | asset_url }}" defer="defer"></script>
|
|
{%- else -%}
|
|
</div>
|
|
{%- endif -%}
|
|
|
|
{%- assign first_3d_model = product.media | where: 'media_type', 'model' | first -%}
|
|
{%- if first_3d_model -%}
|
|
<button
|
|
class="btn btn--outline btn--black btn--ar product-single__view-in-space"
|
|
data-shopify-xr
|
|
data-shopify-model3d-id="{{ first_3d_model.id }}"
|
|
data-shopify-title="{{ product.title | strip_html }}"
|
|
data-shopify-xr-hidden
|
|
>
|
|
{%- render 'icon-media-model' -%}
|
|
|
|
<span class="product-single__view-in-space-text">{{ 'products.general.view_space' | t }}</span>
|
|
</button>
|
|
{%- endif -%}
|
|
|
|
{%- if show_thumbnails -%}
|
|
<product-thumbs class="product__thumbs">
|
|
<div class="product__thumbs__holder" data-thumbs-slider>
|
|
{%- for media in product.media -%}
|
|
<div class="product__thumb{% if media == featured_media %} is-active{% endif %}" data-thumb-item>
|
|
<a
|
|
class="product__thumb__link"
|
|
href="{{ media.preview_image.src | image_url }}"
|
|
aria-current="{% if forloop.first %}true{% else %}false{% endif %}"
|
|
data-media-id="{{ section.id }}-{{ media.id }}"
|
|
data-thumb-link
|
|
>
|
|
{%- liquid
|
|
render 'image', image: media.preview_image, width: 150, height: 150, sizes: '75px', widths: '75, 100, 150, 225, 300', aspect_ratio: 1
|
|
|
|
if media.media_type == 'video' or media.media_type == 'external_video'
|
|
render 'icon-media-video'
|
|
elsif media.media_type == 'model'
|
|
render 'icon-media-model'
|
|
endif
|
|
-%}
|
|
</a>
|
|
</div>
|
|
{%- endfor -%}
|
|
</div>
|
|
</product-thumbs>
|
|
|
|
<script src="{{ 'product-thumbs.js' | asset_url }}" defer="defer"></script>
|
|
{%- endif -%}
|
|
|
|
{%- comment -%} Thumbnails template for Photoswipe {%- endcomment -%}
|
|
{%- if section.settings.enable_zoom -%}
|
|
<template data-pswp-thumbs-template>
|
|
{%- assign images = product.media | where: 'media_type', 'image' -%}
|
|
|
|
{%- for image in images -%}
|
|
{%- render 'image',
|
|
image: image,
|
|
width: 160,
|
|
height: 160,
|
|
sizes: '80px',
|
|
widths: '80, 120, 160',
|
|
aspect_ratio: 1,
|
|
modifier: 'pswp__thumb'
|
|
-%}
|
|
{%- endfor -%}
|
|
</template>
|
|
{%- endif -%}
|
|
{%- else -%}
|
|
<div class="product__slides product__slides--{{ image_size }} product-single__photos">
|
|
<div class="product__photo product__photo--blank product__slide"></div>
|
|
</div>
|
|
{%- endif -%}
|
|
</product-images>
|
|
|
|
<div class="product__content">
|
|
<div
|
|
class="form__wrapper{% unless show_buy_buttons %} form__wrapper--no-buttons{% endunless %}{% unless current_variant.available %} variant--soldout{% endunless %}{% if settings.form_style == 'classic' %} form__wrapper--classic{% else %} form__wrapper--modern{% endif %}{% if settings.show_newsletter %} show-product-notification{% endif %}"
|
|
data-form-wrapper
|
|
>
|
|
<div class="form__width">
|
|
{% comment %} The input with name="id" submits to cart {% endcomment %}
|
|
<input type="hidden" name="id" value="{{ current_variant.id }}" form="{{ product_form_id }}">
|
|
|
|
{% comment %} Add a line item property called 'Preorder' to preorder products {% endcomment %}
|
|
{%- if preorder -%}
|
|
<input
|
|
type="hidden"
|
|
name="properties[{{ 'products.product.sale_type' | t }}]"
|
|
value="{{ 'products.product.pre_order' | t }}"
|
|
form="{{ product_form_id }}"
|
|
data-product-preorder
|
|
>
|
|
{%- endif -%}
|
|
|
|
{%- if sibling_color != blank -%}
|
|
<input
|
|
type="hidden"
|
|
form="{{ product_form_id }}"
|
|
name="properties[{{ 'general.siblings.label' | t }}]"
|
|
value="{{ sibling_color }}"
|
|
>
|
|
{%- endif -%}
|
|
|
|
{%- for block in section.blocks -%}
|
|
{%- liquid
|
|
assign padding_bottom = block.settings.padding_bottom
|
|
assign bg_accent = block.settings.bg_color
|
|
assign icon_size = block.settings.icon_size
|
|
|
|
capture block_style
|
|
if padding_bottom
|
|
echo '--block-padding-bottom: ' | append: block.settings.padding_bottom | append: 'px;'
|
|
endif
|
|
|
|
if block.type == 'upsell' or block.type == 'complementary-products'
|
|
unless bg_accent == 'rgba(0,0,0,0)' or bg_accent == blank
|
|
echo '--bg-accent: ' | append: bg_accent | append: ';'
|
|
endunless
|
|
endif
|
|
|
|
if icon_size
|
|
echo '--icon-size:' | append: icon_size | append: 'px;'
|
|
endif
|
|
|
|
if block.type == 'countdown'
|
|
assign bg_color = block.settings.bg_color
|
|
assign text_color = block.settings.color
|
|
|
|
unless bg_color == 'rgba(0,0,0,0)' or bg_color == blank
|
|
echo '--bg: ' | append: bg_color | append: ';'
|
|
echo '--countdown-padding: ' | append: 'var(--inner);'
|
|
endunless
|
|
|
|
unless text_color == 'rgba(0,0,0,0)' or text_color == blank
|
|
echo '--text: ' | append: text_color | append: ';'
|
|
endunless
|
|
endif
|
|
endcapture
|
|
|
|
if block_style != blank
|
|
assign block_style = 'style="' | append: block_style | append: '"'
|
|
endif
|
|
-%}
|
|
|
|
{%- case block.type -%}
|
|
{%- when '@app' -%}
|
|
{%- render block -%}
|
|
|
|
{%- when 'title' -%}
|
|
{%- render 'product-title',
|
|
product: product,
|
|
block: block,
|
|
block_style: block_style,
|
|
is_title_linked: is_title_linked
|
|
-%}
|
|
|
|
{%- when 'price' -%}
|
|
{%- render 'product-price',
|
|
product: product,
|
|
unique: unique,
|
|
block: block,
|
|
block_style: block_style
|
|
-%}
|
|
|
|
{%- when 'variants' -%}
|
|
{%- render 'product-variant-options',
|
|
product: product,
|
|
unique: unique,
|
|
block: block,
|
|
block_style: block_style,
|
|
product_form_id: product_form_id,
|
|
enable_size_chart: true
|
|
-%}
|
|
|
|
{%- when 'buttons' -%}
|
|
{%- render 'product-buttons',
|
|
product: product,
|
|
current_variant: current_variant,
|
|
unique: unique,
|
|
block: block,
|
|
block_style: block_style,
|
|
product_form_id: product_form_id,
|
|
preorder: preorder
|
|
-%}
|
|
|
|
{%- when 'description' -%}
|
|
{%- render 'product-description', product: product, block: block, block_style: block_style -%}
|
|
|
|
{%- when 'tab_richtext' -%}
|
|
{%- render 'product-description', product: product, block: block, block_style: block_style -%}
|
|
|
|
{%- when 'accordion' -%}
|
|
{%- render 'product-description', product: product, block: block, block_style: block_style -%}
|
|
|
|
{%- when 'inventory_countdown' -%}
|
|
{%- render 'product-inventory', product: product, block: block, block_style: block_style -%}
|
|
|
|
{%- when 'upsell' -%}
|
|
{%- liquid
|
|
assign upsell_product = product.metafields.theme.upsell.value | default: block.settings.upsell_product
|
|
assign upsell_product_list = product.metafields.theme.upsell_list.value | default: block.settings.upsell_product_list
|
|
assign slider_enabled = false
|
|
assign block_tag = 'div'
|
|
|
|
if block.settings.layout == 'slider'
|
|
assign slider_enabled = true
|
|
assign block_tag = 'slider-component'
|
|
assign dots_style = settings.dots_style
|
|
assign autoplay_speed = false
|
|
assign autoplay = block.settings.autoplay
|
|
|
|
if autoplay
|
|
assign autoplay_speed = block.settings.autoplay_speed | times: 1000
|
|
endif
|
|
endif
|
|
-%}
|
|
|
|
{%- if upsell_product != blank or upsell_product_list != blank or request.design_mode -%}
|
|
{%- assign upsell_title = 'products.general.upsell_title' | t -%}
|
|
|
|
{%- capture upsell_products -%}
|
|
{%- if upsell_product == blank and upsell_product_list == blank -%}
|
|
{%- render 'upsell-product' -%}
|
|
{%- else -%}
|
|
{%- if upsell_product != blank -%}
|
|
{%- render 'upsell-product', upsell_product: upsell_product, show_available_upsell_only: block.settings.show_available_upsell_only, slider_enabled: slider_enabled, is_product_block: true -%}
|
|
{%- endif -%}
|
|
|
|
{%- if upsell_product_list != blank -%}
|
|
{%- for upsell_product in upsell_product_list -%}
|
|
{%- render 'upsell-product', upsell_product: upsell_product, show_available_upsell_only: block.settings.show_available_upsell_only, slider_enabled: slider_enabled, is_product_block: true -%}
|
|
{%- endfor -%}
|
|
{%- endif -%}
|
|
{%- endif -%}
|
|
{%- endcapture -%}
|
|
|
|
{%- if upsell_products != blank -%}
|
|
<div
|
|
class="product__block upsell-products block-padding"
|
|
{{ block.shopify_attributes }}
|
|
{{ block_style }}
|
|
>
|
|
<p class="product-upsell__holder__title">{{ upsell_title }}</p>
|
|
<{{ block_tag }}
|
|
class="product__upsell product__upsell--{{ block.settings.layout }}"
|
|
{% if slider_enabled %}
|
|
data-slider
|
|
data-dots="{{ dots_style }}"
|
|
data-options='{"autoPlay": {{ autoplay_speed }}, "prevNextButtons": false }'
|
|
{% endif %}
|
|
{{ block.shopify_attributes }}
|
|
{{ block_style }}
|
|
>
|
|
{{ upsell_products }}
|
|
</{{ block_tag }}>
|
|
</div>
|
|
{%- endif -%}
|
|
{%- endif -%}
|
|
|
|
{%- when 'complementary-products' -%}
|
|
{%- liquid
|
|
assign slider_enabled = false
|
|
|
|
if block.settings.layout == 'slider'
|
|
assign slider_enabled = true
|
|
assign dots_style = settings.dots_style
|
|
assign autoplay_speed = false
|
|
assign autoplay = block.settings.autoplay
|
|
|
|
if autoplay
|
|
assign autoplay_speed = block.settings.autoplay_speed | times: 1000
|
|
endif
|
|
endif
|
|
-%}
|
|
<div
|
|
class="product__block product__complementary block-padding"
|
|
{{ block.shopify_attributes }}
|
|
{{ block_style }}
|
|
>
|
|
{%- assign complementary_products_title = 'products.general.complementary_products_title' | t -%}
|
|
{%- if complementary_products_title != blank -%}
|
|
<p class="complementary-products__title">{{ complementary_products_title }}</p>
|
|
{%- endif -%}
|
|
|
|
<complementary-products
|
|
class="complementary-products"
|
|
data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ product.id }}&limit=10&intent=complementary"
|
|
>
|
|
{%- if slider_enabled -%}
|
|
<slider-component
|
|
data-dots="{{ dots_style }}"
|
|
data-options='{"autoPlay": {{ autoplay_speed }}, "prevNextButtons": false }'
|
|
>
|
|
{%- endif -%}
|
|
|
|
{%- if recommendations.performed and recommendations.products_count > 0 -%}
|
|
{%- for product in recommendations.products limit: block.settings.complementary_limit -%}
|
|
{%- render 'upsell-product', upsell_product: product, slider_enabled: slider_enabled -%}
|
|
{%- endfor -%}
|
|
{%- endif -%}
|
|
|
|
{%- if slider_enabled -%}
|
|
</slider-component>
|
|
{%- endif -%}
|
|
</complementary-products>
|
|
</div>
|
|
|
|
<script src="{{ 'complementary-products.js' | asset_url }}" defer="defer"></script>
|
|
|
|
{%- when 'pickup' -%}
|
|
<pickup-availability
|
|
class="product__block product__pickup block-padding"
|
|
data-store-availability-container="{{ current_variant.id }}"
|
|
{{ block.shopify_attributes }}
|
|
{{ block_style }}
|
|
></pickup-availability>
|
|
|
|
<script src="{{ 'pickup-availability.js' | asset_url }}" defer="defer"></script>
|
|
|
|
{%- when 'code' -%}
|
|
<div
|
|
class="product__block product__custom-code block-padding"
|
|
{{ block_style }}
|
|
{{ block.shopify_attributes }}
|
|
>
|
|
{{ block.settings.code }}
|
|
</div>
|
|
|
|
{%- when 'siblings' -%}
|
|
{%- render 'product-siblings',
|
|
product: product,
|
|
product_form_id: product_form_id,
|
|
block: block,
|
|
block_style: block_style,
|
|
quick_add_product: false
|
|
-%}
|
|
|
|
{%- when 'text' -%}
|
|
{%- render 'product-block-text', block: block, block_style: block_style -%}
|
|
|
|
{%- when 'icon' -%}
|
|
{%- render 'icon', block: block, index: forloop.index0, is_product: true -%}
|
|
|
|
{%- when 'sharing' -%}
|
|
<div class="product__block block-padding" {{ block.shopify_attributes }} {{ block_style }}>
|
|
{%- assign share_url = current_variant.url | prepend: request.origin -%}
|
|
{%- render 'share-button', share_url: share_url -%}
|
|
</div>
|
|
|
|
{%- when 'divider' -%}
|
|
{%- render 'divider', block: block, modifier: 'product__block product__block--divider' -%}
|
|
|
|
{%- when 'line-item' -%}
|
|
{%- render 'product-properties',
|
|
product: product,
|
|
block: block,
|
|
block_style: block_style,
|
|
unique: unique,
|
|
product_form_id: product_form_id
|
|
-%}
|
|
|
|
{%- when 'features' -%}
|
|
{%- liquid
|
|
assign block_id = block.id
|
|
assign text = block.settings.text
|
|
assign title = block.settings.title
|
|
assign prev_index = forloop.index0 | minus: 1
|
|
assign next_index = forloop.index0 | plus: 1
|
|
assign prev_block = section.blocks[prev_index]
|
|
assign next_block = section.blocks[next_index]
|
|
assign image = block.settings.icon_alt
|
|
assign bg_color = block.settings.bg_color
|
|
assign text_color = block.settings.color
|
|
|
|
comment
|
|
Always force dots style to be "line" except if "Circle" is chosen from the global settings
|
|
endcomment
|
|
assign dots_style = 'line'
|
|
if settings.dots_style == 'circle'
|
|
assign dots_style = 'circle'
|
|
endif
|
|
|
|
capture style
|
|
if bg_color != 'rgba(0,0,0,0)' and bg_color != blank
|
|
echo '--bg-accent: ' | append: bg_color | append: ';'
|
|
endif
|
|
|
|
if text_color != 'rgba(0,0,0,0)' and text_color != blank
|
|
echo '--text: ' | append: text_color | append: ';'
|
|
endif
|
|
endcapture
|
|
-%}
|
|
|
|
{%- if forloop.index0 == 0 or prev_block.type != 'features' -%}
|
|
<slider-component
|
|
class="product__block product__features block-padding"
|
|
{{ block_style }}
|
|
data-slider
|
|
data-slider-fullwidth
|
|
data-dots="{{ dots_style }}"
|
|
data-options='{"pageDots": true, "adaptiveHeight": true, "autoPlay": false, "prevNextButtons": false, "fade": false, "draggable": ">1"}'
|
|
>
|
|
{%- endif -%}
|
|
|
|
<div
|
|
class="product__feature"
|
|
data-slide="{{ block_id }}"
|
|
{% if style != blank %}
|
|
style="{{ style }}"
|
|
{% endif %}
|
|
{{ block.shopify_attributes }}
|
|
>
|
|
<div class="product__feature__content">
|
|
<div class="block__icon__container product__feature__heading">
|
|
{%- assign icon_size = block.settings.icon_size -%}
|
|
<div class="block__icon" style="--icon-size: {{ icon_size }}px;">
|
|
{%- liquid
|
|
if image
|
|
assign icon_width = icon_size
|
|
assign icon_width_retina = icon_width | times: 2
|
|
assign icon_sizes = icon_width | append: 'px'
|
|
assign icon_widths = icon_width | append: ', ' | append: icon_width_retina
|
|
render 'image', image: image, width: icon_width_retina, sizes: icon_sizes, widths: icon_widths, show_backfill: false
|
|
else
|
|
render 'animated-icon', filename: block.settings.icon_name
|
|
endif
|
|
-%}
|
|
</div>
|
|
|
|
{%- if title != blank -%}
|
|
<div class="block__icon__text {{ block.settings.text_font_size }}">
|
|
<p>{{ title }}</p>
|
|
</div>
|
|
{%- endif -%}
|
|
</div>
|
|
|
|
{%- if text != blank -%}
|
|
<div class="rte">
|
|
{{ text }}
|
|
</div>
|
|
{%- endif -%}
|
|
</div>
|
|
</div>
|
|
|
|
{%- if forloop.index == section.blocks.size or next_block.type != 'features' -%}
|
|
</slider-component>
|
|
{%- endif -%}
|
|
|
|
{%- when 'popup' -%}
|
|
{%- render 'product-popup', block: block -%}
|
|
|
|
{%- when 'badges' -%}
|
|
<div
|
|
class="product__block product__badges block-padding"
|
|
{{ block.shopify_attributes }}
|
|
{{ block_style }}
|
|
>
|
|
{%- if badge != '' and block.settings.product_badges -%}
|
|
<span class="badge-box">{{ badge }}</span>
|
|
{%- endif -%}
|
|
|
|
{%- if preorder and sold_out == false and block.settings.product_badges -%}
|
|
<span class="preorder-box">{{ 'products.product.pre_order' | t }}</span>
|
|
{%- endif -%}
|
|
|
|
{%- if on_sale and sold_out == false and block.settings.sale_badge -%}
|
|
<span class="sale-box">{{ 'products.product.on_sale' | t }}</span>
|
|
{%- endif -%}
|
|
</div>
|
|
|
|
{%- when 'countdown' -%}
|
|
{%- assign layout = block.settings.text_align -%}
|
|
|
|
<div
|
|
class="product__block countdown-block block-padding flex-column {{ layout }}"
|
|
{{ block_style }}
|
|
data-countdown-block
|
|
{{ block.shopify_attributes }}
|
|
>
|
|
<div class="countdown-block__text {{ block.settings.heading_font_size }}">
|
|
{%- if block.settings.text != blank -%}
|
|
{{ block.settings.text }}
|
|
{%- endif -%}
|
|
</div>
|
|
|
|
<div class="countdown-block__timer">
|
|
{%- render 'countdown-timer',
|
|
digits_font_size: block.settings.digits_font_size,
|
|
text_font_size: block.settings.text_font_size,
|
|
end_date: block.settings.end_date,
|
|
end_time: block.settings.end_time,
|
|
period: block.settings.period,
|
|
end_message: block.settings.end_message,
|
|
hide_on_complete: block.settings.hide_on_complete
|
|
-%}
|
|
</div>
|
|
</div>
|
|
|
|
{%- when 'sku' -%}
|
|
<div
|
|
class="product__block product__sku block-padding"
|
|
{{ block_style }}
|
|
data-variant-sku
|
|
{{ block.shopify_attributes }}
|
|
>
|
|
{{ 'products.product.sku' | t }}: {{ current_variant.sku }}
|
|
</div>
|
|
|
|
{%- when 'fit-guide' -%}
|
|
{%- liquid
|
|
assign fit_color = block.settings.fit_color
|
|
unless fit_color.alpha == 0.0 or fit_color == blank
|
|
capture style
|
|
echo '--text:' | append: fit_color
|
|
endcapture
|
|
endunless
|
|
-%}
|
|
|
|
<div
|
|
class="product__block product__guide guide block-padding"
|
|
{{ block.shopify_attributes }}
|
|
{{ block_style }}
|
|
>
|
|
{%- if block.settings.heading != blank -%}
|
|
<p class="guide__heading strong">{{ block.settings.heading }}</p>
|
|
{%- endif -%}
|
|
|
|
<div class="guide__line" style="{{ style }}">
|
|
{%- assign selected_segment = block.settings.selected_segment | plus: 0 -%}
|
|
{%- for idx in (1..5) -%}
|
|
<span
|
|
{% if forloop.index == selected_segment %}
|
|
class="is-active"
|
|
{% endif %}
|
|
>
|
|
{{- forloop.index -}}
|
|
</span>
|
|
{%- endfor -%}
|
|
</div>
|
|
|
|
{%- if block.settings.left_label != blank
|
|
or block.settings.middle_label != blank
|
|
or block.settings.right_label != blank
|
|
-%}
|
|
<div class="guide__content{% unless block.settings.left_label != blank %} guide__content--skip-left{% endunless %}{% unless block.settings.right_label != blank %} guide__content--skip-right{% endunless %}">
|
|
{%- if block.settings.left_label != blank -%}
|
|
<small class="guide__left">{{ block.settings.left_label }}</small>
|
|
{%- endif -%}
|
|
|
|
{%- if block.settings.middle_label != blank -%}
|
|
<small class="guide__middle">{{ block.settings.middle_label }}</small>
|
|
{%- endif -%}
|
|
|
|
{%- if block.settings.right_label != blank -%}
|
|
<small class="guide__right">{{ block.settings.right_label }}</small>
|
|
{%- endif -%}
|
|
</div>
|
|
{%- endif -%}
|
|
</div>
|
|
{%- endcase -%}
|
|
{%- endfor -%}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</{{ wrapper_tag }}>
|
|
|
|
{% unless product == empty %}
|
|
<script type="application/json" data-product-json>
|
|
{{ product | json }}
|
|
</script>
|
|
<script type="application/json" id="ModelJSON-{{ unique }}">
|
|
{{ product.media | where: 'media_type', 'model' | json }}
|
|
</script>
|
|
|
|
{%- liquid
|
|
assign metafields_data = '['
|
|
for variant in product.variants
|
|
assign metafield_value = variant.metafields.theme.final_sale.value | replace: '"', "''"
|
|
assign metafields_data = metafields_data | append: '{"variant_id":"' | append: variant.id | append: '" , "metafield_value":"' | append: metafield_value | append: '"},'
|
|
endfor
|
|
assign metafields_data = metafields_data | append: ']'
|
|
assign metafields_data = metafields_data | replace: ',]', ']'
|
|
-%}
|
|
|
|
<span data-variant-final-sale-metafield style="display:none;">{{ metafields_data }}</span>
|
|
{% endunless %}
|
|
|
|
{% comment %} Google wants to know when to check your price again {% endcomment %}
|
|
|
|
{%- liquid
|
|
assign days_price_is_valid = 1
|
|
assign seconds_in_a_day = 86400
|
|
assign seconds_price_valid = days_price_is_valid | times: seconds_in_a_day
|
|
|
|
if product.selected_or_first_available_variant.featured_media
|
|
assign seo_media = product.selected_or_first_available_variant.featured_media
|
|
else
|
|
assign seo_media = product.featured_media
|
|
endif
|
|
-%}
|
|
|
|
{%- if show_cart_bar -%}
|
|
{%- render 'cart-bar', product: product -%}
|
|
{%- endif -%}
|
|
</product-component>
|
|
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "http://schema.org/",
|
|
"@type": "Product",
|
|
"name": {{ product.title | json }},
|
|
"url": {{ request.origin | append: product.url | json }},
|
|
{% if seo_media -%}
|
|
"image": [
|
|
{{ seo_media | image_url: width: 1920 | prepend: "https:" | json }}
|
|
],
|
|
{%- endif %}
|
|
"description": {{ product.description | strip_html | json }},
|
|
{%- if current_variant.sku != blank -%}
|
|
"sku": {{ current_variant.sku | json }},
|
|
{%- endif -%}
|
|
"brand": {
|
|
"@type": "Organization",
|
|
"name": {{ product.vendor | json }}
|
|
},
|
|
"offers": [
|
|
{%- for variant in product.variants -%}
|
|
{
|
|
"@type" : "Offer",
|
|
{%- if variant.sku != blank -%}
|
|
"sku": {{ variant.sku | json }},
|
|
{%- endif -%}
|
|
{%- if variant.barcode.size == 12 -%}
|
|
"gtin12": {{ variant.barcode }},
|
|
{%- endif -%}
|
|
{%- if variant.barcode.size == 13 -%}
|
|
"gtin13": {{ variant.barcode }},
|
|
{%- endif -%}
|
|
{%- if variant.barcode.size == 14 -%}
|
|
"gtin14": {{ variant.barcode }},
|
|
{%- endif -%}
|
|
"availability" : "http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}",
|
|
"price" : {{ variant.price | divided_by: 100.00 | json }},
|
|
"priceCurrency" : {{ cart.currency.iso_code | json }},
|
|
"priceValidUntil": "{{ 'now' | date: '%s' | plus: seconds_price_valid | date: '%Y-%m-%d' }}",
|
|
"url" : {{ request.origin | append: variant.url | json }}
|
|
}{% unless forloop.last %},{% endunless %}
|
|
{%- endfor -%}
|
|
]
|
|
}
|
|
</script>
|
|
|
|
{% schema %}
|
|
{
|
|
"name": "Product pages",
|
|
"class": "section-overlay-header",
|
|
"settings": [
|
|
{
|
|
"type": "header",
|
|
"content": "Layout"
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "product_sticky_enable",
|
|
"label": "Enable sticky form",
|
|
"default": true
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "variant_image_scroll",
|
|
"label": "Enable product image variant scroll",
|
|
"info": "Clicking a variant scrolls user to assigned image",
|
|
"default": true
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "show_cart_bar",
|
|
"label": "Enable cart bar",
|
|
"default": true
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Media",
|
|
"info": "Learn more about [media types](https://help.shopify.com/manual/products/product-media)"
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "enable_zoom",
|
|
"label": "Enable zoom",
|
|
"default": true
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "enable_video_looping",
|
|
"label": "Enable video looping",
|
|
"default": false
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Desktop"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "image_layout",
|
|
"label": "Product gallery",
|
|
"default": "stacked",
|
|
"options": [
|
|
{"value": "thumbnails", "label": "Thumbnails - Bottom"},
|
|
{"value": "thumbnails-left", "label": "Thumbnails - Left"},
|
|
{"value": "stacked", "label": "Stacked"},
|
|
{"value": "grid-1", "label": "Mosaic"},
|
|
{"value": "grid-2", "label": "Grid"}
|
|
],
|
|
"info": "Desktop only"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "image_size",
|
|
"label": "Image size",
|
|
"options": [
|
|
{
|
|
"value": "small",
|
|
"label": "Small"
|
|
},
|
|
{
|
|
"value": "normal",
|
|
"label": "Normal"
|
|
},
|
|
{
|
|
"value": "stretch",
|
|
"label": "Stretch - No thumbnails"
|
|
}
|
|
],
|
|
"default": "normal"
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Mobile"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "mobile_image_style",
|
|
"label": "Product gallery",
|
|
"options": [
|
|
{
|
|
"value": "thumbs",
|
|
"label": "Thumbnails"
|
|
},
|
|
{
|
|
"value": "slider",
|
|
"label": "Slider"
|
|
}
|
|
],
|
|
"default": "thumbs"
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Colors"
|
|
},
|
|
{
|
|
"type": "color_scheme",
|
|
"id": "color_scheme",
|
|
"default": "scheme_1",
|
|
"label": "Color scheme"
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Padding"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_top",
|
|
"min": 0,
|
|
"max": 100,
|
|
"step": 1,
|
|
"unit": "px",
|
|
"label": "Top",
|
|
"default": 90
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_bottom",
|
|
"min": 0,
|
|
"max": 100,
|
|
"step": 1,
|
|
"unit": "px",
|
|
"label": "Bottom",
|
|
"default": 30
|
|
}
|
|
],
|
|
"blocks": [
|
|
{
|
|
"type": "@app"
|
|
},
|
|
{
|
|
"type": "title",
|
|
"name": "Title",
|
|
"limit": 1,
|
|
"settings": [
|
|
{
|
|
"type": "select",
|
|
"id": "subheading_option",
|
|
"label": "Navigation",
|
|
"default": "none",
|
|
"options": [
|
|
{"value": "none", "label": "None"},
|
|
{"value": "breadcrumb", "label": "Breadcrumb"},
|
|
{"value": "collection", "label": "Collection"},
|
|
{"value": "vendor", "label": "Vendor"}
|
|
]
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "heading_font_size",
|
|
"label": "Heading size",
|
|
"default": "heading-medium",
|
|
"options": [
|
|
{"value": "heading-mini", "label": "Mini"},
|
|
{"value": "heading-x-small", "label": "Extra small"},
|
|
{"value": "heading-small", "label": "Small"},
|
|
{"value": "heading-medium", "label": "Medium"},
|
|
{"value": "heading-large", "label": "Large"},
|
|
{"value": "heading-x-large", "label": "Extra large"}
|
|
]
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Padding"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_bottom",
|
|
"min": 0,
|
|
"max": 50,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"label": "Bottom",
|
|
"default": 8
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "price",
|
|
"name": "Price",
|
|
"limit": 1,
|
|
"settings": [
|
|
{
|
|
"type": "select",
|
|
"id": "text_font_size",
|
|
"label": "Text size",
|
|
"info": "Automatically generated by the base size.",
|
|
"default": "body-medium",
|
|
"options": [
|
|
{"value": "body-x-small", "label": "Extra small"},
|
|
{"value": "body-small", "label": "Small"},
|
|
{"value": "body-medium", "label": "Medium"},
|
|
{"value": "body-large", "label": "Large"},
|
|
{"value": "body-x-large", "label": "Extra large"}
|
|
]
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Padding"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_bottom",
|
|
"min": 0,
|
|
"max": 50,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"label": "Bottom",
|
|
"default": 16
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "variants",
|
|
"name": "Variant picker",
|
|
"limit": 1,
|
|
"settings": [
|
|
{
|
|
"type": "header",
|
|
"content": "Size chart"
|
|
},
|
|
{
|
|
"type": "page",
|
|
"id": "info_page",
|
|
"label": "Page",
|
|
"info": "[Learn more](https://broadcast.invisiblethemes.com/products/product-pages/size-charts)"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "size_chart_style",
|
|
"label": "Style",
|
|
"default": "text",
|
|
"options": [
|
|
{"value": "text", "label": "Text"},
|
|
{"value": "ruler", "label": "Ruler"},
|
|
{"value": "question", "label": "Question mark"}
|
|
]
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Subscriptions",
|
|
"info": "Learn more about [subscriptions](https://help.shopify.com/en/manual/products/subscriptions)"
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "subscriptions_enable_selectors",
|
|
"label": "Enable subscription selectors",
|
|
"info": "Shown on products with subscription options",
|
|
"default": false
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Padding"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_bottom",
|
|
"min": 0,
|
|
"max": 50,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"label": "Bottom",
|
|
"default": 16
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "buttons",
|
|
"name": "Buy buttons",
|
|
"limit": 1,
|
|
"settings": [
|
|
{
|
|
"type": "checkbox",
|
|
"id": "show_quantity",
|
|
"label": "Show quantity selector",
|
|
"default": true
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Add to cart button"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "button_type",
|
|
"label": "Color",
|
|
"default": "btn--primary",
|
|
"options": [
|
|
{"value": "btn--black", "label": "Black"},
|
|
{"value": "btn--white", "label": "White"},
|
|
{"value": "btn--primary", "label": "Primary"},
|
|
{"value": "btn--secondary", "label": "Secondary"}
|
|
]
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "button_style",
|
|
"label": "Style",
|
|
"default": "btn--solid",
|
|
"options": [
|
|
{"label": "Solid", "value": "btn--solid"},
|
|
{"label": "Outline", "value": "btn--outline"}
|
|
]
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Dynamic checkout button"
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "show_payment_button",
|
|
"label": "Show dynamic checkout buttons",
|
|
"info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/en/manual/online-store/os/dynamic-checkout)",
|
|
"default": true
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "button_type_dynamic",
|
|
"label": "Color",
|
|
"default": "btn--secondary",
|
|
"options": [
|
|
{"value": "btn--black", "label": "Black"},
|
|
{"value": "btn--white", "label": "White"},
|
|
{"value": "btn--primary", "label": "Primary"},
|
|
{"value": "btn--secondary", "label": "Secondary"}
|
|
]
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "button_style_dynamic",
|
|
"label": "Style",
|
|
"default": "btn--solid",
|
|
"options": [
|
|
{"label": "Solid", "value": "btn--solid"},
|
|
{"label": "Outline", "value": "btn--outline"}
|
|
]
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Gift card"
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "show_gift_card_recipient",
|
|
"label": "Show recipient information form for gift card products",
|
|
"default": false,
|
|
"info": "Gift card products can optionally be sent direct to a recipient along with a personal message."
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Padding"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_bottom",
|
|
"min": 0,
|
|
"max": 50,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"label": "Bottom",
|
|
"default": 32
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "siblings",
|
|
"name": "Siblings",
|
|
"limit": 1,
|
|
"settings": [
|
|
{
|
|
"type": "paragraph",
|
|
"content": "Siblings allow you to split colors into separate products. [Learn more](https://broadcast.invisiblethemes.com/siblings/product-siblings/about-product-siblings)"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "siblings_collection",
|
|
"label": "Product siblings collection handle",
|
|
"info": "Use a metafield containing a collection handle for color siblings. The collection should contain all color options as unique products."
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "sibling_color",
|
|
"label": "Product color metafield",
|
|
"info": "Use a single line text metafield called 'theme.sibling_color' for product color."
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Padding"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_bottom",
|
|
"min": 0,
|
|
"max": 50,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"label": "Bottom",
|
|
"default": 16
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "description",
|
|
"name": "Description",
|
|
"limit": 1,
|
|
"settings": [
|
|
{
|
|
"type": "checkbox",
|
|
"id": "show_read_more",
|
|
"label": "Show read more button",
|
|
"default": true
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Padding"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_bottom",
|
|
"min": 0,
|
|
"max": 50,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"label": "Bottom",
|
|
"default": 0
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "tab_richtext",
|
|
"name": "Tabs",
|
|
"limit": 1,
|
|
"settings": [
|
|
{
|
|
"type": "checkbox",
|
|
"id": "show_description",
|
|
"label": "Show description",
|
|
"default": true
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "show_read_more",
|
|
"label": "Show read more button",
|
|
"default": false
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "title_1",
|
|
"label": "Tab heading",
|
|
"default": "Tab"
|
|
},
|
|
{
|
|
"type": "richtext",
|
|
"id": "raw_content_1",
|
|
"label": "Tab text",
|
|
"default": "<p>This content type will accept <strong>rich text</strong> to help with adding styles and links to additional pages or content. Use this to add supplementary information to help your buyers.</p>"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "title_2",
|
|
"label": "Tab heading",
|
|
"default": "Info"
|
|
},
|
|
{
|
|
"type": "richtext",
|
|
"id": "raw_content_2",
|
|
"label": "Tab text",
|
|
"default": "<p>You can use product metafields to assign content to this tab that is unique to an individual product. Use tabs to highlight unique features, sizing information, or other sales information.</p>"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "title_3",
|
|
"label": "Tab heading"
|
|
},
|
|
{
|
|
"type": "richtext",
|
|
"id": "raw_content_3",
|
|
"label": "Tab text"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "title_4",
|
|
"label": "Tab heading"
|
|
},
|
|
{
|
|
"type": "richtext",
|
|
"id": "raw_content_4",
|
|
"label": "Tab text"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "title_5",
|
|
"label": "Tab heading"
|
|
},
|
|
{
|
|
"type": "richtext",
|
|
"id": "raw_content_5",
|
|
"label": "Tab text"
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Padding"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_bottom",
|
|
"min": 0,
|
|
"max": 50,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"label": "Bottom",
|
|
"default": 0
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "accordion",
|
|
"name": "Accordion",
|
|
"settings": [
|
|
{
|
|
"type": "checkbox",
|
|
"id": "show_description",
|
|
"label": "Show description",
|
|
"default": false
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "show_read_more",
|
|
"label": "Show read more button",
|
|
"default": true
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "default_open",
|
|
"label": "Open by default",
|
|
"default": false
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "heading",
|
|
"label": "Heading",
|
|
"default": "Accordion"
|
|
},
|
|
{
|
|
"type": "richtext",
|
|
"id": "text",
|
|
"label": "Text",
|
|
"default": "<p>This content type will accept <strong>rich text</strong> to help with adding styles and links to additional pages or content. Use this to add supplementary information to help your buyers.</p>"
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Padding"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_bottom",
|
|
"min": 0,
|
|
"max": 50,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"label": "Bottom",
|
|
"default": 0
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "upsell",
|
|
"name": "Upsell",
|
|
"limit": 1,
|
|
"settings": [
|
|
{
|
|
"type": "product",
|
|
"id": "upsell_product",
|
|
"label": "Single product"
|
|
},
|
|
{
|
|
"type": "product_list",
|
|
"id": "upsell_product_list",
|
|
"label": "Product list",
|
|
"limit": 3,
|
|
"info": "Choose up to 3 upsell products"
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "show_available_upsell_only",
|
|
"label": "Show only items in stock",
|
|
"default": false
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "layout",
|
|
"label": "Layout",
|
|
"info": "Enable pagination styles under Layout > Appearance",
|
|
"options": [
|
|
{"value": "stacked", "label": "Stacked"},
|
|
{"value": "slider", "label": "Slider"}
|
|
]
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Slider"
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "autoplay",
|
|
"label": "Auto-rotate slides",
|
|
"default": false
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "autoplay_speed",
|
|
"min": 4,
|
|
"max": 15,
|
|
"step": 1,
|
|
"unit": "sec",
|
|
"label": "Change slides every",
|
|
"default": 8
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Cart"
|
|
},
|
|
{
|
|
"type": "paragraph",
|
|
"content": "Use a dynamic source with the metafield 'theme.upsell' for single product or 'theme.upsell_list' for product list to allow product upsells to follow users into the cart. Use any other name to limit this feature to the product page. [Learn more](https://broadcast.invisiblethemes.com/products/upselling)"
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Colors"
|
|
},
|
|
{
|
|
"type": "paragraph",
|
|
"content": "Overrides color scheme. Set to Transparent to revert back to using color schemes."
|
|
},
|
|
{
|
|
"type": "color",
|
|
"id": "bg_color",
|
|
"label": "Background"
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Padding"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_bottom",
|
|
"min": 0,
|
|
"max": 50,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"label": "Bottom",
|
|
"default": 16
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "inventory_countdown",
|
|
"name": "Inventory countdown",
|
|
"limit": 1,
|
|
"settings": [
|
|
{
|
|
"type": "select",
|
|
"id": "show_notice",
|
|
"label": "Show notice",
|
|
"default": "low-inventory",
|
|
"options": [
|
|
{"label": "Always", "value": "always"},
|
|
{"label": "Low inventory", "value": "low-inventory"}
|
|
]
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "max_inventory",
|
|
"label": "Low inventory threshold",
|
|
"min": 1,
|
|
"max": 50,
|
|
"step": 1,
|
|
"default": 10
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "hide_inventory_counter",
|
|
"label": "Hide inventory counter",
|
|
"default": true
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "icon_size",
|
|
"label": "Icon size",
|
|
"unit": "px",
|
|
"min": 20,
|
|
"max": 80,
|
|
"step": 5,
|
|
"default": 20
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Colors"
|
|
},
|
|
{
|
|
"type": "color",
|
|
"id": "in_stock_color",
|
|
"label": "In stock",
|
|
"default": "#56AD6A"
|
|
},
|
|
{
|
|
"type": "color",
|
|
"id": "low_stock_color",
|
|
"label": "Low stock",
|
|
"default": "#f79554"
|
|
},
|
|
{
|
|
"type": "color",
|
|
"id": "out_of_stock_color",
|
|
"label": "Out of stock",
|
|
"default": "#721C24"
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Padding"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_bottom",
|
|
"min": 0,
|
|
"max": 50,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"label": "Bottom",
|
|
"default": 16
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "sharing",
|
|
"name": "Sharing",
|
|
"limit": 1,
|
|
"settings": [
|
|
{
|
|
"type": "header",
|
|
"content": "Padding"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_bottom",
|
|
"min": 0,
|
|
"max": 50,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"label": "Bottom",
|
|
"default": 16
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "pickup",
|
|
"name": "Local pickup",
|
|
"limit": 1,
|
|
"settings": [
|
|
{
|
|
"type": "paragraph",
|
|
"content": "Show customers where they can pick up the product. [Learn more](https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/local-methods/local-pickup#show-pickup-availability-to-your-customers)"
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Padding"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_bottom",
|
|
"min": 0,
|
|
"max": 50,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"label": "Bottom",
|
|
"default": 32
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"name": "Text",
|
|
"settings": [
|
|
{
|
|
"type": "text",
|
|
"id": "title",
|
|
"label": "Heading",
|
|
"default": "Have questions?"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "heading_font_size",
|
|
"label": "Heading size",
|
|
"info": "Uses body font family and sizes.",
|
|
"default": "body-medium",
|
|
"options": [
|
|
{"value": "body-x-small", "label": "Extra small"},
|
|
{"value": "body-small", "label": "Small"},
|
|
{"value": "body-medium", "label": "Medium"},
|
|
{"value": "body-large", "label": "Large"},
|
|
{"value": "body-x-large", "label": "Extra large"}
|
|
]
|
|
},
|
|
{
|
|
"type": "richtext",
|
|
"id": "text",
|
|
"label": "Text",
|
|
"default": "<p>Get in touch with us at any time.</p>"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "text_font_size",
|
|
"label": "Text size",
|
|
"info": "Automatically generated by the base size.",
|
|
"default": "body-medium",
|
|
"options": [
|
|
{"value": "body-x-small", "label": "Extra small"},
|
|
{"value": "body-small", "label": "Small"},
|
|
{"value": "body-medium", "label": "Medium"},
|
|
{"value": "body-large", "label": "Large"},
|
|
{"value": "body-x-large", "label": "Extra large"}
|
|
]
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "text_alignment",
|
|
"label": "Text alignment",
|
|
"default": "text-left",
|
|
"options": [
|
|
{"value": "text-left", "label": "Left"},
|
|
{"value": "text-center", "label": "Centered"}
|
|
]
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "layout",
|
|
"label": "Layout",
|
|
"options": [
|
|
{
|
|
"value": "left",
|
|
"label": "Left"
|
|
},
|
|
{
|
|
"value": "inline",
|
|
"label": "In-line"
|
|
}
|
|
],
|
|
"default": "left"
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Padding"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_bottom",
|
|
"min": 0,
|
|
"max": 50,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"label": "Bottom",
|
|
"default": 16
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "code",
|
|
"name": "Custom code",
|
|
"settings": [
|
|
{
|
|
"type": "liquid",
|
|
"id": "code",
|
|
"label": "Custom code",
|
|
"info": "Add app snippets or other Liquid code to create advanced customizations."
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Padding"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_bottom",
|
|
"min": 0,
|
|
"max": 50,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"label": "Bottom",
|
|
"default": 16
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "icon",
|
|
"name": "Icon",
|
|
"settings": [
|
|
{
|
|
"type": "select",
|
|
"id": "icon_name",
|
|
"label": "Icon",
|
|
"default": "icon-award",
|
|
"options": [
|
|
{"label": "Award", "value": "icon-award"},
|
|
{"label": "Box", "value": "icon-box"},
|
|
{"label": "Chat", "value": "icon-chat"},
|
|
{"label": "Check", "value": "icon-check"},
|
|
{"label": "Check circle", "value": "icon-check-circle"},
|
|
{"label": "Cloud", "value": "icon-cloud"},
|
|
{"label": "Diameter", "value": "icon-diameter"},
|
|
{"label": "Discount", "value": "icon-discount"},
|
|
{"label": "Donation", "value": "icon-donation"},
|
|
{"label": "Droplet", "value": "icon-droplet"},
|
|
{"label": "Info", "value": "icon-info-empty"},
|
|
{"label": "Email", "value": "icon-email"},
|
|
{"label": "Fast shipment", "value": "icon-fast-shipment"},
|
|
{"label": "Flare", "value": "icon-flare"},
|
|
{"label": "Flower", "value": "icon-flower"},
|
|
{"label": "Gift", "value": "icon-gift"},
|
|
{"label": "Green shipment", "value": "icon-green-shipment"},
|
|
{"label": "Heart", "value": "icon-heart"},
|
|
{"label": "Leaf", "value": "icon-leaf"},
|
|
{"label": "Lightning", "value": "icon-lightning"},
|
|
{"label": "Location", "value": "icon-location"},
|
|
{"label": "Mail", "value": "icon-mail"},
|
|
{"label": "Notes", "value": "icon-notes"},
|
|
{"label": "Pants", "value": "icon-pants"},
|
|
{"label": "Peace", "value": "icon-peace"},
|
|
{"label": "Pin", "value": "icon-pin"},
|
|
{"label": "Planet", "value": "icon-planet"},
|
|
{"label": "Phone", "value": "icon-phone"},
|
|
{"label": "Recycle", "value": "icon-recycle"},
|
|
{"label": "Ruler", "value": "icon-ruler"},
|
|
{"label": "Shield", "value": "icon-shield"},
|
|
{"label": "Smile", "value": "icon-smile"},
|
|
{"label": "Star", "value": "icon-star"},
|
|
{"label": "Tree", "value": "icon-tree"},
|
|
{"label": "Trophy", "value": "icon-trophy"},
|
|
{"label": "Truck", "value": "icon-truck"},
|
|
{"label": "Vegan", "value": "icon-vegan"},
|
|
{"label": "Wash", "value": "icon-wash"},
|
|
{"label": "Washing machine", "value": "icon-washing-machine"}
|
|
]
|
|
},
|
|
{
|
|
"type": "image_picker",
|
|
"id": "image",
|
|
"label": "Alternative icon/image",
|
|
"info": "160 x 160px .svg recommended. [Learn more](https://invisiblethemes.com/link/broadcast/images)"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "icon_size",
|
|
"label": "Size",
|
|
"unit": "px",
|
|
"min": 20,
|
|
"max": 80,
|
|
"step": 5,
|
|
"default": 20
|
|
},
|
|
{
|
|
"type": "color",
|
|
"id": "icon_color",
|
|
"label": "Icon color"
|
|
},
|
|
{
|
|
"type": "richtext",
|
|
"id": "text",
|
|
"label": "Text",
|
|
"default": "<p>Title<\/p>"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "text_font_size",
|
|
"label": "Text size",
|
|
"info": "Automatically generated by the base size. Applies only when content in Text field is set to Paragraph.",
|
|
"default": "body-medium",
|
|
"options": [
|
|
{"value": "body-x-small", "label": "Extra small"},
|
|
{"value": "body-small", "label": "Small"},
|
|
{"value": "body-medium", "label": "Medium"},
|
|
{"value": "body-large", "label": "Large"},
|
|
{"value": "body-x-large", "label": "Extra large"}
|
|
]
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Layout"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "width",
|
|
"label": "Width",
|
|
"default": "full",
|
|
"options": [
|
|
{"label": "Full width", "value": "full"},
|
|
{"label": "Half", "value": "half"},
|
|
{"label": "One third", "value": "third"},
|
|
{"label": "One quarter", "value": "quarter"}
|
|
]
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Padding"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_bottom",
|
|
"min": 0,
|
|
"max": 50,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"label": "Bottom",
|
|
"default": 16
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "divider",
|
|
"name": "Divider",
|
|
"settings": [
|
|
{
|
|
"type": "checkbox",
|
|
"id": "show_line",
|
|
"label": "Show line",
|
|
"default": true
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_bottom",
|
|
"min": 0,
|
|
"max": 50,
|
|
"step": 1,
|
|
"unit": "px",
|
|
"label": "Bottom",
|
|
"default": 20
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "line-item",
|
|
"name": "Line item property",
|
|
"settings": [
|
|
{
|
|
"type": "text",
|
|
"id": "label",
|
|
"label": "Label",
|
|
"default": "Your label"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "type",
|
|
"label": "Type",
|
|
"default": "text",
|
|
"options": [
|
|
{"label": "Text", "value": "text"},
|
|
{"label": "Checkbox", "value": "checkbox"},
|
|
{"label": "Dropdown", "value": "dropdown"}
|
|
]
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Typography",
|
|
"info": "For Type set to \"Text\"."
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "required",
|
|
"label": "Required",
|
|
"default": true
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Checkbox",
|
|
"info": "For Type set to \"Checkbox\"."
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "checked_value",
|
|
"label": "Checked value",
|
|
"default": "Yes"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "unchecked_value",
|
|
"label": "Unchecked value",
|
|
"default": "No"
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Dropdown",
|
|
"info": "For Type set to \"Dropdown\"."
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "option_1",
|
|
"label": "Option 1",
|
|
"default": "Option 1"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "option_2",
|
|
"label": "Option 2",
|
|
"default": "Option 2"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "option_3",
|
|
"label": "Option 3",
|
|
"default": "Option 3"
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Padding"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_bottom",
|
|
"min": 0,
|
|
"max": 50,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"label": "Bottom",
|
|
"default": 16
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "features",
|
|
"name": "Feature",
|
|
"settings": [
|
|
{
|
|
"type": "select",
|
|
"id": "icon_name",
|
|
"label": "Icon",
|
|
"default": "icon-award",
|
|
"options": [
|
|
{"label": "Award", "value": "icon-award"},
|
|
{"label": "Box", "value": "icon-box"},
|
|
{"label": "Chat", "value": "icon-chat"},
|
|
{"label": "Check", "value": "icon-check"},
|
|
{"label": "Check circle", "value": "icon-check-circle"},
|
|
{"label": "Cloud", "value": "icon-cloud"},
|
|
{"label": "Diameter", "value": "icon-diameter"},
|
|
{"label": "Discount", "value": "icon-discount"},
|
|
{"label": "Donation", "value": "icon-donation"},
|
|
{"label": "Droplet", "value": "icon-droplet"},
|
|
{"label": "Info", "value": "icon-info-empty"},
|
|
{"label": "Email", "value": "icon-email"},
|
|
{"label": "Fast shipment", "value": "icon-fast-shipment"},
|
|
{"label": "Flare", "value": "icon-flare"},
|
|
{"label": "Flower", "value": "icon-flower"},
|
|
{"label": "Gift", "value": "icon-gift"},
|
|
{"label": "Green shipment", "value": "icon-green-shipment"},
|
|
{"label": "Heart", "value": "icon-heart"},
|
|
{"label": "Leaf", "value": "icon-leaf"},
|
|
{"label": "Lightning", "value": "icon-lightning"},
|
|
{"label": "Location", "value": "icon-location"},
|
|
{"label": "Mail", "value": "icon-mail"},
|
|
{"label": "Notes", "value": "icon-notes"},
|
|
{"label": "Pants", "value": "icon-pants"},
|
|
{"label": "Peace", "value": "icon-peace"},
|
|
{"label": "Pin", "value": "icon-pin"},
|
|
{"label": "Planet", "value": "icon-planet"},
|
|
{"label": "Phone", "value": "icon-phone"},
|
|
{"label": "Recycle", "value": "icon-recycle"},
|
|
{"label": "Ruler", "value": "icon-ruler"},
|
|
{"label": "Shield", "value": "icon-shield"},
|
|
{"label": "Smile", "value": "icon-smile"},
|
|
{"label": "Star", "value": "icon-star"},
|
|
{"label": "Tree", "value": "icon-tree"},
|
|
{"label": "Trophy", "value": "icon-trophy"},
|
|
{"label": "Truck", "value": "icon-truck"},
|
|
{"label": "Vegan", "value": "icon-vegan"},
|
|
{"label": "Wash", "value": "icon-wash"},
|
|
{"label": "Washing machine", "value": "icon-washing-machine"}
|
|
]
|
|
},
|
|
{
|
|
"type": "image_picker",
|
|
"id": "icon_alt",
|
|
"label": "Alternative icon/image",
|
|
"info": "160 x 160px .svg recommended. [Learn more](https://invisiblethemes.com/link/broadcast/images)"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "icon_size",
|
|
"label": "Size",
|
|
"unit": "px",
|
|
"min": 20,
|
|
"max": 80,
|
|
"step": 5,
|
|
"default": 20
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "title",
|
|
"label": "Heading",
|
|
"default": "Feature"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "text_font_size",
|
|
"label": "Text size",
|
|
"info": "Automatically generated by the base size. Applies only when content in Text field is set to Paragraph.",
|
|
"default": "body-medium",
|
|
"options": [
|
|
{"value": "body-x-small", "label": "Extra small"},
|
|
{"value": "body-small", "label": "Small"},
|
|
{"value": "body-medium", "label": "Medium"},
|
|
{"value": "body-large", "label": "Large"},
|
|
{"value": "body-x-large", "label": "Extra large"}
|
|
]
|
|
},
|
|
{
|
|
"type": "richtext",
|
|
"id": "text",
|
|
"label": "Text",
|
|
"default": "<p>This content type will accept <strong>rich text</strong> to help with adding styles and links to additional pages or content. Use this to add supplementary information to help your buyers.</p>"
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Colors"
|
|
},
|
|
{
|
|
"type": "paragraph",
|
|
"content": "Overrides color scheme. Set to Transparent to revert back to using color schemes."
|
|
},
|
|
{
|
|
"id": "bg_color",
|
|
"type": "color",
|
|
"label": "Background"
|
|
},
|
|
{
|
|
"type": "color",
|
|
"id": "color",
|
|
"label": "Text"
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Padding"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_bottom",
|
|
"min": 0,
|
|
"max": 50,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"label": "Bottom",
|
|
"default": 16
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "complementary-products",
|
|
"name": "Complementary products",
|
|
"limit": 1,
|
|
"settings": [
|
|
{
|
|
"type": "paragraph",
|
|
"content": "To select complementary products, add the Search & Discovery app. [Learn more](https://help.shopify.com/manual/online-store/search-and-discovery/product-recommendations)"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "complementary_limit",
|
|
"min": 1,
|
|
"max": 3,
|
|
"step": 1,
|
|
"label": "Number of products",
|
|
"default": 3
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "layout",
|
|
"label": "Layout",
|
|
"info": "Enable pagination styles under Layout > Appearance",
|
|
"options": [
|
|
{"value": "stacked", "label": "Stacked"},
|
|
{"value": "slider", "label": "Slider"}
|
|
]
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Slider"
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "autoplay",
|
|
"label": "Auto-rotate slides",
|
|
"default": false
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "autoplay_speed",
|
|
"min": 4,
|
|
"max": 15,
|
|
"step": 1,
|
|
"unit": "sec",
|
|
"label": "Change slides every",
|
|
"default": 8
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Colors"
|
|
},
|
|
{
|
|
"type": "paragraph",
|
|
"content": "Overrides color scheme. Set to Transparent to revert back to using color schemes."
|
|
},
|
|
{
|
|
"type": "color",
|
|
"id": "bg_color",
|
|
"label": "Background"
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Padding"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_bottom",
|
|
"min": 0,
|
|
"max": 50,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"label": "Bottom",
|
|
"default": 16
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "popup",
|
|
"name": "Popup",
|
|
"settings": [
|
|
{
|
|
"type": "text",
|
|
"id": "title",
|
|
"label": "Link text",
|
|
"default": "Popup text"
|
|
},
|
|
{
|
|
"type": "richtext",
|
|
"id": "text",
|
|
"label": "Text",
|
|
"default": "<p>Additonal information about the product.</p>"
|
|
},
|
|
{
|
|
"type": "page",
|
|
"id": "page",
|
|
"label": "Page"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "icon_name",
|
|
"label": "Icon",
|
|
"default": "icon-award",
|
|
"options": [
|
|
{"label": "Award", "value": "icon-award"},
|
|
{"label": "Box", "value": "icon-box"},
|
|
{"label": "Chat", "value": "icon-chat"},
|
|
{"label": "Check", "value": "icon-check"},
|
|
{"label": "Check circle", "value": "icon-check-circle"},
|
|
{"label": "Cloud", "value": "icon-cloud"},
|
|
{"label": "Diameter", "value": "icon-diameter"},
|
|
{"label": "Discount", "value": "icon-discount"},
|
|
{"label": "Donation", "value": "icon-donation"},
|
|
{"label": "Droplet", "value": "icon-droplet"},
|
|
{"label": "Info", "value": "icon-info-empty"},
|
|
{"label": "Email", "value": "icon-email"},
|
|
{"label": "Fast shipment", "value": "icon-fast-shipment"},
|
|
{"label": "Flare", "value": "icon-flare"},
|
|
{"label": "Flower", "value": "icon-flower"},
|
|
{"label": "Gift", "value": "icon-gift"},
|
|
{"label": "Green shipment", "value": "icon-green-shipment"},
|
|
{"label": "Heart", "value": "icon-heart"},
|
|
{"label": "Leaf", "value": "icon-leaf"},
|
|
{"label": "Lightning", "value": "icon-lightning"},
|
|
{"label": "Location", "value": "icon-location"},
|
|
{"label": "Mail", "value": "icon-mail"},
|
|
{"label": "Notes", "value": "icon-notes"},
|
|
{"label": "Pants", "value": "icon-pants"},
|
|
{"label": "Peace", "value": "icon-peace"},
|
|
{"label": "Pin", "value": "icon-pin"},
|
|
{"label": "Planet", "value": "icon-planet"},
|
|
{"label": "Phone", "value": "icon-phone"},
|
|
{"label": "Recycle", "value": "icon-recycle"},
|
|
{"label": "Ruler", "value": "icon-ruler"},
|
|
{"label": "Shield", "value": "icon-shield"},
|
|
{"label": "Smile", "value": "icon-smile"},
|
|
{"label": "Star", "value": "icon-star"},
|
|
{"label": "Tree", "value": "icon-tree"},
|
|
{"label": "Trophy", "value": "icon-trophy"},
|
|
{"label": "Truck", "value": "icon-truck"},
|
|
{"label": "Vegan", "value": "icon-vegan"},
|
|
{"label": "Wash", "value": "icon-wash"},
|
|
{"label": "Washing machine", "value": "icon-washing-machine"}
|
|
]
|
|
},
|
|
{
|
|
"type": "image_picker",
|
|
"id": "image",
|
|
"label": "Alternative icon/image",
|
|
"info": "160 x 160px .svg recommended. [Learn more](https://invisiblethemes.com/link/broadcast/images)"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "icon_size",
|
|
"label": "Size",
|
|
"unit": "px",
|
|
"min": 20,
|
|
"max": 80,
|
|
"step": 5,
|
|
"default": 20
|
|
},
|
|
{
|
|
"type": "color",
|
|
"id": "icon_color",
|
|
"label": "Icon color"
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Padding"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_bottom",
|
|
"min": 0,
|
|
"max": 50,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"label": "Bottom",
|
|
"default": 16
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "badges",
|
|
"name": "Badges",
|
|
"settings": [
|
|
{
|
|
"type": "checkbox",
|
|
"id": "sale_badge",
|
|
"label": "Show sale badges",
|
|
"default": true
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "product_badges",
|
|
"label": "Show product badges",
|
|
"info": "Add tag '_preorder' or '_badge_with_custom_text' to a product in order to show the badge",
|
|
"default": true
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Padding"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_bottom",
|
|
"min": 0,
|
|
"max": 50,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"label": "Bottom",
|
|
"default": 8
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "sku",
|
|
"name": "SKU",
|
|
"limit": 1,
|
|
"settings": [
|
|
{
|
|
"type": "header",
|
|
"content": "Padding"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_bottom",
|
|
"min": 0,
|
|
"max": 50,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"label": "Bottom",
|
|
"default": 16
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "fit-guide",
|
|
"name": "Fit guide",
|
|
"settings": [
|
|
{
|
|
"type": "text",
|
|
"id": "heading",
|
|
"label": "Heading",
|
|
"default": "Fit"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "selected_segment",
|
|
"label": "Active segment",
|
|
"default": "4",
|
|
"info": "Enter a number from 1 - 5 to show active fit. Use a metafield for a custom fit per product."
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "left_label",
|
|
"label": "Left label",
|
|
"default": "Small"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "middle_label",
|
|
"label": "Middle label",
|
|
"default": "True to size"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "right_label",
|
|
"label": "Right label",
|
|
"default": "Large"
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Colors"
|
|
},
|
|
{
|
|
"type": "color",
|
|
"id": "fit_color",
|
|
"label": "Color"
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Padding"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_bottom",
|
|
"min": 0,
|
|
"max": 50,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"label": "Bottom",
|
|
"default": 8
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "countdown",
|
|
"name": "Countdown timer",
|
|
"settings": [
|
|
{
|
|
"type": "text",
|
|
"id": "end_date",
|
|
"label": "End date",
|
|
"placeholder": "2025-12-31",
|
|
"default": "2025-12-31",
|
|
"info": "Use format \"YYYY-MM-DD\". Expiration date is based on the [store primary timezone](/admin/settings/general)."
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "end_time",
|
|
"label": "End time",
|
|
"default": "11:59",
|
|
"placeholder": "11:59",
|
|
"info": "Use 12-hour time convention in format \"HH:MM\""
|
|
},
|
|
{
|
|
"type": "radio",
|
|
"id": "period",
|
|
"label": "AM/PM",
|
|
"options": [
|
|
{"value": "am", "label": "AM"},
|
|
{"value": "pm", "label": "PM"}
|
|
],
|
|
"default": "am"
|
|
},
|
|
{
|
|
"type": "richtext",
|
|
"id": "end_message",
|
|
"label": "End of timer message",
|
|
"default": "<p>Offer has expired</p>"
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "hide_on_complete",
|
|
"label": "Hide block after end of timer",
|
|
"default": true
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "digits_font_size",
|
|
"label": "Digits size",
|
|
"default": "heading-x-large",
|
|
"options": [
|
|
{"value": "heading-mini", "label": "Mini"},
|
|
{"value": "heading-x-small", "label": "Extra small"},
|
|
{"value": "heading-small", "label": "Small"},
|
|
{"value": "heading-medium", "label": "Medium"},
|
|
{"value": "heading-large", "label": "Large"},
|
|
{"value": "heading-x-large", "label": "Extra large"}
|
|
]
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "text_font_size",
|
|
"label": "Date size",
|
|
"info": "Automatically generated by the base size. Applies only when content in Text field is set to Paragraph.",
|
|
"default": "body-small",
|
|
"options": [
|
|
{"value": "body-x-small", "label": "Extra small"},
|
|
{"value": "body-small", "label": "Small"},
|
|
{"value": "body-medium", "label": "Medium"},
|
|
{"value": "body-large", "label": "Large"},
|
|
{"value": "body-x-large", "label": "Extra large"}
|
|
]
|
|
},
|
|
{
|
|
"type": "richtext",
|
|
"id": "text",
|
|
"label": "Text",
|
|
"default": "<p>Limited time offer</p>"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "heading_font_size",
|
|
"label": "Heading size",
|
|
"default": "heading-x-small",
|
|
"options": [
|
|
{"value": "heading-mini", "label": "Mini"},
|
|
{"value": "heading-x-small", "label": "Extra small"},
|
|
{"value": "heading-small", "label": "Small"},
|
|
{"value": "heading-medium", "label": "Medium"},
|
|
{"value": "heading-large", "label": "Large"},
|
|
{"value": "heading-x-large", "label": "Extra large"}
|
|
]
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Colors"
|
|
},
|
|
{
|
|
"type": "paragraph",
|
|
"content": "Overrides color scheme. Set to Transparent to revert back to using color schemes."
|
|
},
|
|
{
|
|
"type": "color",
|
|
"id": "bg_color",
|
|
"label": "Background"
|
|
},
|
|
{
|
|
"type": "color",
|
|
"id": "color",
|
|
"label": "Text"
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Layout"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "text_align",
|
|
"label": "Text alignment",
|
|
"default": "text-center",
|
|
"options": [
|
|
{"value": "text-left", "label": "Left"},
|
|
{"value": "text-center", "label": "Centered"}
|
|
]
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Padding"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_bottom",
|
|
"min": 0,
|
|
"max": 50,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"label": "Bottom",
|
|
"default": 16
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
{% endschema %}
|