I would like to add a similar section to image with text overlay but instead of text, an image (design lockup/logo). Does anyone have the code to add this?
Hello There,
Please share your store URL and Screenshot.
So that I will check and let you know the exact solution here.
Please provide your store URL and screenshot of the change you want. so that I can give it a try
Hi @sheadooleyco ,
Can you send me the code of the file, I will help you check it. It could be sections > image-with-text-overlay.liquid file.
{% style %}
{%- if section.settings.height == 'fixed' -%}
#section-id-{{ section.id }} .fixed-height-item {
height: {{ section.settings.height_mobile }}px;
}
{%- endif -%}
#section-id-{{ section.id }} .overlay-text__title {
font-size: {{ section.settings.title_size_mobile }}px;
{%- if section.settings.title_size_mobile >= 90 -%}
line-height: 1em;
{%- endif %}
}
@media (min-width: 768px) {
{%- if section.settings.height == 'fixed' -%}
#section-id-{{ section.id }} .fixed-height-item {
height: {{ section.settings.height_desktop }}px;
}
{%- endif -%}
#section-id-{{ section.id }} .overlay-text__title {
{%- assign title_size_medium = section.settings.title_size | times: 0.7 | at_least: section.settings.title_size_mobile -%}
font-size: {{ title_size_medium }}px;
{%- if title_size_medium >= 90 -%}
line-height: 1em;
{%- endif %}
}
}
@media (min-width: 1100px) {
#section-id-{{ section.id }} .overlay-text__title {
font-size: {{ section.settings.title_size }}px;
{%- if section.settings.title_size >= 90 -%}
line-height: 1em;
{%- endif %}
}
}
{% endstyle %}
{%- unless section.settings.full_width -%}
{%- endunless -%}
{%- liquid
assign show_overlay_text = false
if section.settings.title != blank or section.settings.subheading != blank or section.settings.text != blank or section.settings.button_label_1 != blank or section.settings.button_label_2 != blank
assign show_overlay_text = true
assign wrap_image_with_link = true
if section.settings.image_link == blank or section.settings.text contains '' or section.settings.button_url_1 != blank or section.settings.button_url_2 != blank
assign wrap_image_with_link = false
endif
endif
-%}
{%- if wrap_image_with_link -%}
{%- endif -%}
{%- if section.settings.image == blank -%}
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
{%- else -%}
{%- if section.settings.height == 'adapt' -%}
{%- assign aspect_ratio = section.blocks.first.settings.image.aspect_ratio | default: 2.0 -%}
{%- endif -%}
{% if section.settings.mobile_image != blank %}
{%- if section.settings.height == 'adapt' -%}
{%- assign aspect_ratio = section.blocks.first.settings.mobile_image.aspect_ratio | default: 2.0 -%}
{%- endif -%}
{% endif %}
{%- endif -%}
{%- if show_overlay_text -%}
{%- if section.settings.subheading != blank -%}
{{ section.settings.subheading | escape }}
{%- endif -%}
{%- if section.settings.title != blank -%}
## {{ section.settings.title | newline_to_br }}
{%- endif -%}
{%- if section.settings.text != blank -%}
{{ section.settings.text }}
{%- endif -%}
{%- if section.settings.button_label_1 != blank or section.settings.button_label_2 != blank -%}
{%- if wrap_image_with_link -%}
{%- if section.settings.button_label_1 != blank -%}
{{ section.settings.button_label_1 }}
{%- endif -%}
{%- if section.settings.button_label_2 != blank -%}
{{ section.settings.button_label_2 }}
{%- endif -%}
{%- else -%}
{%- if section.settings.button_label_1 != blank -%}
{{ section.settings.button_label_1 }}
{%- endif -%}
{%- if section.settings.button_label_2 != blank -%}
{{ section.settings.button_label_2 }}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- if wrap_image_with_link -%}
{%- endif -%}
{%- unless section.settings.full_width -%}
{%- endunless -%}
{% schema %}
{
"name": "Image with text overlay",
"class": "section-image-with-text-overlay",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "2048 x 1024px recommended"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Mobile image",
"info": "1024px x 1024px recommended"
},
{
"type": "select",
"id": "image_position",
"label": "Image alignment",
"info": "Used to keep the subject of your image in view",
"default": "center center",
"options": [
{
"value": "top left",
"label": "Top left"
},
{
"value": "top center",
"label": "Top center"
},
{
"value": "top right",
"label": "Top right"
},
{
"value": "center left",
"label": "Middle left"
},
{
"value": "center center",
"label": "Middle center"
},
{
"value": "center right",
"label": "Middle right"
},
{
"value": "bottom left",
"label": "Bottom left"
},
{
"value": "bottom center",
"label": "Bottom center"
},
{
"value": "bottom right",
"label": "Bottom right"
}
]
},
{
"type": "select",
"id": "mobile_image_position",
"label": "Mobile image alignment",
"options": [
{
"value": "left top",
"label": "Top left"
},
{
"value": "center top",
"label": "Top center"
},
{
"value": "right top",
"label": "Top right"
},
{
"value": "left center",
"label": "Middle left"
},
{
"value": "center center",
"label": "Middle center"
},
{
"value": "right center",
"label": "Middle right"
},
{
"value": "left bottom",
"label": "Bottom left"
},
{
"value": "center bottom",
"label": "Bottom center"
},
{
"value": "right bottom",
"label": "Bottom right"
}
],
"default": "center center"
},
{
"type": "radio",
"id": "height",
"label": "Image height",
"options": [
{
"value": "adapt",
"label": "Natural"
},
{
"value": "full",
"label": "Full screen"
},
{
"value": "fixed",
"label": "Fixed height"
}
],
"default": "fixed"
},
{
"type": "range",
"id": "height_desktop",
"min": 200,
"max": 1000,
"step": 20,
"unit": "px",
"label": "Desktop fixed height",
"default": 600
},
{
"type": "range",
"id": "height_mobile",
"min": 100,
"max": 1000,
"step": 20,
"unit": "px",
"label": "Mobile fixed height",
"default": 460
},
{
"type": "url",
"id": "image_link",
"label": "Image link",
"info": "Not used if buttons or text contain links"
},
{
"type": "text",
"id": "subheading",
"label": "Subheading",
"default": "Tell your story"
},
{
"type": "textarea",
"id": "title",
"label": "Heading",
"default": "Two line\ntext heading"
},
{
"type": "range",
"id": "title_size",
"min": 20,
"max": 150,
"step": 2,
"unit": "px",
"label": "Desktop heading text size",
"default": 84
},
{
"type": "range",
"id": "title_size_mobile",
"min": 20,
"max": 150,
"step": 2,
"unit": "px",
"label": "Mobile heading text size",
"default": 46
},
{
"type": "checkbox",
"id": "use_h1",
"label": "Set as primary page heading",
"info": "Uses # tag (used for SEO and accessibility). One per page recommended.",
"default": false
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "
And optional subtext
"
},
{
"type": "checkbox",
"id": "enlarge_text",
"label": "Enlarge text",
"default": true
},
{
"type": "text",
"id": "button_label_1",
"label": "Button 1 label",
"default": "Shop this"
},
{
"type": "url",
"id": "button_url_1",
"label": "Button 1 link"
},
{
"type": "text",
"id": "button_label_2",
"label": "Button 2 label",
"default": "Shop all"
},
{
"type": "url",
"id": "button_url_2",
"label": "Button 2 link"
},
{
"type": "select",
"id": "text_alignment",
"label": "Text overlay position",
"options": [
{
"value": "top left",
"label": "Top left"
},
{
"value": "top center",
"label": "Top center"
},
{
"value": "top right",
"label": "Top right"
},
{
"value": "center left",
"label": "Middle left"
},
{
"value": "center center",
"label": "Middle center"
},
{
"value": "center right",
"label": "Middle right"
},
{
"value": "bottom left",
"label": "Bottom left"
},
{
"value": "bottom center",
"label": "Bottom center"
},
{
"value": "bottom right",
"label": "Bottom right"
}
],
"default": "center center"
},
{
"type": "header",
"content": "Layout"
},
{
"id": "full_width",
"type": "checkbox",
"label": "Full page width",
"default": true
},
{
"id": "mobile_overlay_under",
"type": "checkbox",
"label": "Show text below image on mobile",
"default": false
},
{
"id": "overlay_style",
"type": "select",
"label": "Overlay style",
"default": "shadow",
"options": [
{
"value": "full",
"label": "Tint"
},
{
"value": "box",
"label": "Box"
},
{
"value": "shadow",
"label": "Text shadow"
},
{
"value": "full image-overlay--bg-shadow",
"label": "Text shadow and tint"
},
{
"value": "no_background",
"label": "No background"
}
]
}
],
"presets": [
{
"name": "Image with text overlay",
"settings": {
}
}
]
}
{% endschema %}
store - https://sidecar-doughnuts.myshopify.com/
Password: FreshDough!
I would like to add a lockup like this on top of an image:
Hi @sheadooleyco ,
Please change code:
{% style %}
{%- if section.settings.height == 'fixed' -%}
#section-id-{{ section.id }} .fixed-height-item {
height: {{ section.settings.height_mobile }}px;
}
{%- endif -%}
#section-id-{{ section.id }} .overlay-text__title {
font-size: {{ section.settings.title_size_mobile }}px;
{%- if section.settings.title_size_mobile >= 90 -%}
line-height: 1em;
{%- endif %}
}
@media (min-width: 768px) {
{%- if section.settings.height == 'fixed' -%}
#section-id-{{ section.id }} .fixed-height-item {
height: {{ section.settings.height_desktop }}px;
}
{%- endif -%}
#section-id-{{ section.id }} .overlay-text__title {
{%- assign title_size_medium = section.settings.title_size | times: 0.7 | at_least: section.settings.title_size_mobile -%}
font-size: {{ title_size_medium }}px;
{%- if title_size_medium >= 90 -%}
line-height: 1em;
{%- endif %}
}
}
@media (min-width: 1100px) {
#section-id-{{ section.id }} .overlay-text__title {
font-size: {{ section.settings.title_size }}px;
{%- if section.settings.title_size >= 90 -%}
line-height: 1em;
{%- endif %}
}
}
{% endstyle %}
{%- unless section.settings.full_width -%}
{%- endunless -%}
{%- liquid
assign show_overlay_text = false
if section.settings.title != blank or section.settings.subheading != blank or section.settings.text != blank or section.settings.button_label_1 != blank or section.settings.button_label_2 != blank
assign show_overlay_text = true
assign wrap_image_with_link = true
if section.settings.image_link == blank or section.settings.text contains '' or section.settings.button_url_1 != blank or section.settings.button_url_2 != blank
assign wrap_image_with_link = false
endif
endif
-%}
{%- if wrap_image_with_link -%}
{%- endif -%}
{%- if section.settings.image == blank -%}
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
{%- else -%}
{%- if section.settings.height == 'adapt' -%}
{%- assign aspect_ratio = section.blocks.first.settings.image.aspect_ratio | default: 2.0 -%}
{%- endif -%}
{% if section.settings.mobile_image != blank %}
{%- if section.settings.height == 'adapt' -%}
{%- assign aspect_ratio = section.blocks.first.settings.mobile_image.aspect_ratio | default: 2.0 -%}
{%- endif -%}
{% endif %}
{%- endif -%}
{%- if section.settings.caption != blank -%}
{%- elsif show_overlay_text -%}
{%- if section.settings.subheading != blank -%}
{{ section.settings.subheading | escape }}
{%- endif -%}
{%- if section.settings.title != blank -%}
## {{ section.settings.title | newline_to_br }}
{%- endif -%}
{%- if section.settings.text != blank -%}
{{ section.settings.text }}
{%- endif -%}
{%- if section.settings.button_label_1 != blank or section.settings.button_label_2 != blank -%}
{%- if wrap_image_with_link -%}
{%- if section.settings.button_label_1 != blank -%}
{{ section.settings.button_label_1 }}
{%- endif -%}
{%- if section.settings.button_label_2 != blank -%}
{{ section.settings.button_label_2 }}
{%- endif -%}
{%- else -%}
{%- if section.settings.button_label_1 != blank -%}
{{ section.settings.button_label_1 }}
{%- endif -%}
{%- if section.settings.button_label_2 != blank -%}
{{ section.settings.button_label_2 }}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- if wrap_image_with_link -%}
{%- endif -%}
{%- unless section.settings.full_width -%}
{%- endunless -%}
{% schema %}
{
"name": "Image with text overlay",
"class": "section-image-with-text-overlay",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "2048 x 1024px recommended"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Mobile image",
"info": "1024px x 1024px recommended"
},
{
"type": "select",
"id": "image_position",
"label": "Image alignment",
"info": "Used to keep the subject of your image in view",
"default": "center center",
"options": [
{
"value": "top left",
"label": "Top left"
},
{
"value": "top center",
"label": "Top center"
},
{
"value": "top right",
"label": "Top right"
},
{
"value": "center left",
"label": "Middle left"
},
{
"value": "center center",
"label": "Middle center"
},
{
"value": "center right",
"label": "Middle right"
},
{
"value": "bottom left",
"label": "Bottom left"
},
{
"value": "bottom center",
"label": "Bottom center"
},
{
"value": "bottom right",
"label": "Bottom right"
}
]
},
{
"type": "select",
"id": "mobile_image_position",
"label": "Mobile image alignment",
"options": [
{
"value": "left top",
"label": "Top left"
},
{
"value": "center top",
"label": "Top center"
},
{
"value": "right top",
"label": "Top right"
},
{
"value": "left center",
"label": "Middle left"
},
{
"value": "center center",
"label": "Middle center"
},
{
"value": "right center",
"label": "Middle right"
},
{
"value": "left bottom",
"label": "Bottom left"
},
{
"value": "center bottom",
"label": "Bottom center"
},
{
"value": "right bottom",
"label": "Bottom right"
}
],
"default": "center center"
},
{
"type": "radio",
"id": "height",
"label": "Image height",
"options": [
{
"value": "adapt",
"label": "Natural"
},
{
"value": "full",
"label": "Full screen"
},
{
"value": "fixed",
"label": "Fixed height"
}
],
"default": "fixed"
},
{
"type": "range",
"id": "height_desktop",
"min": 200,
"max": 1000,
"step": 20,
"unit": "px",
"label": "Desktop fixed height",
"default": 600
},
{
"type": "range",
"id": "height_mobile",
"min": 100,
"max": 1000,
"step": 20,
"unit": "px",
"label": "Mobile fixed height",
"default": 460
},
{
"type": "url",
"id": "image_link",
"label": "Image link",
"info": "Not used if buttons or text contain links"
},
{
"type": "image_picker",
"id": "caption",
"label": "Caption image"
},
{
"type": "text",
"id": "subheading",
"label": "Subheading",
"default": "Tell your story"
},
{
"type": "textarea",
"id": "title",
"label": "Heading",
"default": "Two line\ntext heading"
},
{
"type": "range",
"id": "title_size",
"min": 20,
"max": 150,
"step": 2,
"unit": "px",
"label": "Desktop heading text size",
"default": 84
},
{
"type": "range",
"id": "title_size_mobile",
"min": 20,
"max": 150,
"step": 2,
"unit": "px",
"label": "Mobile heading text size",
"default": 46
},
{
"type": "checkbox",
"id": "use_h1",
"label": "Set as primary page heading",
"info": "Uses # tag (used for SEO and accessibility). One per page recommended.",
"default": false
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "
And optional subtext
"
},
{
"type": "checkbox",
"id": "enlarge_text",
"label": "Enlarge text",
"default": true
},
{
"type": "text",
"id": "button_label_1",
"label": "Button 1 label",
"default": "Shop this"
},
{
"type": "url",
"id": "button_url_1",
"label": "Button 1 link"
},
{
"type": "text",
"id": "button_label_2",
"label": "Button 2 label",
"default": "Shop all"
},
{
"type": "url",
"id": "button_url_2",
"label": "Button 2 link"
},
{
"type": "select",
"id": "text_alignment",
"label": "Text overlay position",
"options": [
{
"value": "top left",
"label": "Top left"
},
{
"value": "top center",
"label": "Top center"
},
{
"value": "top right",
"label": "Top right"
},
{
"value": "center left",
"label": "Middle left"
},
{
"value": "center center",
"label": "Middle center"
},
{
"value": "center right",
"label": "Middle right"
},
{
"value": "bottom left",
"label": "Bottom left"
},
{
"value": "bottom center",
"label": "Bottom center"
},
{
"value": "bottom right",
"label": "Bottom right"
}
],
"default": "center center"
},
{
"type": "header",
"content": "Layout"
},
{
"id": "full_width",
"type": "checkbox",
"label": "Full page width",
"default": true
},
{
"id": "mobile_overlay_under",
"type": "checkbox",
"label": "Show text below image on mobile",
"default": false
},
{
"id": "overlay_style",
"type": "select",
"label": "Overlay style",
"default": "shadow",
"options": [
{
"value": "full",
"label": "Tint"
},
{
"value": "box",
"label": "Box"
},
{
"value": "shadow",
"label": "Text shadow"
},
{
"value": "full image-overlay--bg-shadow",
"label": "Text shadow and tint"
},
{
"value": "no_background",
"label": "No background"
}
]
}
],
"presets": [
{
"name": "Image with text overlay",
"settings": {
}
}
]
}
{% endschema %}
Then you just need to go to Customize > Sections and upload the image at ‘Caption image’, it will display fine.
This is great! I just added a new section naming it - image over image overlay and swapped out the necessary code + adjusting the size of the image. Thanks so much!!!
Hi @sheadooleyco ,
If you have any further questions, you can contact me.
Happy to help you.
Hi! One more question - am I able to do the same thing but for slideshow?
Continue to have the image(logo) stay static on top of the rotating slideshow? Here is the code for slideshow below-
{% style %}
{%- if section.settings.height == 'fixed' -%}
#section-id-{{ section.id }} .fixed-height-item {
height: {{ section.settings.height_mobile }}px;
}
{%- endif -%}
{%- for block in section.blocks -%}
#section-id-{{ section.id }} .slide-{{ forloop.index }} .overlay-text__title {
font-size: {{ block.settings.title_size_mobile }}px;
{%- if block.settings.title_size_mobile >= 90 -%}
line-height: 1em;
{%- endif %}
}
{%- endfor -%}
@media (min-width: 768px) {
{%- if section.settings.height == 'fixed' -%}
#section-id-{{ section.id }} .fixed-height-item {
height: {{ section.settings.height_desktop }}px;
}
{%- endif -%}
{%- for block in section.blocks -%}
#section-id-{{ section.id }} .slide-{{ forloop.index }} .overlay-text__title {
{%- assign title_size_medium = block.settings.title_size | times: 0.7 | at_least: block.settings.title_size_mobile -%}
font-size: {{ title_size_medium }}px;
{%- if title_size_medium >= 90 -%}
line-height: 1em;
{%- endif %}
}
{%- endfor -%}
}
@media (min-width: 1100px) {
{%- for block in section.blocks -%}
#section-id-{{ section.id }} .slide-{{ forloop.index }} .overlay-text__title {
font-size: {{ block.settings.title_size }}px;
{%- if block.settings.title_size >= 90 -%}
line-height: 1em;
{%- endif %}
}
{%- endfor -%}
}
{% endstyle %}
{%- unless section.settings.full_width -%}
{%- endunless -%}
{%- for block in section.blocks -%}
{%- liquid
assign show_overlay_text = false
if block.settings.title != blank or block.settings.subheading != blank or block.settings.text != blank or block.settings.button_label_1 != blank or block.settings.button_label_2 != blank
assign show_overlay_text = true
assign wrap_slide_with_link = true
if block.settings.slide_link == blank or block.settings.text contains '' or block.settings.button_url_1 != blank or block.settings.button_url_2 != blank
assign wrap_slide_with_link = false
endif
endif
-%}
{%- if wrap_slide_with_link -%}
{%- endif -%}
{%- if block.settings.image == blank -%}
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
{%- else -%}
{%- if section.settings.height == 'adapt' -%}
{%- assign aspect_ratio = section.blocks.first.settings.image.aspect_ratio | default: 2.0 -%}
{%- endif -%}
{% if block.settings.mobile_image != blank %}
{%- if section.settings.height == 'adapt' -%}
{%- assign aspect_ratio = section.blocks.first.settings.mobile_image.aspect_ratio | default: 2.0 -%}
{%- endif -%}
{% endif %}
{%- endif -%}
{%- if show_overlay_text -%}
{%- if block.settings.subheading != blank -%}
{{ block.settings.subheading | escape }}
{%- endif -%}
{%- if block.settings.title != blank -%}
## {{ block.settings.title | newline_to_br }}
{%- endif -%}
{%- if block.settings.text != blank -%}
{{ block.settings.text }}
{%- endif -%}
{%- if block.settings.button_label_1 != blank or block.settings.button_label_2 != blank -%}
{%- if wrap_slide_with_link -%}
{%- if block.settings.button_label_1 != blank -%}
{{ block.settings.button_label_1 }}
{%- endif -%}
{%- if block.settings.button_label_2 != blank -%}
{{ block.settings.button_label_2 }}
{%- endif -%}
{%- else -%}
{%- if block.settings.button_label_1 != blank -%}
{{ block.settings.button_label_1 }}
{%- endif -%}
{%- if block.settings.button_label_2 != blank -%}
{{ block.settings.button_label_2 }}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- if wrap_slide_with_link -%}
{%- endif -%}
{%- endfor -%}
{%- unless section.settings.full_width -%}
{%- endunless -%}
{% schema %}
{
"name": "Slideshow",
"class": "section-slideshow",
"max_blocks": 8,
"settings": [
{
"type": "radio",
"id": "height",
"label": "Slide height",
"options": [
{
"value": "adapt",
"label": "Adapt to first image"
},
{
"value": "full",
"label": "Full screen"
},
{
"value": "fixed",
"label": "Fixed height"
}
],
"default": "fixed"
},
{
"type": "range",
"id": "height_desktop",
"min": 200,
"max": 1000,
"step": 20,
"unit": "px",
"label": "Desktop fixed height",
"default": 600
},
{
"type": "range",
"id": "height_mobile",
"min": 100,
"max": 1000,
"step": 20,
"unit": "px",
"label": "Mobile fixed height",
"default": 460
},
{
"id": "full_width",
"type": "checkbox",
"label": "Full page width",
"default": true
},
{
"id": "mobile_overlay_under",
"type": "checkbox",
"label": "Show text below image on mobile",
"default": false
},
{
"id": "overlay_style",
"type": "select",
"label": "Overlay style",
"default": "shadow",
"options": [
{
"value": "full",
"label": "Tint"
},
{
"value": "box",
"label": "Box"
},
{
"value": "shadow",
"label": "Text shadow"
},
{
"value": "full image-overlay--bg-shadow",
"label": "Text shadow and tint"
},
{
"value": "no_background",
"label": "No background"
}
]
},
{
"type": "header",
"content": "Slideshow navigation"
},
{
"type": "select",
"id": "slide_transition",
"label": "Transition",
"options": [
{
"value": "zoom",
"label": "Zoom"
},
{
"value": "fade",
"label": "Fade"
},
{
"value": "slide",
"label": "Slide"
},
{
"value": "slide_fade",
"label": "Slide & Fade"
},
{
"value": "instant",
"label": "Instant"
}
],
"default": "fade"
},
{
"id": "slide_navigation",
"type": "select",
"label": "Slide navigation style",
"default": "arrows",
"options": [
{
"value": "arrows",
"label": "Arrows"
},
{
"value": "dots",
"label": "Dots"
},
{
"value": "none",
"label": "None"
}
]
},
{
"id": "autoplay",
"type": "checkbox",
"label": "Auto-rotate slides",
"default": true
},
{
"type": "range",
"id": "autoplay_speed",
"min": 1,
"max": 20,
"step": 1,
"unit": "s",
"label": "Change slides every",
"default": 7
}
],
"blocks": [
{
"type": "image",
"name": "Slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "2048 x 1024px recommended"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Mobile image",
"info": "1024px x 1024px recommended"
},
{
"type": "select",
"id": "image_position",
"label": "Desktop image alignment",
"info": "Used to keep the subject of your image in view",
"default": "center center",
"options": [
{
"value": "top left",
"label": "Top left"
},
{
"value": "top center",
"label": "Top center"
},
{
"value": "top right",
"label": "Top right"
},
{
"value": "center left",
"label": "Middle left"
},
{
"value": "center center",
"label": "Middle center"
},
{
"value": "center right",
"label": "Middle right"
},
{
"value": "bottom left",
"label": "Bottom left"
},
{
"value": "bottom center",
"label": "Bottom center"
},
{
"value": "bottom right",
"label": "Bottom right"
}
]
},
{
"type": "select",
"id": "mobile_image_position",
"label": "Mobile image alignment",
"options": [
{
"value": "left top",
"label": "Top left"
},
{
"value": "center top",
"label": "Top center"
},
{
"value": "right top",
"label": "Top right"
},
{
"value": "left center",
"label": "Middle left"
},
{
"value": "center center",
"label": "Middle center"
},
{
"value": "right center",
"label": "Middle right"
},
{
"value": "left bottom",
"label": "Bottom left"
},
{
"value": "center bottom",
"label": "Bottom center"
},
{
"value": "right bottom",
"label": "Bottom right"
}
],
"default": "center center"
},
{
"type": "url",
"id": "slide_link",
"label": "Slide link",
"info": "Not used if buttons or text contain links"
},
{
"type": "text",
"id": "subheading",
"label": "Subheading",
"default": "Tell your story"
},
{
"type": "textarea",
"id": "title",
"label": "Heading",
"default": "Two line\nslide heading"
},
{
"type": "range",
"id": "title_size",
"min": 20,
"max": 150,
"step": 2,
"unit": "px",
"label": "Desktop heading text size",
"default": 84
},
{
"type": "range",
"id": "title_size_mobile",
"min": 20,
"max": 150,
"step": 2,
"unit": "px",
"label": "Mobile heading text size",
"default": 46
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "
And optional subtext
"
},
{
"type": "checkbox",
"id": "enlarge_text",
"label": "Enlarge text",
"default": true
},
{
"type": "text",
"id": "button_label_1",
"label": "Button 1 label",
"default": "Shop this"
},
{
"type": "url",
"id": "button_url_1",
"label": "Button 1 link"
},
{
"type": "text",
"id": "button_label_2",
"label": "Button 2 label",
"default": "Shop all"
},
{
"type": "url",
"id": "button_url_2",
"label": "Button 2 link"
},
{
"type": "select",
"id": "text_alignment",
"label": "Text overlay position",
"options": [
{
"value": "top left",
"label": "Top left"
},
{
"value": "top center",
"label": "Top center"
},
{
"value": "top right",
"label": "Top right"
},
{
"value": "center left",
"label": "Middle left"
},
{
"value": "center center",
"label": "Middle center"
},
{
"value": "center right",
"label": "Middle right"
},
{
"value": "bottom left",
"label": "Bottom left"
},
{
"value": "bottom center",
"label": "Bottom center"
},
{
"value": "bottom right",
"label": "Bottom right"
}
],
"default": "center center"
}
]
}
],
"presets": [
{
"name": "Slideshow",
"settings": {
},
"blocks": [
{
"type": "image"
},
{
"type": "image"
}
]
}
]
}
{% endschema %}
Hi @sheadooleyco ,
You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.