Hi there, Im new to conditional statements.
I have 3 simple tabs
My issue is as follows.
I wish to make the next tab ‘active’ if the first (Overview) tab is empty
here is my code
Hi,
You can use some jquery scripts if you want like below:
Thanks.. . Where in my product_main.liquid file would I paste this?
Hi,
You can paste in at the bottom.
Hello, I’ve pasted the code below my tabs section and it still doesn’t work as required ?
Maybe try this:
{% if product.metafields.overview.info != blank %}
- Overview
{% endif %}
{% if product.metafields.features.detail != blank %}
-
{% endif %}
{% if product.metafields.size.guide != blank %}
-
{% endif %}
Thanks Gina!!! This is great..
All I need to work out now is how to align the tab section left underneath the image thumbnails? Any ideas
Looks like you need to move your code in the HTML. Can’t help much beyond that without seeing your site/code.
Hi, here is the code from product_liquid section
{% comment %}
** Product - main content area **
- Product template
{% endcomment %}
{% assign id = section.id %}
{% comment %} Layout {% endcomment %}
{% assign width = section.settings.width %}
{% assign padding_top = section.settings.padding_top %}
{% assign padding_bottom = section.settings.padding_bottom %}
{% comment %} Advanced {% endcomment %}
{% assign css_class = section.settings.css_class %}
{% assign custom_css = section.settings.custom_css %}
{% comment %} Section specific CSS {% endcomment %}
{% style %}
.section__wrapper {
padding-top: {{ padding_top }}px;
padding-bottom: {{ padding_bottom }}px;
}
.section--has-sidebar-option.has-sidebar-enabled {
{% if width == 'wide' -%}
width: 100%;
max-width: 95%;
{%- endif %}
}
.section--has-sidebar-option.has-sidebar-disabled {
width: 100%;
max-width: none;
}
{% if section.settings.product_breadcrumb == false %}
.breadcrumb__container {
display: none;
}
{% endif %}
{% render 'css-loop',
css: custom_css,
id: id
%}
{% endstyle %}
{% assign collection_handles = product.collections | map: 'handle' %}
{% assign variant = product.selected_or_first_available_variant %}
{% assign product_tags = product.tags | join: ' ' %}
{% render 'product__structured-data' %}
{% comment %} HTML markup {% endcomment %}
{% comment %} JavaScript {% endcomment %}
{% comment %} Shopify-XR {% endcomment %}
{% if product.media %}
{% endif %}
{% if section.blocks.size > 0 %}
{% for block in section.blocks %}
{%- assign animation = block.settings.animation | default: 'none' -%}
{%- assign width = block.settings.width -%}
{% if block.type == 'product_reviews' %}
{% comment %} Product reviews {% endcomment %}
{% include 'include-reviews', type: 'block' %}
{% elsif block.type == 'image_with_overlay' %}
{% comment %} Image with text overlay {% endcomment %}
{% include 'include-image-with-text-overlay', type: 'block' %}
{% elsif block.type == 'image_with_text' %}
{% comment %} Image with text {% endcomment %}
{% include 'include-one-image-with-text', type: 'block' %}
{% elsif block.type == 'rich_text' %}
{% comment %} Rich text {% endcomment %}
{% include 'include-rich-text', type: 'block' %}
{% elsif block.type == 'video' %}
{% comment %} Featured video {% endcomment %}
{% include 'include-video', type: 'block' %}
{% elsif block.type == "blog" %}
{% comment %} Blog {% endcomment %}
{% include 'include-featured-blog', type: 'block' %}
{% elsif block.type == 'featured_collection' %}
{% comment %} Featured collection {% endcomment %}
{% include 'include-featured-collection', type: 'block' %}
{% elsif block.type == 'logo_list' %}
{% comment %} Logo list {% endcomment %}
{% include 'include-logo-list', type: 'block' %}
{% elsif block.type == "divider" %}
{% comment %} Divider {% endcomment %}
{% include 'include-divider', type: 'block' %}
{% elsif block.type == 'map' %}
{% comment %} Map {% endcomment %}
{% include 'include-map', type: 'block' %}
{% elsif block.type == "page" %}
{% comment %} Page {% endcomment %}
{% include 'include-content-page', type: 'block' %}
{% elsif block.type == 'recommended_products' %}
{% comment %} Recommended products {% endcomment %}
{% style %}
#shopify-section-{{ block.id }} {
padding-top: {{ block.settings.padding_top }}px;
padding-bottom: {{ block.settings.padding_bottom }}px;
width: 95%;
{% if block.settings.width == 'wide' %}
width: 100%;
{% endif %}
}
{% endstyle %}
{% endif %}
{% endfor %}
{% endif %}
{% comment %} Used to ensure product review app installs succesfully {% endcomment %}
{{ product.metafields.spr.reviews }}
{% schema %}
{
"name": "Product",
"max_blocks": 10,
"class": "product-template product-main has-sidebar-option jsProduct",
"settings": [
{
"type": "checkbox",
"id": "product_breadcrumb",
"label": "Show breadcrumb links"
},
{
"type": "header",
"content": "Product gallery"
},
{
"type": "checkbox",
"id": "display_thumbnails",
"label": "Show thumbnails",
"default": true
},
{
"type": "checkbox",
"id": "gallery_arrows",
"label": "Show arrows",
"info": "Applies to desktop only.",
"default": true
},
{
"type": "checkbox",
"id": "enable_zoom",
"label": "Magnify on hover",
"default": true
},
{
"type": "checkbox",
"id": "enable_product_lightbox",
"label": "Enable lightbox",
"default": true
},
{
"type": "range",
"id": "slideshow_speed",
"label": "Gallery speed",
"min": 0,
"max": 6,
"unit": "sec",
"default": 0,
"info": "Set to 0 to disable autoplay."
},
{
"type": "select",
"id": "slideshow_transition",
"label": "Gallery transition",
"options": [
{
"value": "slide",
"label": "Slide"
},
{
"value": "fade",
"label": "Fade"
}
],
"default": "slide"
},
{
"type": "select",
"id": "thumbnail_position",
"label": "Thumbnails",
"options": [
{
"value": "left-thumbnails",
"label": "Left"
},
{
"value": "right-thumbnails",
"label": "Right"
},
{
"value": "bottom-thumbnails",
"label": "Bottom"
}
],
"default": "bottom-thumbnails"
},
{
"type": "checkbox",
"id": "enable_thumbnail_slider",
"label": "Enable thumbnail slider",
"default": true
},
{
"type": "header",
"content": "Product information"
},
{
"type": "checkbox",
"id": "display_vendor",
"label": "Show vendor",
"default": false
},
{
"type": "checkbox",
"id": "display_sku",
"label": "Show SKU",
"default": false
},
{
"type": "checkbox",
"id": "enable_shopify_product_badges",
"label": "Show star rating",
"info": "Reviews app must be enabled. [Learn more](https://help.outofthesandbox.com/hc/en-us/articles/360008549274#section2)",
"default": false
},
{
"type": "checkbox",
"id": "display_savings",
"label": "Show price savings",
"default": true
},
{
"type": "checkbox",
"id": "display_collections",
"label": "Show collections",
"default": false
},
{
"type": "checkbox",
"id": "display_type",
"label": "Show type",
"default": false
},
{
"type": "checkbox",
"id": "display_tags",
"label": "Show tags",
"default": false
},
{
"type": "checkbox",
"id": "display_social_buttons",
"label": "Show social media share icons",
"default": true
},
{
"type": "radio",
"id": "product_description_position",
"label": "Description position",
"options": [
{
"value": "top",
"label": "Above 'add to cart'"
},
{
"value": "bottom",
"label": "Below 'add to cart'"
}
],
"default": "top"
},
{
"type": "header",
"content": "Dynamic Checkout Button"
},
{
"type": "checkbox",
"id": "show_payment_button",
"label": "Show dynamic checkout button",
"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\/manual\/using-themes\/change-the-layout\/dynamic-checkout)",
"default": true
},
{
"type": "header",
"content": "Media",
"info": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media)"
},
{
"type": "radio",
"id": "product_images_position",
"label": "Media position",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "right",
"label": "Right"
}
],
"default": "left"
},
{
"type": "checkbox",
"id": "set_product_height",
"label": "Set height of product media",
"default": false
},
{
"type": "range",
"id": "product_height",
"label": "Product media height",
"min": 200,
"max": 800,
"step": 10,
"default": 500,
"unit": "px"
},
{
"type": "checkbox",
"id": "video_looping",
"label": "Enable video looping",
"default": false
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "width",
"label": "Width",
"options": [
{
"value": "standard",
"label": "Standard"
},
{
"value": "wide",
"label": "Wide"
}
],
"default": "standard"
},
{
"type": "range",
"id": "padding_top",
"label": "Top spacing",
"min": 0,
"max": 80,
"default": 20,
"unit": "px"
},
{
"type": "range",
"id": "padding_bottom",
"label": "Bottom spacing",
"min": 0,
"max": 80,
"default": 20,
"unit": "px"
},
{
"type": "select",
"id": "animation",
"label": "Animation",
"default": "none",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "fadeIn",
"label": "Fade in"
},
{
"value": "fadeInDown",
"label": "Fade in down"
},
{
"value": "fadeInLeft",
"label": "Fade in left"
},
{
"value": "fadeInRight",
"label": "Fade in right"
},
{
"value": "slideInLeft",
"label": "Slide in left"
},
{
"value": "slideInRight",
"label": "Slide in right"
}
]
},
{
"type": "header",
"content": "Advanced",
"info": "[Learn more](https://help.outofthesandbox.com/hc/en-us/articles/360022329373)"
},
{
"type": "text",
"id": "css_class",
"label": "CSS Class"
},
{
"type": "textarea",
"id": "custom_css",
"label": "Custom CSS"
}
],
"blocks": [
{
"type": "blog",
"name": "Blog posts",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Recent blog posts"
},
{
"type": "blog",
"id": "blog_widget_select",
"label": "Blog"
},
{
"type": "range",
"id": "home_page_articles",
"label": "Posts",
"min": 2,
"max": 4,
"default": 3
},
{
"type": "checkbox",
"id": "blog_show_tags",
"label": "Show tags",
"default": true
},
{
"type": "checkbox",
"id": "blog_author",
"label": "Show author",
"default": true
},
{
"type": "checkbox",
"id": "read_time",
"label": "Show estimated read time",
"default": true
},
{
"type": "checkbox",
"id": "blog_date",
"label": "Show date",
"default": true
},
{
"type": "checkbox",
"id": "blog_comment_count",
"label": "Show comment count",
"default": false
},
{
"type": "checkbox",
"id": "blog_show_excerpt",
"label": "Show excerpts",
"default": true
},
{
"type": "checkbox",
"id": "show-border",
"label": "Show border",
"default": true
},
{
"type": "text",
"id": "button_label",
"label": "Button label",
"default": "Read more"
},
{
"type": "select",
"id": "button_type",
"label": "Button style",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "button--primary",
"label": "Primary"
},
{
"value": "button--secondary",
"label": "Secondary"
}
],
"default": "button--primary"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "width",
"label": "Width",
"options": [
{
"value": "standard",
"label": "Standard"
},
{
"value": "wide",
"label": "Wide"
}
],
"default": "standard"
},
{
"type": "range",
"id": "padding_top",
"label": "Top spacing",
"min": 0,
"max": 80,
"default": 20,
"unit": "px"
},
{
"type": "range",
"id": "padding_bottom",
"label": "Bottom spacing",
"default": 0,
"min": 0,
"max": 80,
"unit": "px"
},
{
"type": "select",
"id": "animation",
"label": "Animation",
"default": "none",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "fadeIn",
"label": "Fade in"
},
{
"value": "fadeInDown",
"label": "Fade in down"
},
{
"value": "fadeInLeft",
"label": "Fade in left"
},
{
"value": "fadeInRight",
"label": "Fade in right"
},
{
"value": "slideInLeft",
"label": "Slide in left"
},
{
"value": "slideInRight",
"label": "Slide in right"
}
]
}
]
},
{
"type": "divider",
"name": "Divider",
"settings": [
{
"type": "select",
"id": "divider_style",
"label": "Style",
"options": [
{
"value": "short",
"label": "Short horizontal"
},
{
"value": "long",
"label": "Long horizontal"
},
{
"value": "vertical",
"label": "Vertical"
}
],
"default": "short"
},
{
"type": "range",
"id": "divider_width",
"label": "Thickness",
"min": 0,
"max": 5,
"default": 2,
"unit": "px"
},
{
"type": "color",
"id": "divider_color",
"label": "Color",
"default": "rgba(0,0,0,0)"
},
{
"type": "select",
"id": "alignment",
"label": "Alignment",
"options": [
{
"value": "start",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "end",
"label": "Right"
}
],
"default": "center"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "width",
"label": "Width",
"default": "standard",
"options": [
{
"value": "standard",
"label": "Standard"
},
{
"value": "wide",
"label": "Wide"
}
]
},
{
"type": "range",
"id": "padding_top",
"label": "Top spacing",
"min": 0,
"max": 80,
"default": 20,
"unit": "px"
},
{
"type": "range",
"id": "padding_bottom",
"label": "Bottom spacing",
"min": 0,
"max": 80,
"default": 20,
"unit": "px"
},
{
"type": "select",
"id": "animation",
"label": "Animation",
"default": "none",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "fadeIn",
"label": "Fade in"
},
{
"value": "fadeInDown",
"label": "Fade in down"
},
{
"value": "fadeInLeft",
"label": "Fade in left"
},
{
"value": "fadeInRight",
"label": "Fade in right"
},
{
"value": "slideInLeft",
"label": "Slide in left"
},
{
"value": "slideInRight",
"label": "Slide in right"
},
{
"value": "zoomIn",
"label": "Zoom in"
}
]
}
]
},
{
"type": "featured_collection",
"name": "Featured collection",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Featured collection"
},
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "header",
"content": "Product"
},
{
"type": "range",
"id": "products_per",
"label": "Products per row",
"min": 2,
"max": 7,
"default": 3
},
{
"type": "select",
"id": "mobile_products_per_row",
"label": "Products per row on mobile",
"info": "Applied only when 'Collection layout' is set to 'Grid'.",
"options": [
{
"value": "1",
"label": "1"
},
{
"value": "2",
"label": "2"
}
],
"default": "1"
},
{
"type": "range",
"id": "products_limit",
"label": "Limit products",
"min": 3,
"max": 20,
"default": 6
},
{
"type": "checkbox",
"id": "align_height",
"label": "Align to height"
},
{
"type": "range",
"id": "collection_height",
"label": "Product image height",
"min": 150,
"max": 400,
"step": 10,
"default": 200,
"unit": "px",
"info": "Applied when 'Align to height' is also enabled. [Learn more](https://help.outofthesandbox.com/hc/en-us/articles/360022543913)"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "radio",
"id": "collection_style",
"label": "Collection layout",
"default": "grid",
"options": [
{
"value": "slider",
"label": "Slider"
},
{
"value": "grid",
"label": "Grid"
}
]
},
{
"type": "select",
"id": "width",
"label": "Width",
"options": [
{
"value": "standard",
"label": "Standard"
},
{
"value": "wide",
"label": "Wide"
}
],
"default": "standard"
},
{
"type": "checkbox",
"id": "show_gutter",
"label": "Show gutter",
"default": true
},
{
"type": "range",
"id": "padding_top",
"label": "Top spacing",
"min": 0,
"max": 80,
"default": 20,
"unit": "px"
},
{
"type": "range",
"id": "padding_bottom",
"label": "Bottom spacing",
"min": 0,
"max": 80,
"default": 20,
"unit": "px"
},
{
"type": "select",
"id": "animation",
"label": "Animation",
"default": "none",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "fadeIn",
"label": "Fade in"
},
{
"value": "fadeInDown",
"label": "Fade in down"
},
{
"value": "fadeInLeft",
"label": "Fade in left"
},
{
"value": "fadeInRight",
"label": "Fade in right"
},
{
"value": "slideInLeft",
"label": "Slide in left"
},
{
"value": "slideInRight",
"label": "Slide in right"
}
]
}
]
},
{
"type": "image_with_overlay",
"name": "Image with text overlay",
"settings": [
{
"type": "header",
"content": "Image"
},
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "1800 x 900px recommended"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Mobile image",
"info": "900 x 1800px recommended"
},
{
"type": "url",
"id": "link",
"label": "Link",
"info": "Only active in absence of buttons"
},
{
"type": "header",
"content": "Text"
},
{
"type": "richtext",
"id": "pretext",
"label": "Preheading",
"default": "
Preheading
"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Image with Text Overlay"
},
{
"type": "richtext",
"id": "subtitle",
"label": "Subheading",
"default": "
Additional info in the subheading
"
},
{
"type": "color",
"id": "pretext_color",
"label": "Preheading",
"default": "#000000"
},
{
"type": "color",
"id": "heading_color",
"label": "Heading",
"default": "#000000"
},
{
"type": "color",
"id": "subheading_color",
"label": "Subheading",
"default": "#000000"
},
{
"type": "select",
"id": "text_alignment",
"label": "Text alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "select",
"id": "text_horizontal_position",
"label": "Horizontal position",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "select",
"id": "text_vertical_position",
"label": "Vertical position",
"options": [
{
"value": "top",
"label": "Top"
},
{
"value": "middle",
"label": "Middle"
},
{
"value": "bottom",
"label": "Bottom"
}
],
"default": "middle"
},
{
"type": "header",
"content": "Text background"
},
{
"type": "color",
"id": "background_color",
"label": "Background",
"default": "#FFFFFF"
},
{
"type": "range",
"id": "background_opacity",
"label": "Background opacity",
"min": 0,
"max": 100,
"default": 77,
"unit": "%"
},
{
"type": "color",
"id": "border_color",
"label": "Border",
"default": "#FFFFFF"
},
{
"type": "range",
"id": "border_width",
"label": "Border width",
"min": 0,
"max": 20,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "text_width",
"label": "Text width",
"min": 40,
"max": 100,
"default": 40,
"unit": "%"
},
{
"type": "header",
"content": "Buttons"
},
{
"type": "text",
"id": "button_1",
"label": "Button 1 label",
"default": "Button 1"
},
{
"type": "url",
"id": "button_1_link",
"label": "Button 1 link"
},
{
"type": "select",
"id": "button_1_style",
"label": "Button 1 style",
"options": [
{
"value": "button--primary",
"label": "Primary"
},
{
"value": "button--secondary",
"label": "Secondary"
},
{
"value": "button--link-style",
"label": "Link style"
}
],
"default": "button--secondary"
},
{
"type": "text",
"id": "button_2",
"label": "Button 2 label",
"default": "Button 2"
},
{
"type": "url",
"id": "button_2_link",
"label": "Button 2 link"
},
{
"type": "select",
"id": "button_2_style",
"label": "Button 2 style",
"options": [
{
"value": "button--primary",
"label": "Primary"
},
{
"value": "button--secondary",
"label": "Secondary"
},
{
"value": "button--link-style",
"label": "Link style"
}
],
"default": "button--secondary"
},
{
"type": "header",
"content": "Mobile"
},
{
"type": "select",
"id": "mobile_image_crop",
"label": "Image cropping",
"default": "none",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "checkbox",
"id": "mobile_text_below_image",
"label": "Show text below image",
"default": true
},
{
"type": "color",
"id": "pretext_color_mobile",
"label": "Preheading",
"default": "rgba(0,0,0,0)"
},
{
"type": "color",
"id": "heading_color_mobile",
"label": "Heading",
"default": "rgba(0,0,0,0)"
},
{
"type": "color",
"id": "subheading_color_mobile",
"label": "Subheading",
"default": "rgba(0,0,0,0)"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "width",
"label": "Width",
"options": [
{
"value": "half",
"label": "Half"
},
{
"value": "standard",
"label": "Standard"
},
{
"value": "wide",
"label": "Wide"
}
],
"default": "wide"
},
{
"type": "range",
"id": "padding_top",
"label": "Top spacing",
"min": 0,
"max": 80,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "padding_bottom",
"label": "Bottom spacing",
"default": 0,
"min": 0,
"max": 80,
"unit": "px"
},
{
"type": "range",
"id": "padding_left",
"label": "Left spacing",
"min": 0,
"max": 80,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "padding_right",
"label": "Right spacing",
"default": 0,
"min": 0,
"max": 80,
"unit": "px"
},
{
"type": "select",
"id": "animation",
"label": "Animation",
"default": "none",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "fadeIn",
"label": "Fade in"
},
{
"value": "fadeInDown",
"label": "Fade in down"
},
{
"value": "fadeInLeft",
"label": "Fade in left"
},
{
"value": "fadeInRight",
"label": "Fade in right"
},
{
"value": "slideInLeft",
"label": "Slide in left"
},
{
"value": "slideInRight",
"label": "Slide in right"
}
]
}
]
},
{
"type": "image_with_text",
"name": "Image with text",
"settings": [
{
"type": "header",
"content": "Image"
},
{
"type": "select",
"id": "image_position",
"label": "Image position",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "1024 x 1024px recommended"
},
{
"type": "select",
"id": "image_crop",
"label": "Image cropping",
"default": "none",
"info": "Only applied when text area is taller than the image.",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "url",
"id": "image_link",
"label": "Link"
},
{
"type": "header",
"content": "Text"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Heading text here"
},
{
"type": "select",
"id": "heading_size",
"label": "Base size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "regular",
"label": "Regular"
},
{
"value": "large",
"label": "Large"
}
],
"default": "regular"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "
Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.
"
},
{
"type": "text",
"id": "button_label",
"label": "Button label",
"default": "View all"
},
{
"type": "url",
"id": "link",
"label": "Button link"
},
{
"type": "select",
"id": "button_style",
"label": "Button style",
"options": [
{
"value": "button--primary",
"label": "Primary"
},
{
"value": "button--secondary",
"label": "Secondary"
},
{
"value": "button--link-style",
"label": "Link style"
}
],
"default": "button--primary"
},
{
"type": "header",
"content": "Text layout"
},
{
"type": "select",
"id": "alignment",
"label": "Alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "left"
},
{
"type": "select",
"id": "vertical_position",
"label": "Vertical position",
"options": [
{
"value": "start",
"label": "Top"
},
{
"value": "center",
"label": "Middle"
},
{
"value": "end",
"label": "Bottom"
}
],
"default": "center"
},
{
"type": "header",
"content": "Colors"
},
{
"type": "color",
"id": "background",
"label": "Background",
"default": "rgba(0,0,0,0)"
},
{
"type": "color",
"id": "text_color",
"label": "Text",
"default": "rgba(0,0,0,0)"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "width",
"label": "Width",
"default": "standard",
"options": [
{
"value": "standard",
"label": "Standard"
},
{
"value": "wide",
"label": "Wide"
}
]
},
{
"type": "checkbox",
"id": "show_gutter",
"label": "Show gutter",
"default": true
},
{
"type": "range",
"id": "padding_top",
"label": "Top spacing",
"min": 0,
"max": 80,
"default": 20,
"unit": "px"
},
{
"type": "range",
"id": "padding_bottom",
"label": "Bottom spacing",
"min": 0,
"max": 80,
"default": 20,
"unit": "px"
},
{
"type": "select",
"id": "animation",
"label": "Animation",
"default": "none",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "fadeIn",
"label": "Fade in"
},
{
"value": "fadeInDown",
"label": "Fade in down"
},
{
"value": "fadeInLeft",
"label": "Fade in left"
},
{
"value": "fadeInRight",
"label": "Fade in right"
},
{
"value": "slideInLeft",
"label": "Slide in left"
},
{
"value": "slideInRight",
"label": "Slide in right"
},
{
"value": "zoomIn",
"label": "Zoom in"
}
]
}
]
},
{
"type": "logo_list",
"name": "Logo list",
"settings": [
{
"type": "range",
"id": "logos_per_row",
"label": "Logos per row",
"min": 1,
"max": 8,
"default": 4
},
{
"type": "select",
"id": "logo_size",
"label": "Logo size",
"default": "medium",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
]
},
{
"type": "header",
"content": "Content"
},
{
"type": "checkbox",
"id": "show_logo1",
"label": "Show logo 1",
"default": true
},
{
"type": "image_picker",
"id": "image1",
"label": "Logo 1",
"info": "800 x 800px recommended"
},
{
"type": "url",
"id": "link1",
"label": "Link 1"
},
{
"type": "checkbox",
"id": "show_logo2",
"label": "Show logo 2",
"default": true
},
{
"type": "image_picker",
"id": "image2",
"label": "Logo 2",
"info": "800 x 800px recommended"
},
{
"type": "url",
"id": "link2",
"label": "Link 2"
},
{
"type": "checkbox",
"id": "show_logo3",
"label": "Show logo 3",
"default": true
},
{
"type": "image_picker",
"id": "image3",
"label": "Logo 3",
"info": "800 x 800px recommended"
},
{
"type": "url",
"id": "link3",
"label": "Link 3"
},
{
"type": "checkbox",
"id": "show_logo4",
"label": "Show logo 4",
"default": true
},
{
"type": "image_picker",
"id": "image4",
"label": "Logo 4",
"info": "800 x 800px recommended"
},
{
"type": "url",
"id": "link4",
"label": "Link 4"
},
{
"type": "checkbox",
"id": "show_logo5",
"label": "Show logo 5"
},
{
"type": "image_picker",
"id": "image5",
"label": "Logo 5",
"info": "800 x 800px recommended"
},
{
"type": "url",
"id": "link5",
"label": "Link 5"
},
{
"type": "checkbox",
"id": "show_logo6",
"label": "Show logo 6"
},
{
"type": "image_picker",
"id": "image6",
"label": "Logo 6",
"info": "800 x 800px recommended"
},
{
"type": "url",
"id": "link6",
"label": "Link 6"
},
{
"type": "checkbox",
"id": "show_logo7",
"label": "Show logo 7"
},
{
"type": "image_picker",
"id": "image7",
"label": "Logo 7",
"info": "800 x 800px recommended"
},
{
"type": "url",
"id": "link7",
"label": "Link 7"
},
{
"type": "checkbox",
"id": "show_logo8",
"label": "Show logo 8"
},
{
"type": "image_picker",
"id": "image8",
"label": "Logo 8",
"info": "800 x 800px recommended"
},
{
"type": "url",
"id": "link8",
"label": "Link 8"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "range",
"id": "padding_top",
"label": "Top spacing",
"min": 0,
"max": 80,
"default": 20,
"unit": "px"
},
{
"type": "range",
"id": "padding_bottom",
"label": "Bottom spacing",
"min": 0,
"max": 80,
"default": 0,
"unit": "px"
},
{
"type": "select",
"id": "animation",
"label": "Animation",
"default": "none",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "fadeIn",
"label": "Fade in"
},
{
"value": "fadeInDown",
"label": "Fade in down"
},
{
"value": "fadeInLeft",
"label": "Fade in left"
},
{
"value": "fadeInRight",
"label": "Fade in right"
},
{
"value": "slideInLeft",
"label": "Slide in left"
},
{
"value": "slideInRight",
"label": "Slide in right"
},
{
"value": "zoomIn",
"label": "Zoom in"
}
]
}
]
},
{
"type": "map",
"name": "Map",
"settings": [
{
"type": "text",
"id": "map_address",
"label": "Address",
"info": "Google Maps will find the exact location"
},
{
"type": "range",
"id": "map_height",
"min": 300,
"max": 600,
"step": 10,
"unit": "px",
"label": "Map height",
"default": 400
},
{
"type": "range",
"id": "zoom_level",
"min": 1,
"max": 20,
"step": 1,
"unit": "x",
"label": "Map zoom level",
"default": 16
},
{
"type": "image_picker",
"id": "map_image",
"label": "Image",
"info": "Displayed when map isn't loaded"
},
{
"type": "header",
"content": "API key"
},
{
"type": "text",
"id": "api_key",
"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"
},
{
"type": "checkbox",
"id": "show_pin",
"label": "Show pin",
"info": "Requires use of API key",
"default": true
},
{
"type": "select",
"id": "map_style",
"label": "Map color scheme",
"options": [
{
"value": "default",
"label": "Default"
},
{
"value": "aubergine",
"label": "Aubergine"
},
{
"value": "night",
"label": "Night"
},
{
"value": "retro",
"label": "Retro"
},
{
"value": "silver",
"label": "Silver"
}
],
"default": "default",
"info": "Requires use of API key"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "width",
"label": "Width",
"default": "wide",
"options": [
{
"value": "half",
"label": "Half"
},
{
"value": "standard",
"label": "Standard"
},
{
"value": "wide",
"label": "Wide"
}
]
},
{
"type": "range",
"id": "padding_top",
"label": "Top spacing",
"min": 0,
"max": 80,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "padding_bottom",
"label": "Bottom spacing",
"min": 0,
"max": 80,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "padding_left",
"label": "Left spacing",
"min": 0,
"max": 80,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "padding_right",
"label": "Right spacing",
"default": 0,
"min": 0,
"max": 80,
"unit": "px"
},
{
"type": "select",
"id": "animation",
"label": "Animation",
"default": "none",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "fadeIn",
"label": "Fade in"
},
{
"value": "fadeInDown",
"label": "Fade in down"
},
{
"value": "fadeInLeft",
"label": "Fade in left"
},
{
"value": "fadeInRight",
"label": "Fade in right"
},
{
"value": "slideInLeft",
"label": "Slide in left"
},
{
"value": "slideInRight",
"label": "Slide in right"
},
{
"value": "zoomIn",
"label": "Zoom in"
}
]
}
]
},
{
"type": "page",
"name": "Page",
"settings": [
{
"type": "page",
"id": "content_page",
"label": "Content page"
},
{
"type": "header",
"content": "Background"
},
{
"type": "color",
"id": "background",
"label": "Background",
"default": "#EEEEEE"
},
{
"type": "color",
"id": "gradient",
"label": "Gradient",
"default": "rgba(0,0,0,0)"
},
{
"type": "range",
"id": "gradient_rotation",
"label": "Gradient rotation",
"min": 0,
"max": 180,
"step": 10,
"default": 0,
"unit": "deg"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "width",
"label": "Width",
"default": "standard",
"options": [
{
"value": "half",
"label": "Half"
},
{
"value": "standard",
"label": "Standard"
},
{
"value": "wide",
"label": "Wide"
}
]
},
{
"type": "range",
"id": "padding_top",
"label": "Top spacing",
"min": 0,
"max": 80,
"default": 40,
"unit": "px"
},
{
"type": "range",
"id": "padding_bottom",
"label": "Bottom spacing",
"min": 0,
"max": 80,
"default": 40,
"unit": "px"
},
{
"type": "range",
"id": "padding_left",
"label": "Left spacing",
"min": 0,
"max": 80,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "padding_right",
"label": "Right spacing",
"default": 0,
"min": 0,
"max": 80,
"unit": "px"
},
{
"type": "select",
"id": "animation",
"label": "Animation",
"default": "none",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "fadeIn",
"label": "Fade in"
},
{
"value": "fadeInDown",
"label": "Fade in down"
},
{
"value": "fadeInLeft",
"label": "Fade in left"
},
{
"value": "fadeInRight",
"label": "Fade in right"
},
{
"value": "slideInLeft",
"label": "Slide in left"
},
{
"value": "slideInRight",
"label": "Slide in right"
},
{
"value": "zoomIn",
"label": "Zoom in"
}
]
}
]
},
{
"type": "product_reviews",
"name": "Product reviews",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "Reviews app must be enabled. [Learn more](https://help.outofthesandbox.com/hc/en-us/articles/360008549274#section2)"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "range",
"id": "padding_top",
"label": "Top spacing",
"min": 0,
"max": 80,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "padding_bottom",
"label": "Bottom spacing",
"min": 0,
"max": 80,
"default": 0,
"unit": "px"
},
{
"type": "select",
"id": "animation",
"label": "Animation",
"default": "none",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "fadeIn",
"label": "Fade in"
},
{
"value": "fadeInDown",
"label": "Fade in down"
},
{
"value": "fadeInLeft",
"label": "Fade in left"
},
{
"value": "fadeInRight",
"label": "Fade in right"
},
{
"value": "slideInLeft",
"label": "Slide in left"
},
{
"value": "slideInRight",
"label": "Slide in right"
},
{
"value": "zoomIn",
"label": "Zoom in"
}
]
}
]
},
{
"name": "Recommended products",
"type": "recommended_products",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "This block can be configured using the Recommended Products section settings. [Learn more](https://help.outofthesandbox.com/hc/en-us/articles/360022889333)"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "width",
"label": "Width",
"default": "wide",
"options": [
{
"value": "standard",
"label": "Standard"
},
{
"value": "wide",
"label": "Wide"
}
]
},
{
"type": "range",
"id": "padding_top",
"label": "Top spacing",
"min": 0,
"max": 80,
"default": 20,
"unit": "px"
},
{
"type": "range",
"id": "padding_bottom",
"label": "Bottom spacing",
"min": 0,
"max": 80,
"default": 20,
"unit": "px"
},
{
"type": "select",
"id": "animation",
"label": "Animation",
"default": "none",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "fadeIn",
"label": "Fade in"
},
{
"value": "fadeInDown",
"label": "Fade in down"
},
{
"value": "fadeInLeft",
"label": "Fade in left"
},
{
"value": "fadeInRight",
"label": "Fade in right"
},
{
"value": "slideInLeft",
"label": "Slide in left"
},
{
"value": "slideInRight",
"label": "Slide in right"
},
{
"value": "zoomIn",
"label": "Zoom in"
}
]
}
]
},
{
"type": "rich_text",
"name": "Rich text",
"settings": [
{
"type": "header",
"content": "Heading"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Catchy heading"
},
{
"type": "font_picker",
"id": "heading_font",
"label": "Font",
"default": "open_sans_n4"
},
{
"type": "color",
"id": "heading_color",
"label": "Heading",
"default": "rgba(0,0,0,0)"
},
{
"type": "select",
"id": "heading_alignment",
"label": "Alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "justify",
"label": "Justified"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "range",
"id": "heading_size",
"label": "Base size",
"min": 20,
"max": 120,
"default": 30,
"unit": "px"
},
{
"type": "header",
"content": "Text"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "
Use this section to create some callout text on your page, or add more details about your shop, services, promotions, etc.
You can keep the background color solid or use a background image instead.
"
},
{
"type": "font_picker",
"id": "text_font",
"label": "Font",
"default": "open_sans_n4"
},
{
"type": "color",
"id": "text_color",
"label": "Text",
"default": "rgba(0,0,0,0)"
},
{
"type": "select",
"id": "text_alignment",
"label": "Text alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "justify",
"label": "Justified"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "range",
"id": "text_size",
"label": "Base size",
"min": 8,
"max": 40,
"default": 14,
"unit": "px"
},
{
"type": "range",
"id": "columns",
"label": "Columns",
"min": 1,
"max": 3,
"default": 1
},
{
"type": "header",
"content": "Button"
},
{
"type": "text",
"id": "button_label",
"label": "Button label",
"default": "Read more"
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
},
{
"type": "select",
"id": "button_alignment",
"label": "Alignment",
"options": [
{
"value": "center",
"label": "Center"
},
{
"value": "left",
"label": "Left"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "select",
"id": "button_style",
"label": "Style",
"options": [
{
"value": "button--primary",
"label": "Primary"
},
{
"value": "button--secondary",
"label": "Secondary"
},
{
"value": "button--link-style",
"label": "Link style"
}
],
"default": "button--primary"
},
{
"type": "header",
"content": "Background"
},
{
"type": "color",
"id": "background",
"label": "Background",
"default": "#EEEEEE"
},
{
"type": "color",
"id": "gradient",
"label": "Gradient",
"default": "rgba(0,0,0,0)"
},
{
"type": "range",
"id": "gradient_rotation",
"label": "Gradient rotation",
"min": 0,
"max": 180,
"step": 10,
"default": 0,
"unit": "deg"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "width",
"label": "Width",
"default": "standard",
"options": [
{
"value": "half",
"label": "Half"
},
{
"value": "standard",
"label": "Standard"
},
{
"value": "wide",
"label": "Wide"
}
]
},
{
"type": "range",
"id": "padding_top",
"label": "Top spacing",
"min": 0,
"max": 80,
"default": 40,
"unit": "px"
},
{
"type": "range",
"id": "padding_bottom",
"label": "Bottom spacing",
"min": 0,
"max": 80,
"default": 40,
"unit": "px"
},
{
"type": "range",
"id": "padding_left",
"label": "Left spacing",
"min": 0,
"max": 80,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "padding_right",
"label": "Right spacing",
"default": 0,
"min": 0,
"max": 80,
"unit": "px"
},
{
"type": "select",
"id": "animation",
"label": "Animation",
"default": "none",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "fadeIn",
"label": "Fade in"
},
{
"value": "fadeInDown",
"label": "Fade in down"
},
{
"value": "fadeInLeft",
"label": "Fade in left"
},
{
"value": "fadeInRight",
"label": "Fade in right"
},
{
"value": "slideInLeft",
"label": "Slide in left"
},
{
"value": "slideInRight",
"label": "Slide in right"
},
{
"value": "zoomIn",
"label": "Zoom in"
}
]
}
]
},
{
"type": "video",
"name": "Video",
"settings": [
{
"type": "select",
"id": "aspect_ratio",
"label": "Aspect ratio",
"options": [
{
"value": "16:9",
"label": "16:9"
},
{
"value": "4:3",
"label": "4:3"
}
],
"default": "16:9"
},
{
"type": "checkbox",
"id": "autoplay",
"label": "Autoplay video",
"info": "Limited browser support for autoplaying video. [Learn more](https:\/\/help.outofthesandbox.com\/hc\/en-us\/articles\/360000661568)",
"default": false
},
{
"type": "checkbox",
"id": "autoloop",
"label": "Autoloop video",
"default": true
},
{
"type": "video_url",
"id": "iframe_video",
"label": "YouTube or Vimeo video URL",
"accept": ["youtube", "vimeo"],
"default": "https://www.youtube.com/watch?v=8NxS0vrPcsA"
},
{
"type": "checkbox",
"id": "controls",
"label": "Enable HTML5 video controls",
"default": true
},
{
"type": "text",
"id": "html5_video",
"label": "HTML5 MP4/OGV File URL"
},
{
"type": "header",
"content": "Content"
},
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "1600 x 900px recommended"
},
{
"type": "text",
"id": "pretext",
"label": "Preheading"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Featured video"
},
{
"type": "text",
"id": "subtitle",
"label": "Subheading",
"default": "Embed a Youtube or Vimeo video."
},
{
"type": "color",
"id": "pretext_color",
"label": "Preheading",
"default": "#000000"
},
{
"type": "color",
"id": "heading_color",
"label": "Heading",
"default": "#000000"
},
{
"type": "color",
"id": "subheading_color",
"label": "Subheading",
"default": "#000000"
},
{
"type": "select",
"id": "horizontal_text_position",
"label": "Horizontal position",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "select",
"id": "vertical_text_position",
"label": "Vertical position",
"options": [
{
"value": "start",
"label": "Top"
},
{
"value": "center",
"label": "Middle"
},
{
"value": "end",
"label": "Bottom"
}
],
"default": "center"
},
{
"type": "select",
"id": "text_align",
"label": "Text alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "text",
"id": "button_label",
"label": "Button label",
"default": "Play video"
},
{
"type": "select",
"id": "button_style",
"label": "Button style",
"default": "button--secondary",
"options": [
{
"value": "button--primary",
"label": "Primary"
},
{
"value": "button--secondary",
"label": "Secondary"
},
{
"value": "button--link-style",
"label": "Link style"
}
]
},
{
"type": "header",
"content": "Overlay"
},
{
"type": "select",
"id": "overlay_style",
"label": "Overlay style",
"default": "text_only",
"options": [
{
"value": "full",
"label": "Full"
},
{
"value": "text_only",
"label": "Text only"
},
{
"value": "none",
"label": "None"
}
]
},
{
"type": "color",
"id": "video_overlay_color",
"label": "Overlay",
"default": "#ffffff"
},
{
"type": "color",
"id": "gradient",
"label": "Gradient",
"default": "rgba(0,0,0,0)"
},
{
"type": "range",
"id": "gradient_rotation",
"label": "Gradient rotation",
"min": 0,
"max": 180,
"default": 180,
"unit": "deg",
"step": 10
},
{
"type": "range",
"id": "background_opacity",
"label": "Background opacity",
"default": 77,
"min": 0,
"max": 100,
"unit": "%"
},
{
"type": "range",
"id": "text_width",
"label": "Text width",
"min": 40,
"max": 100,
"default": 70,
"unit": "%"
},
{
"type": "header",
"content": "Mobile"
},
{
"type": "checkbox",
"id": "mobile_text_below_video",
"label": "Show text below image",
"default": true
},
{
"type": "color",
"id": "pretext_color_mobile",
"label": "Preheading",
"default": "rgba(0,0,0,0)"
},
{
"type": "color",
"id": "heading_color_mobile",
"label": "Heading",
"default": "rgba(0,0,0,0)"
},
{
"type": "color",
"id": "subheading_color_mobile",
"label": "Subheading",
"default": "rgba(0,0,0,0)"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "width",
"label": "Width",
"default": "wide",
"options": [
{
"value": "half",
"label": "Half"
},
{
"value": "standard",
"label": "Standard"
},
{
"value": "wide",
"label": "Wide"
}
]
},
{
"type": "range",
"id": "padding_top",
"label": "Top spacing",
"min": 0,
"max": 80,
"default": 20,
"unit": "px"
},
{
"type": "range",
"id": "padding_bottom",
"label": "Bottom spacing",
"min": 0,
"max": 80,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "padding_left",
"label": "Left spacing",
"min": 0,
"max": 80,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "padding_right",
"label": "Right spacing",
"default": 0,
"min": 0,
"max": 80,
"unit": "px"
},
{
"type": "select",
"id": "animation",
"label": "Animation",
"default": "none",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "fadeIn",
"label": "Fade in"
},
{
"value": "fadeInDown",
"label": "Fade in down"
},
{
"value": "fadeInLeft",
"label": "Fade in left"
},
{
"value": "fadeInRight",
"label": "Fade in right"
},
{
"value": "slideInLeft",
"label": "Slide in left"
},
{
"value": "slideInRight",
"label": "Slide in right"
},
{
"value": "zoomIn",
"label": "Zoom in"
}
]
}
]
}
],
"default": {
"settings": {
},
"blocks": [
{
"type": "recommended_products",
"settings": {
}
}
]
}
}
{% endschema %}
Hi Gina, I have noticed that the tab content isnt active in line with the tab labels.
EG: if overview is blank features label is active but you have to click on the feature tab to see its value?
Can you give a steer please?