Related
I would like to add a style to a banner in the Shopify-Code. (A padding and a backgroudn color)
This banner has no deticated css that only applies to these kind of banners (or i can not find it) so i have to edit the element.style.
Could you help me how to edit this?
I attached an image with the changes i want to make
I think this is the part of the code where the changes should be made:
{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
{%- if section.settings.adapt_height_first_image and section.settings.image != blank -%}
{%- style -%}
#media screen and (max-width: 749px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before,
#Banner-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
#media screen and (min-width: 750px) {
#Banner-{{ section.id }}::before,
#Banner-{{ section.id }} .banner__media::before {
padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
{%- endstyle -%}
{%- endif -%}
{%- style -%}
#Banner-{{ section.id }}::after {
opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
}
{%- endstyle -%}
<div id="Banner-{{ section.id }}" class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.adapt_height_first_image and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}">
{%- if section.settings.image != blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
{%-liquid
assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
if section.settings.image_2 != blank
assign image_class = "banner__media-image-half"
endif
if section.settings.image_2 != blank and section.settings.stack_images_on_mobile
assign sizes = "(min-width: 750px) 50vw, 100vw"
elsif section.settings.image_2 != blank
assign sizes = "50vw"
else
assign sizes = "100vw"
endif
-%}
{{ section.settings.image | image_url: width: 1500 | image_tag:
loading: 'lazy',
width: section.settings.image.width,
height: image_height,
class: image_class,
sizes: sizes,
widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
alt: section.settings.image.alt | escape
} </div>
{%- elsif section.settings.image_2 == blank -%}
<div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}">
{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}
{%- if section.settings.image_2 != blank -%}
<div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}">
{%-liquid
assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
if section.settings.image != blank
assign image_class_2 = "banner__media-image-half"
endif
if section.settings.image != blank and section.settings.stack_images_on_mobile
assign sizes = "(min-width: 750px) 50vw, 100vw"
elsif section.settings.image != blank
assign sizes = "50vw"
else
assign sizes = "100vw"
endif
-%}
{{ section.settings.image_2 | image_url: width: 1500 | image_tag:
loading: 'lazy',
width: section.settings.image_2.width,
height: image_height_2,
class: image_class_2,
sizes: sizes,
widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
alt: section.settings.image_2.alt | escape
}}
</div>
{%- endif -%}
<div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width">
<div class="banner__box content-container content-container--full-width-mobile color-{{ section.settings.color_scheme }} gradient">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'heading' -%}
<h2 class="banner__heading {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
<span>{{ block.settings.heading | escape }}</span>
</h2>
{%- when 'text' -%}
<div class="banner__text {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
<span>{{ block.settings.text | escape }}</span>
</div>
{%- when 'buttons' -%}
<div class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_label_2 != blank %} banner__buttons--multiple{% endif %}" {{ block.shopify_attributes }}>
{%- if block.settings.button_label_1 != blank -%}
<a{% if block.settings.button_link_1 == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link_1 }}"{% endif %} class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}">{{ block.settings.button_label_1 | escape }}</a>
{%- endif -%}
{%- if block.settings.button_label_2 != blank -%}
<a{% if block.settings.button_link_2 == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link_2 }}"{% endif %} class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}">{{ block.settings.button_label_2 | escape }}</a>
{%- endif -%}
</div>
{%- endcase -%}
{%- endfor -%}
</div>
</div>
</div>
{% schema %}
{
"name": "t:sections.image-banner.name",
"tag": "section",
"class": "section",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:sections.image-banner.settings.image.label"
},
{
"type": "image_picker",
"id": "image_2",
"label": "t:sections.image-banner.settings.image_2.label"
},
{
"type": "range",
"id": "image_overlay_opacity",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"label": "t:sections.image-banner.settings.image_overlay_opacity.label",
"default": 0
},
{
"type": "select",
"id": "image_height",
"options": [
{
"value": "small",
"label": "t:sections.image-banner.settings.image_height.options__1.label"
},
{
"value": "medium",
"label": "t:sections.image-banner.settings.image_height.options__2.label"
},
{
"value": "large",
"label": "t:sections.image-banner.settings.image_height.options__3.label"
}
],
"default": "medium",
"label": "t:sections.image-banner.settings.image_height.label",
"info": "t:sections.image-banner.settings.image_height.info"
},
{
"type": "checkbox",
"id": "adapt_height_first_image",
"default": false,
"label": "t:sections.image-banner.settings.adapt_height_first_image.label",
"info": "t:sections.image-banner.settings.adapt_height_first_image.info"
},
{
"type": "select",
"id": "desktop_content_position",
"options": [
{
"value": "top-left",
"label": "t:sections.image-banner.settings.desktop_content_position.options__1.label"
},
{
"value": "top-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__2.label"
},
{
"value": "top-right",
"label": "t:sections.image-banner.settings.desktop_content_position.options__3.label"
},
{
"value": "middle-left",
"label": "t:sections.image-banner.settings.desktop_content_position.options__4.label"
},
{
"value": "middle-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__5.label"
},
{
"value": "middle-right",
"label": "t:sections.image-banner.settings.desktop_content_position.options__6.label"
},
{
"value": "bottom-left",
"label": "t:sections.image-banner.settings.desktop_content_position.options__7.label"
},
{
"value": "bottom-center",
"label": "t:sections.image-banner.settings.desktop_content_position.options__8.label"
},
{
"value": "bottom-right",
"label": "t:sections.image-banner.settings.desktop_content_position.options__9.label"
}
],
"default": "middle-center",
"label": "t:sections.image-banner.settings.desktop_content_position.label"
},
{
"type": "checkbox",
"id": "show_text_box",
"default": true,
"label": "t:sections.image-banner.settings.show_text_box.label"
},
{
"type": "select",
"id": "desktop_content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.image-banner.settings.desktop_content_alignment.options__3.label"
}
],
"default": "center",
"label": "t:sections.image-banner.settings.desktop_content_alignment.label"
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label",
"info": "t:sections.image-banner.settings.color_scheme.info"
},
{
"type": "header",
"content": "t:sections.image-banner.settings.header.content"
},
{
"type": "select",
"id": "mobile_content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.image-banner.settings.mobile_content_alignment.options__3.label"
}
],
"default": "center",
"label": "t:sections.image-banner.settings.mobile_content_alignment.label"
},
{
"type": "checkbox",
"id": "stack_images_on_mobile",
"default": true,
"label": "t:sections.image-banner.settings.stack_images_on_mobile.label"
},
{
"type": "checkbox",
"id": "show_text_below",
"default": true,
"label": "t:sections.image-banner.settings.show_text_below.label"
}
],
"blocks": [
{
"type": "heading",
"name": "t:sections.image-banner.blocks.heading.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "heading",
"default": "Image banner",
"label": "t:sections.image-banner.blocks.heading.settings.heading.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
}
]
},
{
"type": "text",
"name": "t:sections.image-banner.blocks.text.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "text",
"default": "Give customers details about the banner image(s) or content on the template.",
"label": "t:sections.image-banner.blocks.text.settings.text.label"
},
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "body",
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__1.label"
},
{
"value": "subtitle",
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__2.label"
},
{
"value": "caption-with-letter-spacing",
"label": "t:sections.image-banner.blocks.text.settings.text_style.options__3.label"
}
],
"default": "body",
"label": "t:sections.image-banner.blocks.text.settings.text_style.label"
}
]
},
{
"type": "buttons",
"name": "t:sections.image-banner.blocks.buttons.name",
"limit": 1,
"settings": [
{
"type": "text",
"id": "button_label_1",
"default": "Button label",
"label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label",
"info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info"
},
{
"type": "url",
"id": "button_link_1",
"label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_1",
"default": false,
"label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label"
},
{
"type": "text",
"id": "button_label_2",
"default": "Button label",
"label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label",
"info": "t:sections.image-banner.blocks.buttons.settings.button_label_2.info"
},
{
"type": "url",
"id": "button_link_2",
"label": "t:sections.image-banner.blocks.buttons.settings.button_link_2.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_2",
"default": false,
"label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_2.label"
}
]
}
],
"presets": [
{
"name": "t:sections.image-banner.presets.name",
"blocks": [
{
"type": "heading"
},
{
"type": "text"
},
{
"type": "buttons"
}
]
}
]
}
{% endschema %}
I attached an image with the changes i want to make.
Basically i addeted
padding: 0 5rem;
background-color: #FFFFFF;
to the element.style in google Chrome DevTool
For the last two weeks I've been taking a Shopify theme developer course and started developing my very own theme in Shopify. However, I have encountered a couple of strange problems. I currently have a header that contains a slideshow, where I can select images from the Shopify Customizer. However, I also need to display the main menu, and this is where the problem is. I have tried to add my menu in the schema like this:
{% schema %}
{
"name": "Main Menu",
"settings": [
{
"type": "link_list",
"id": "main_linklist",
"label": "Menu",
"default": "main-menu"
}
]
},
{
"name": "Homepage Carousel",
"settings": [
{
"type": "image_picker",
"id": "slide-1",
"label": "Slide 1"
},
{
"type": "image_picker",
"id": "slide-2",
"label": "Slide 2"
}
]
}
{% endschema %}
The error that I'm getting is 'Invalid JSON in tag 'schema'. I have also tried to make to schemas, but I quickly found out that this did not work. Can anyone point me in the right direction here? It has been driving me crazy for two days now, and I honestly can't find a fix for it.
You combining settings_schema.json and section {% schema %} logic, which is a "No no".
This is how a standard settings_schema.json should look like:
[
{
"name": "theme_info",
"theme_name": "Theme",
"theme_author": "N/A",
"theme_version": "1.0.0",
"theme_documentation_url": "https://help.shopify.com/manual/using-themes",
"theme_support_email": "theme-support#shopify.com"
},
{
"name": "General",
"settings": [
{
"type": "header",
"content": "Favicon"
},
{
"type": "image_picker",
"id": "favicon",
"label": "Favicon"
}
]
},
{
"name": "Social media",
"settings": [
{
"type": "header",
"content": "Social sharing image"
},
{
"type": "image_picker",
"id": "share_image",
"label": "Image"
}
]
},
{
"name": "Footer",
"settings": [
{
"type": "richtext",
"id": "copyright",
"label": "Copyright",
"info": "Use [year] to set the current year."
}
]
}
]
And this is how should a section {% schema %} look like.
{% schema %}
{
"name": "Slideshow",
"settings": [
{
"id": "header",
"type": "text",
"label": "Header",
"default": "Hello world"
},
{
"id": "content",
"type": "textarea",
"label": "Content"
}
],
"blocks": [
{
"type": "quote",
"name": "Quote",
"settings": [
{
"id": "content",
"type": "text",
"label": "Quote"
},
{
"id": "title",
"type": "text",
"label": "Title"
}
]
}
]
}
{% endschema %}
So to summarize you need to learn the difference between a settings_schema.json syntax and the section {% schema %} syntax.
At the moment I'm not sure if you are making your options inside the settings_schema.json or you are making a separate section. In both cases you need to fix the schema syntax.
If you are using the settings_schema.json there is no {% schema %} around the json.
If you are using a section {% schema %} you are allowed for only one object (if it's not a block):
{
"name": "Main Menu",
"settings": [
.....
]
}
Read the section docs: https://help.shopify.com/en/themes/development/sections
And the settings_schema docs: https://help.shopify.com/en/themes/development/theme-editor/settings-schema
I am using mustache in conjunction with enter link description herepattern lab to render out a list of items from a json data file. Given this data structure:
{
"states": {
"dropdown": {
"items": [
{
"title": "CA"
},
{
"title": "OR"
},
{
"title": "TX"
}
]
}
},
"roles": {
"dropdown": {
"items": [
{
"title": "Mid-level Office Manager"
},
{
"title": "Facility Manager"
},
{
"title": "Resources Coordinator"
}
]
}
}
}
If I do the following within my partial:
{{#states}}
{{#dropdown.items}}{{title}}{{/dropdown.items}}
{{/states}}
The names render out fine.
But if I do this:
{{#states}}
{{> molecules-dropdown-picker(btnDropdownToggleLabel: "OR")}}
{{/states}}
Where the dropdown picker partial has the following code:
{{#dropdown.items}}{{title}}{{/dropdown.items}}
It won't render. What am I doing wrong?
I figured this out by doing the following:
JSON:
{
"states": {
"inputTextLabel": "State",
"inputTextName": "address_state",
"btnDropdownToggleLabel": "OR",
"dropdownPickerItems": [
{
"dropdownItemTitle": "OR"
},
{
"dropdownItemTitle": "TX"
},
{
"dropdownItemTitle": "UT"
}
]
},
"roles": {
"inputTextLabel": "Company Role",
"inputTextName": "company_role",
"btnDropdownToggleLabel": "Facility Manager",
"dropdownPickerItems": [
{
"dropdownItemTitle": "Facility Manager"
},
{
"dropdownItemTitle": "Resources Manager"
},
{
"dropdownItemTitle": "Mid-level Manager"
}
]
}
}
FORM:
{{#states}}
{{> molecules-dropdown-picker-list}}
{{/states}}
DROPDOWN-PICKER-LIST:
<div class="dropdown-picker js-dropdown">
<ul class="dropdown-picker__list js-dropdown-list">
{{#dropdownPickerItems}}
{{> atoms-dropdown-picker-item}}
{{/dropdownPickerItems}}
</ul>
</div>
DROPDOWN-PICKER-ITEM:
<li class="dropdown-picker__item js-dropdown-item">
{{dropdownItemTitle}}
<span class="dropdown-picker__selected-check">
{{> atoms-icon(icon-type: "check-small") }}
</span>
</li>
I am trying to add a FAQ section with blocks to a Shopify theme. I am able to dynamically add the section without blocks, but once I try to add blocks I keep getting the error message
"An error prevented faq.liquid from being saved."
I am not sure exactly what the problem is or why its not working since that is a very vague error message.
Here is my code:
<hr>
<div id="section-faq">
<div class="section-header text-center">
<h3> {{ section.settings.text-box }} </h3>
</div>
{% for block in section.blocks %}
<div class="btn" id="faq">
<a href="{{ block.settings.text-box }}" class="btn">{{ block.settings.text
}}</a>
</div>
{% endfor %}
</div>
<hr>
{% schema %}
{
"name": "faq",
"max_blocks": 6,
"settings": [
{
"id": "text-box",
"type": "text",
"label": "Heading",
"default": "FAQ"
}
],
"blocks": [
{
"type": "QA",
"name": "QA",
"settings": [
{
"id": "text-box",
"type": "text",
"label": "Question",
"default": "Add Question"
},
{
"id": "text",
"type": "richtext",
"label": "Answer",
"default": "<p>Add your answer here</p>"
}
]
}
],
"presets": [
{
"name": "FAQ",
"category": "Faq"
}
]
}
{% endschema %}
I have checked and created new section and add your code and its working fine for me.
I am building a slick slider using Shopify new feature section. All want to is add the image that has the arrow going left and right.
With a Title, Description, and Button that user can change and add the link to everything with be on top of Carousel and change with everything some click on arrow or ghost buttons at the bottom
Here a ScreenShot.
{% if section.blocks.size > 0 %}
<!-- Slick Slider Wrapper -->
<div class="carousel-wrapper" style="background-color: red;">
<div class="carousel-info">
<!-- Title Slider Wrapper -->
<h3>{{ section.settings.carousel_title }}</h3>
<!-- Description Wrapper -->
<p>{{ section.settings.carousel_product_description }}</p>
<!-- Button Wrapper -->
<button>{{ section.settings.carousel_button_title }}</button>
</div>
<!-- Slick Slider -->
<div id="carousel-{{ section.id }}" class="carousel" data-slick='{"autoplay": {{ section.settings.carousel_autoplay }}}'>
{% for block in section.blocks %}
<div class="carousel-slide--{{ block.id }}" {{ block.shopify_attributes }} style="width:240px">
{% if block.settings.carousel_image != blank %}
<img class="carousel_image--{{ block.id }}" src="{{ block.settings.carousel_image | img_url: '240x' }}" style="max-width:240px;display:inline-block;padding:40px">
{% endif %}
</div>
{% endfor %}
</div>
<!-- ended of Slick Slider -->
</div>
</div>
{% endif %}
{% if section.blocks.size == 0 %}
<div class="placeholder-noblocks">
{{ 'homepage.onboarding.no_content' | t }}
</div>
{% endif %}
<!-- Slick Slider Wrapper -->
{% schema %}
{
"name": "Carousel",
"max_blocks": 8,
"settings": [
{
"type":"header",
"content":"Carousel option"
},
{
"type":"text",
"id":"carousel_title",
"label":"Carousel title",
"default":"Carousel main title"
},
"type": "text",
"id": "carousel_title",
"label":"Carousel title",
"default":"Carousel main title"
},
{
"type" "text",
"id": "carousel_product_description",
"label": "Carousel Description",
"default: Carousel Main Description"
},
{
"type": "url",
"id": "carousel_link",
"label": "Carousel title link"
},
{
"type":"header",
"content":"In depth carousel option"
},
{
"type": "checkbox",
"id": "carousel_autoplay",
"label": "Auto-rotate slides",
"default": false
},
{
"type":"color",
"id":"carousel_bg",
"label":"Carousel background",
"default":"#fff"
}
],
"blocks": [
{
"type": "image",
"name": "Image slide",
"settings": [
{
"type": "image_picker",
"id": "carousel_image",
"label": "Image"
},
{
"type": "url",
"id": "slide_link",
"label": "Slide link"
}
]
}
],
"presets": [{
"name": "Carousel",
"category": "Image",
"settings": {
"carousel_autoplay": false
},
"blocks": [
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
}
]
}]
}
{% endschema %}
You were missing an open curly brace before the word type and a colon after the second type object.
{
"name": "Carousel",
"max_blocks": 8,
"settings": [
{
"type":"header",
"content":"Carousel option"
},
{
"type":"text",
"id":"carousel_title",
"label":"Carousel title",
"default":"Carousel main title"
},
{
"type": "text",
"id": "carousel_title",
"label":"Carousel title",
"default":"Carousel main title"
},
{
"type": "text",
"id": "carousel_product_description",
"label": "Carousel Description",
"default: Carousel Main Description"
},
{
"type": "url",
"id": "carousel_link",
"label": "Carousel title link"
},
{
"type":"header",
"content":"In depth carousel option"
},
{
"type": "checkbox",
"id": "carousel_autoplay",
"label": "Auto-rotate slides",
"default": false
},
{
"type":"color",
"id":"carousel_bg",
"label":"Carousel background",
"default":"#fff"
}
],
"blocks": [
{
"type": "image",
"name": "Image slide",
"settings": [
{
"type": "image_picker",
"id": "carousel_image",
"label": "Image"
},
{
"type": "url",
"id": "slide_link",
"label": "Slide link"
}
]
}
],
"presets": [{
"name": "Carousel",
"category": "Image",
"settings": {
"carousel_autoplay": false
},
"blocks": [
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
}
]
}]
}