According to Shopify theme tutorial https://help.shopify.com/themes/development/theme-editor/settings-schema
files, we can define theme setting through set {% schema %} part like the following example:
{% schema %}
{
"name": "Line",
"class": "index-section",
"settings": [
{
"type": "radio",
"id": "small_line",
"label": "Correct Gap",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "gap1",
"label": "Different Gap"
}
],
"default": "none"
}
],
"presets": [
{
"name": "Line",
"category": "Design",
"settings": {
}
}
]
}
{% endschema %}
My question if there is a way we can set this settings to be dynamic in the schema part like define "small_line" options as a variable in the above example, something similar to the following
{% schema %}
{
"name": "Line",
"class": "index-section",
"settings": [
{
"type": "radio",
"id": "small_line",
"label": "Correct Gap",
"options": MY_OPTIONS_VAR,
"default": "none"
}
],
"presets": [
{
"name": "Line",
"category": "Design",
"settings": {
}
}
]
}
{% endschema %}
No you can't add any liquid code in your schema object.
Everything there needs to be entered as static information.
Related
I have a section sections/two-col-cta.liquid with a schema defined as per below:
{% schema %}
{
"name": "Two Column CTA",
"class": "section",
"settings": [
{
"type": "select",
"id": "color_select",
"options": [
{
"value": "option_1",
"label": "option_1"
},
{
"value": "option_2",
"label": "option_2"
},
{
"value": "option_3",
"label": "option_3"
},
{
"value": "option_4",
"label": "option_4"
},
{
"value": "option_5",
"label": "option_5"
}
],
"default": "image_first",
"label": "t:sections.two-col-content-img.settings.layout.label",
"info": "t:sections.two-col-content-img.settings.layout.info"
}
]
}
{% endschema %}
This same color_select setting is used/duplicated across multiple different sections (sections/.liquid files). Is there a way I can define this setting globally and just pull it into my sections instead of re defining it every time I want to a color select?
I have multiple blogs on my Shopify site. I'm trying to display posts from ALL blogs on the site in the featured section on the homepage. However, when I attempt to select them in the admin area, it only allows me to select one at a time.
What do I need to put in the {% schema %} (or template code) to allow me to select more than one blog in the theme's admin area, thus displaying posts from more than one blog in featured section in the template?
Here is my current {% schema %}:
{% schema %}
{
"name": "Blog posts",
"class": "index-section",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Blog posts"
},
{
"id": "blog",
"type": "blog",
"label": "Blog"
},
{
"type": "range",
"id": "post_limit",
"label": "Posts",
"min": 3,
"max": 12,
"step": 3,
"default": 3
},
{
"type": "checkbox",
"id": "blog_show_author",
"label": "Show author",
"default": false
},
{
"type": "checkbox",
"id": "blog_show_date",
"label": "Show date",
"default": true
},
{
"type": "checkbox",
"id": "show_view_all",
"label": "Show 'View all' button",
"default": false
}
],
"presets": [
{
"name": "Blog posts",
"category": "Blog",
"settings": {
"blog": "News",
"post_limit": 3
}
}
]
}
{% endschema %}
Have you tried the simplest of Liquid constructions like:
{% for blog in blogs %}
<p>I am blog {{ blog.title }}</p>
{% endfor %}
That kind of thing? If you have many blogs, I would start with that. If you cannot iterate your existing blogs, you have no hope of showing off their contents in a section of your store, whatever that may be.
Could you try this? Just add some more block schema
<div class = "blog-container">
{% if section.settings.blog != blank %}
{% for blog in section.settings.blog %}
<p>{{blog.title}}</p>
{% endfor %}
{% endif %}
{% if section.settings.blogone != blank %}
{% for blog in section.settings.blogone %}
<p>{{blog.title}}</p>
{% endfor %}
{% endif %}
{% if section.settings.blogtwo != blank %}
{% for blog in section.settings.blogtwo %}
<p>{{blog.title}}</p>
{% endfor %}
{% endif % }
</div>
{% schema %}
{
"name": "Blog posts",
"class": "index-section",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Blog posts"
},
{
"id": "blog",
"type": "blog",
"label": "Blog"
},
{
"id": "blogtwo",
"type": "blog",
"label": "Blog Two"
},
{
"id": "blogthree",
"type": "blog",
"label": "Blog Three"
},
{
"type": "range",
"id": "post_limit",
"label": "Posts",
"min": 3,
"max": 12,
"step": 3,
"default": 3
},
{
"type": "checkbox",
"id": "blog_show_author",
"label": "Show author",
"default": false
},
{
"type": "checkbox",
"id": "blog_show_date",
"label": "Show date",
"default": true
},
{
"type": "checkbox",
"id": "show_view_all",
"label": "Show 'View all' button",
"default": false
}
],
"presets": [
{
"name": "Blog posts",
"category": "Blog",
"settings": {
"blog": "News",
"post_limit": 3
}
}
]
}
{% endschema %}
I need to create a custom section on Shopify and that custom section is called on every page
Create a file in the theme’s /sections directory for each page we’ll add sections to. For example, we might create /sections/about.liquid to be used with the About template. The markup in these files is, for the most part, a long switch statement followed by an accompanying schema. Like this:
{% for block in section.blocks %}
{% case block.type %}
{% when 'hero' %}
{% include 'snippet_hero-banner' %}
{% when 'program' %}
{% include 'snippet_module-program' %}
{% when 'coaching' %}
{% include 'snippet_coaching' %}
{% when 'shop' %}
{% include 'snippet_shop-now' %}
{% when 'promo' %}
{% include 'snippet_promo' %}
{% when 'comparison' %}
{% include 'snippet_comparison' %}
{% endcase %}
</div>
{% endfor %}
</div>
{% schema %}
{
"blocks": [
{
"type": "hero",
"name": "Hero Banner",
"settings": [
{
"id": "bannerImage",
"type": "image_picker",
"label": "Banner Image"
}
]
},
{
"type": "program",
"name": "Program Selector",
"settings": [
{
"id": "program",
"type": "radio",
"label": "Choose a program",
"options": [
{"value": "planA", "label": "Plan Type A"},
{"value": "planB", "label": "Plan Type B"},
{"value": "planC", "label": "Plan Type C"}
]
}
]
},
{
"type": "coaching",
"name": "Coaching",
"settings": [
{
"id": "coachingTitle",
"type": "text",
"label": "Title"
},
{
"id": "coachingSummary",
"type": "textarea",
"label": "Summary"
},
{
"id": "coachingImage",
"type": "image_picker",
"label": "Image"
}
]
},
{
"type": "shop",
"name": "Shop Now",
"settings": [
{
"id": "shopNowTitle",
"type": "text",
"label": "Title",
"default": "What do you have to lose? Shop now."
},
{
"id": "shopNowHeader1",
"type": "text",
"label": "Left Header",
"default": "The 4-1-1"
}
]
},
{
"type": "promo",
"name": "Promo",
"settings": [
{
"id": "promoTitle",
"type": "textarea",
"label": "Title"
},
{
"id": "promoSubtitle",
"type": "textarea",
"label": "Subtitle"
}
]
},
{
"type": "comparison",
"name": "Compare",
"settings": [
{
"id": "comparisonImage",
"type": "image_picker",
"label": "image"
},
{
"id": "comparisonTitle",
"type": "text",
"label": "Title"
},
{
"id": "comparisonSummary",
"type": "textarea",
"label": "Summary"
},
{
"id": "comparisonButtonLink",
"type": "url",
"label": "Button Link"
},
{
"id": "comparisonButtonText",
"type": "text",
"label": "Button Text"
}
]
}
]
}
{% endschema %}
Customize the page. When in the theme editor, you’ll see that the page has only one section–the one that was included within the template file. Unlike on the home page, you’ll need to “drill down” to see the available sections for the page.
We create snippets for each page element page that will be editable as a section. The code above uses include to reference markup from the /snippets directory based on the block’s type. That type, along with the block’s name, are denoted in the schema portion below the switch statement.
The id is the handle for a particular editable characteristic of the
block
The type denotes what kind of setting it is. For example:
A color type will generate a field in the customization sidebar which will allow you to choose from a color palette.
The label is simply the label for the field.
In the /templates directory, replace the markup in your page (for example, /templates/page.about.liquid) with something like this: {% section 'about' %} This will include the /sections/about.liquid file that we created in the previous step.
enter image description here
Click to edit this section, and we find that we are able to add any of the blocks we built–as long as we wrote the possibility into the case statement.
Make an element of a block customizable. This can be done by defining the settings in the section’s {% schema %} and using the {{ block.settings.yoursetting }} liquid tag to render the content. Now you can customize images, plain text, URLs, and more.
Results
Congratulations! If you’ve been following along then you’ve brought sections functionality to your entire shop.
enter image description here
This is the current code:
<img src="{{ block.settings.imageId| img_url: 'large'}}" />
{% schema %}
{
"name": "Single Mobile Image",
"class": "mobile-index-section",
"max_blocks": 1,
"blocks": [
{
"type": "image_picker",
"name": "Mobile Image",
"settings": [
{
"type": "image_picker",
"id": "imageId",
"label": "Mobile Image"
}
]
}
],
"presets": [
{
"name": "Custom Mobile Image",
"category": "Image",
"blocks": [
{
"type": "image_picker"
}
]
}
]
}
{% endschema %}
When using {{ block.settings.imageId| img_url: 'large'}} , I'm not getting the image which is added on shopify customization using image picker.
Please help me to find out where I did mistake.
sections.blocks is an array element, you need to loop it or target a specific index.
In your case {{ section.blocks[0].settings.imageId | img_url: '1024x'}} will get you the first block.
In addition don't use named sizes, they are deprecated: https://shopify.dev/docs/themes/liquid/reference/filters/deprecated-filters#named-size-parameters.
I'm trying to add the product url and image to a div within a slider. However, I added the product dropdown to the schema, but it isn't pulling the data to the div. Please find the schema below:
{% schema %}
{
"name": "Product-Slideshow",
"settings": [
{
"id": "text-box",
"type": "text",
"label": "Heading",
"default": "Title"
}
],
"blocks": [
{
"type": "select",
"name": "Add Product",
"settings": [
{
"type": "product",
"id": "id",
"url": "url",
"label": "text",
"info": "text"
},
]
}
],
"presets": [
{
"name": "Product-Slideshow",
"category": "Image",
"blocks": [
{
"type": "select"
},
{
"type": "select"
}
]
}
]
}
{% endschema %}
Here is the div it is to be placed in.
<div class="owl-carousel">
{% for block in section.blocks %}
<div><a href="{{ product.url }}" class="btn"><img src="{{ image.src |
product_img_url }}"></a></div>
{% endfor %}
</div>
Any help would be greatly appreciated.
You must call your block settings as explained here :
https://help.shopify.com/themes/liquid/objects/block#block-settings
For example, something like {{ block.settings.image }}