Related
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 %}
Hello I'm trying to edit an image make it smaller or custom size but not familiar with liquid. Thank you for the help guys. I added some code. I think its default as certain percentage but not sure. Let me know if you guys need some extra code or information from me.
// settings_data.json file
"index-newsletter": {
"type": "index-newsletter",
"settings": {
"title": "Newsletter",
"richtext": "<p>Subscribe to get special offers, free giveaways, and once-in-a-lifetime deals.<\/p>",
"width": "full",
"flex_align": "align--middle-left",
"text_color": "dark",
"height": "screen-height-one-third",
"bg_image": "shopify:\/\/shop_images\/Grazioso_Logo321321_db2a67b3-d13f-4d64-a73d-c82f176fd6a5.png",
"overlay_opacity": 50,
"overlay_color": "#ffffff"
}
},
<!-- /sections/newsletter.liquid -->
{%- assign img_url = section.settings.bg_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<style>
{%- if section.settings.text_color == 'white' -%}
.index-newsletter-{{ section.id }},
.index-newsletter-{{ section.id }} .input-group.newsletter-form input { color: #fff; }
{%- endif -%}
</style>
<div class="index-newsletter index-newsletter-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="newsletter">
<div class="wide-image js-overflow-container {{ section.settings.height }}"
data-aos-duration="500"
data-aos="fade-up">
<div class="hero__content__wrapper hero__content--transparent {{ section.settings.flex_align }}">
<div class="hero__content hero__content--{{ section.settings.width }} js-overflow-content">
<div class="newsletter__content">
{% if section.settings.title != '' %}
<h5 class="newsletter__title">{{ section.settings.title }}</h5>
{% endif %}
{% if collection.description != '' %}
<div class="rte">
{{ section.settings.richtext }}
</div>
{% endif %}
<div class="newsletter-signup">
{% include 'newsletter-form' %}
</div>
</div>
</div>
</div>
{% if section.settings.bg_image %}
{% if section.settings.height == 'image-height' %}
<img class="lazyload responsive-wide-image"
alt="{{ section.settings.bg_image.alt | default: section.settings.title }}"
src="{{ section.settings.bg_image | img_url: '18x' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]"
data-aspectratio="{{ section.settings.bg_image.aspect_ratio }}"
data-parent-fit="cover"
data-sizes="auto"/>
{% else %}
<div class="background-size-cover lazyload" data-bgset="{% include 'bgset', image: section.settings.bg_image %}"></div>
{% endif %}
<noscript>
<img src="{{ section.settings.bg_image | img_url: '1440x' }}" alt="{{ section.settings.bg_image.alt | default: collection.title }}" class="responsive-wide-image"/>
</noscript>
{% assign overlay_opacity = section.settings.overlay_opacity | times: 0.01 %}
<div class="image-overlay" style="background-color:{{ section.settings.overlay_color }} !important; opacity:{{ overlay_opacity }};"></div>
{% endif %}
</div>
</div>
{% schema %}
{
"name": "Newsletter",
"settings": [
{
"type": "header",
"content": "Content"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Newsletter"
},
{
"id": "richtext",
"type": "richtext",
"label": "Subheading",
"default": "<p>Subscribe to get special offers, free giveaways, and once-in-a-lifetime deals.</p>"
},
{
"type": "paragraph",
"content": "Subscribers are under 'Accepts Marketing' in your [customer admin](/admin/customers)."
},
{
"type": "select",
"id": "width",
"label": "Width",
"default": "full",
"options": [
{ "value": "full", "label": "Full" },
{ "value": "default", "label": "Default" }
]
},
{
"type": "select",
"id": "flex_align",
"label": "Text alignment",
"default": "align--middle-left",
"options": [
{ "value": "align--middle-left", "label": "Left" },
{ "value": "align--middle-center", "label": "Center" },
{ "value": "align--middle-right", "label": "Right" }
]
},
{
"type": "select",
"id": "text_color",
"label": "Text color",
"default": "dark",
"options": [
{ "value": "dark", "label": "Dark" },
{ "value": "white", "label": "White" }
]
},
{
"type": "select",
"id": "height",
"label": "Section height",
"default": "screen-height-one-third",
"options": [
{ "value": "screen-height-one-half", "label": "1/2 of screen"},
{ "value": "screen-height-one-third", "label": "1/3 of screen"},
{ "value": "five-fifty-height-hero ", "label": "550px" },
{ "value": "four-fifty-height-hero", "label": "450px" },
{ "value": "three-fifty-height-hero", "label": "350px" },
{ "value": "two-fifty-height-hero", "label": "250px" },
{ "value": "image-height", "label": "Image height" }
]
},
{
"type": "header",
"content": "Background"
},
{
"type": "image_picker",
"id": "bg_image",
"label": "Background image"
},
{
"type": "range",
"id": "overlay_opacity",
"label": "Opacity",
"info": "Increase contrast for legible text.",
"unit": "%",
"min": 0,
"max": 90,
"step": 5,
"default": 0
},
{
"type": "color",
"id": "overlay_color",
"label": "Overlay color",
"default": "#fff"
}
],
"presets": [
{
"category": "Promotional",
"name": "Newsletter"
}
]
}
{% endschema %}
{% if section.settings.bg_image %}
{% if section.settings.height == 'image-height' %}
<img class="lazyload responsive-wide-image"
alt="{{ section.settings.bg_image.alt | default: section.settings.title }}"
src="{{ section.settings.bg_image | img_url: '18x' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]"
data-aspectratio="{{ section.settings.bg_image.aspect_ratio }}"
data-parent-fit="cover"
data-sizes="auto"/>
{% else %}
<div class="background-size-cover lazyload" data-bgset="{% include 'bgset', image: section.settings.bg_image %}"></div>
{% endif %}
{
"type": "select",
"id": "height",
"label": "Section height",
"default": "screen-height-one-third",
"options": [
{ "value": "screen-height-one-half", "label": "1/2 of screen"},
{ "value": "screen-height-one-third", "label": "1/3 of screen"},
{ "value": "five-fifty-height-hero ", "label": "550px" },
{ "value": "four-fifty-height-hero", "label": "450px" },
{ "value": "three-fifty-height-hero", "label": "350px" },
{ "value": "two-fifty-height-hero", "label": "250px" },
{ "value": "image-height", "label": "Image height" }
]
},
in the theme editing, if you choose the height setting to image height. These will happen
because you are using lazyload, there will be a small picture of 18px used, hence this line src="{{ section.settings.bg_image | img_url: '18x' }}"
the picture will automatically resize base on the screen width;
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]"
if you want to have the image at max-width 2048, just remove the the number from data-width; I.e. I only want image size 180 - 2048. I will remove 2450, 2700, 3000, ...
another solution is to add max-width to the image;i.e add style="max-width: 500px" to the img tag
{% if section.settings.bg_image %}
{% if section.settings.height == 'image-height' %}
<img class="lazyload responsive-wide-image"
alt="{{ section.settings.bg_image.alt | default: section.settings.title }}"
src="{{ section.settings.bg_image | img_url: '18x' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]"
data-aspectratio="{{ section.settings.bg_image.aspect_ratio }}"
data-parent-fit="cover"
data-sizes="auto"/
style="max-width: 500px;">
{% else %}
<div class="background-size-cover lazyload" data-bgset="{% include 'bgset', image: section.settings.bg_image %}"></div>
{% endif %}
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've recently started to work for a beauty company who wants to implement rich snippets for their products page. I know how Schema.org markups work as I've copied a general Organization one that my friend used for a mobile app development company.
Here's the code's template I'm referring to:
<script type="application/ld+json">
{ "#context": "http://schema.org",
"#type": "Organization",
"name": "Company name",
"legalName" : "Legal Name",
"url": "Company URL",
"logo": "internal logo link",
"foundingDate": "founding date",
"founders": [
{
"#type": "Person",
"name": "Founder"
} ],
"address": {
"#type": "PostalAddress",
"streetAddress": "Street Address",
"addressLocality": "City",
"addressRegion": "Region",
"postalCode": "Postcode",
"addressCountry": "United Kingdom"
},
"contactPoint": {
"#type": "ContactPoint",
"contactType": "customer support",
"telephone": "Phone Number",
"email": "email contact"
},
"sameAs": [
"Social Media Links"
]}
</script>
Unluckily for me, this company's site is Shopify-based.
During my endless researches, I came across many different sites and blogs which were telling me to simply add this script into the theme.liquid file but I can't find a way to implement it properly. This is the blog post I was browsing.
Has anyone of you got any experience with this, or should I contact a Shopify Developer and let him do the job?
I've already tried to use this code template (which I simply copied and pasted in the liquid file):
<script type="application/ld+json">
{
"#context": "http://schema.org/",
"#type": "Product",
"name": "{{ product.title }}",
"sku": "{{ product.variants.first.sku }}",
"gtin14": "{{ product.variants.first.barcode }}",
"brand": "{{ product.vendor }}",
"description": "{{ product.description | strip_html | escape }}",
"image": "https:{{ product.featured_image.src | img_url: 'grande' }}",
"offers": {
"#type": "Offer",
"priceCurrency": "{{ shop.currency }}",
"price": "{{ product.price |money_without_currency | strip_html }}",
"itemCondition" : "http://schema.org/NewCondition",
"availability" : "{% if product.available == true %}http://schema.org/InStock{% else %}http://schema.org/OutOfStock{% endif %}",
"url" : "{{ shop.url }}{{ product.url }}"
}
}
</script>
I don't understand what's not working for you?
Like the article says, place it into the theme.liquid file.
But instead of just placing the product schema, which, when not on a product template, will cause a ton of errors because {{ product.title }} won't render anything; use template if statements to get results for index, product and article.
Here's a full, working example:
<script type="application/ld+json">
{%- if template == 'index' -%}
{
"#context": "http://schema.org",
"#type": "WebSite",
"name": "{{ shop.name }}",
"alternateName": "{{ shop.description }}",
"url": "{{ shop.url }}"
}
{%- elsif template == 'product' %}
{
"#context": "http://schema.org",
"#type": "Product",
"description": "{{ product.description | strip_html }}",
"name": "{{ product.title }}",
"image": "{{ product.featured_image | img_url: 'master' }}",
"manufacturer": "{{ product.vendor }}",
"category": "{{ collection.title }}",
"sku": "{{ product.selected_or_first_available_variant.sku }}",
"url": "{{ shop.url | append: product.url }}",
"offers": {
"#type": "Offer",
"availability": "InStock",
"price": "{{ product.price | money_without_currency }}",
"priceCurrency": "{{ shop.currency }}"
}
}
{%- elsif template == 'article' %}
{
"#context": "http://schema.org",
"#type": "NewsArticle",
"image": {
"#type": "imageObject",
"url": "https:{{ article.image.src | img_url: 'original' }}",
"width": "1024px",
"height": "1024px"
},
"keywords": "{%- for tag in article.tags -%}{{ tag }}{%- unless forloop.last -%}, {%- endunless -%}{%- endfor -%}",
"url": "{{ shop.url | append: article.url }}",
"description": "{{ article.content | truncatewords: 100 | strip_html }}",
"mainEntityOfPage": {
"#type": "WebPage",
"#id": "https://google.com/article"
},
"headline": "{{ article.title }}",
"datePublished": "{{ article.published_at }}",
"dateModified": "{{ article.published_at }}",
"author": {
"#type": "Person",
"name": "{{ article.author }}"
},
"publisher": {
"#type": "Organization",
"name": "{{ shop.name }}",
"logo": {
"#type": "ImageObject",
"url": "{{ shop.url }}"
}
},
"commentCount": "{{ article.comments_count }}"
}
{%- endif %}
</script>
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 }}