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.
Related
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
In a Shopify section I have an image picker block to make a gallery, and in the same section I have a url block to make any number of buttons.
The problem is both block types appear in the same 'Content' area of the theme editor. This makes it look quite confusing for an editor.
Is there a way to have 2 separate blocks areas, one for the image gallery and the other for buttons?
"blocks": [
{
"type": "button",
"name": "Button",
"settings": [
{
"type": "url",
"id": "button_link",
"label": "Button link"
}
]
},
{
"type": "image",
"name": "Image slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
}
]
}
]
No, at current there is no way to tell Shopify to display blocks in this way. All blocks can be arranged to be in any order, regardless of what the 'type' of each block is. Whoever is administering the store would need to manually arrange the blocks into a sensible order.
If you want to make it easier to split up your block types during the rendering of the items, you can use something like this:
{% assign image_blocks = section.blocks | where: 'type', 'image' %}
{% for block in image_blocks %}
<!-- Stuff -->
{% endfor %}
{% assign button_blocks = section.blocks | where: 'type', 'button' %}
{% for block in button_blocks %}
<!-- Stuff -->
{% endfor %}
Create 2 different sections and include both .e.g:
{% section 'buttons' %}
{% section 'images' %}
Where:
sections/buttons.liquid
{% schema %}
{
"name": "Buttons",
"class": "buttons-section",
"blocks": [
{
"type": "button",
"name": "Button",
"settings": [
{
"type": "URL",
"id": "button_link",
"label": "Button link"
}
]
}
]
}
{% endschema %}
sections/images.liquid
{% schema %}
{
"name": "Images",
"class": "images-section",
"blocks": [
{
"type": "image",
"name": "Image slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
}
]
}
]
}
{% endschema %}
So you'll get this:
I achieved success to add new block in Shopify using schema and Shopify liquid. I have added schema which is expected to adjust the width of an image one on left side and one for right side.I am quite close but something missing here.Is there something wrong with style="width:{{img_width}}vw" or Image width schema ? Thanks
Both image width slider does not make difference with image screenshot.
{% elsif block.type == 'side_by_side' %}
<div class="container">
<div class="eight columns image_column">
{% if block.settings.image-left %}
<p>
{% assign image_left_width = block.settings.image_width %}
<img src="{{ block.settings.image-left | img_url: '300x', scale: 2}}" style="width:{{image_left_width}}vw" alt="{{block.settings.image-left.alt}}" class="lazyload transition-in"/>
</p>
{% endif %}
</div>
<div class="eight columns image_column">
{% if block.settings.image-right %}
<p>
{% assign image_rigth_width = block.settings.image_width %}
<img src =" {{ block.settings.image-right | img_url: '300x', scale: 2}}" style="width:{{image_right_width}}vw" alt="{{block.settings.image-right.alt}}" class="lazyload transition-in" >
</p>
{% endif %}
</div>
</div>
Image block Schema
{
"type": "side_by_side",
"name": "side_by_side",
"settings": [
{
"type": "image_picker",
"id": "image-left",
"label": "Image-left"
},
{
"type": "range",
"id": "image_left_width",
"label": "Image width",
"min": 50,
"max": 100,
"step": 5,
"default": 100,
"unit": "vw"
},
{
"type": "image_picker",
"id": "image-right",
"label": "Image-right"
},
{
"type": "range",
"id": "image_right_width",
"label": "Image width",
"min": 50,
"max": 100,
"step": 5,
"default": 100,
"unit": "vw"
},
{
"type": "select",
"id": "layout",
"label": "Layout",
"default": "left",
"options": [
{
"value": "left",
"label": "Image on left"
},
{
"value": "right",
"label": "Image on right"
}
]
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Side by Side Engineering "
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Pair text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>"
},
{
"type": "select",
"id": "text_alignment",
"label": "Text alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "left"
},
{
"type": "text",
"id": "button_label",
"label": "Button label"
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
}
]
},
Thats because you are assigning a null value and using that null value.
{% assign image_left_width = block.settings.**image_width** %}
Note that, in your schema there is no element with id = image_width. You already have elements with id = image_left_width / image_right_width. But now, you are creating a new variable image_left_width and assigning it with a null value. Then you are setting your image width that null value. Why not just skip the "assign" code? i.e. delete that line. like..
<p>
<img src="{{ block.settings.image-left | img_url: '300x', scale: 2}}" style="width:{{block.settings.image_left_width}}vw" alt="{{block.settings.image-left.alt}}" class="lazyload transition-in"/>
</p>
If you still want to first assign into a new variable then do this.
{% assign image_left_width = block.settings.image_left_width %}
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.
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 }}