I am new to Shopify, I need to create an Author Information Section in the Blog Posts where the user has the flexibility to enter and modify the content and display it, it should have also the ability to reuse it to the other blog page with the content inside.
Can we do it in shortcode? Can we do it without apps?
You can create Sections in Shopify to reuse the content on different pages. For your specific case, you can create an author-box section using
<section id={{section.id}}>
<h3>{{section.settings.title}}</h3>
{{section.settings.content}}
</section>
{% schema %}
{
"name": "Author Box",
"settings": [
{
"type": "text",
"id": "title",
"label": "Title",
"default": "About Author"
},
{
"type": "richtext",
"id": "content",
"label": "Content"
}
]
}
{% endschema %}
Then you can include this section in article template where you want this section to show using
{% section 'author-box'%}
Custom Sections in Shopify
Related
I am very new to Liquid and I am trying to create an option where the user is able to enter a YouTube link and the video is not appearing when entering the link. Currently, I have another video embedded in the schema tag so that the video can appear.
Here is my current code:
<div>
<div style="padding-top:56.17021276595745%" id="w-node-cdda72edcacb-27a794fe" class="w-embed-youtubevideo">
<iframe src="https://www.youtube.com/embed/J-sUpDMKWbc?rel=0&controls=1&autoplay=0&mute=0&start=0" frameborder="0" style="position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:auto" allow="autoplay; encrypted-media" allowfullscreen="">
</iframe>
</div>
</div>
{% schema %}
{
"name": "Embed Youtube",
"settings": [
{
"id": "video_url",
"type": "video_url",
"label": "Video URL",
"accept": ["youtube", "vimeo"],
"default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
"info": "Insert Youtube URL",
"placeholder": "text"
}
]
}
{% endschema %}
Here is my code placement of the section:
<div >
{% section 'EmbedYoutube' %}
</div>
I think you got the answer for it after make some search into documentation, for future reference you can add the data dynamic like this below code.
<div style="padding-top:56.17021276595745%" id="w-node-cdda72edcacb-27a794fe" class="w-embed-youtubevideo">
<iframe src="https://www.youtube.com/embed/{{section.settings.video_url.id}}?rel=0&controls=1&autoplay=0&mute=0&start=0" frameborder="0" style="position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:auto" allow="autoplay; encrypted-media" allowfullscreen="">
</iframe>
</div>
</div>
{% schema %}
{
"name": "Embed Youtube",
"settings": [
{
"id": "video_url",
"type": "video_url",
"label": "Video URL",
"accept": ["youtube", "vimeo"],
"default": "https://www.youtube.com/watch?v=_9VUPq3SxOc",
"info": "Insert Youtube URL",
"placeholder": "text"
}
]
}
{% endschema %}
You can check more regarding the video_url here on Shopify documentation HERE
Add this code into your section liquid file and you have to enter only after embed code (eg:- J-sUpDMKWbc ) in your inputbox in admin panel
<div>
<iframe width="420" height="345" src="https://www.youtube.com/embed/{{section.settings.video_url}}">
</iframe>
</div>
{% schema %}
{
"name": "Embed Youtube",
"settings": [
{
"id": "video_url",
"type": "text",
"label": "Video URL",
"info": "Insert Youtube Embed URL eg:- ZY6RfVY-Zl0"
}
]
}
{% endschema %}
I'm trying to add a custom section in Shopify to allow the user to upload 2 promotional images. I'm a novice but I managed to create a custom section for 1 image but when I try it for two images in the same section the images won't display on the page after upload.
I found a few threads on here to get me to this point. See code below:
{{ section.settings.test_2 | img_url: 'medium' | img_tag }}
{{ section.settings.test_3 | img_url: 'medium' | img_tag }}
{% schema %}
{
"name": "PromoTwo",
"blocks":[
{
"type": "block-1",
"name": "Block 1",
"settings": [
{
"type": "image_picker",
"id": "test_2",
"label": "Promo Image 1"
}
]
},
{
"type": "block-2",
"name": "Block 2",
"settings": [
{
"type": "image_picker",
"id": "test_3",
"label": "Promo Image 2"
}
]
}
],
"presets": [
{
"name": "PromoTwo",
"category": "Content"
}
]
}
{% endschema %}
My goal for this section is to create a section with two side by side images that the user will be able to upload themselves.
My suspicion is that I'm doing something wrong here:
{{ section.settings.test_2 | img_url: 'medium' | img_tag }}
{{ section.settings.test_3 | img_url: 'medium' | img_tag }}
You are trying to build something that is already present with the proper tools but the wrong way.
Sections
The main idea of a section is to provide an interactive way for the admin to update the content for a specific element.
A section has two ways to achieve this:
using the section settings
using the section blocks
Difference between section settings and blocks
The section settings are static fields that can be populated via the customize panel. Static in the sense that you can't dynamically add more without writing additional code.
On another hand blocks are the same as sections settings but they can by dynamic or you can add multiply blocks without writing additional code for each new one.
You can use both in the same section file if you like but you need to learn how to call them properly.
Syntax difference
Here is how a section settings looks like:
{% schema %}
{
"name": "Slideshow",
"settings": [
{
"id": "slide_image",
"type": "image_picker",
"label": "Image"
}
]
}
{% endschema %}
An here is how you call it:
{{ section.settings.slide_image | img_url: '1024x' | img_tag }}
Section is the main object and after that you pass the JSON objects, so it becomes section.settings.slide_image.
Here is how a block syntax looks:
{% schema %}
{
"blocks": [
{
"type": "slide",
"name": "Slide",
"settings": [
{
"id": "slide_image",
"type": "image_picker",
"label": "Image"
}
]
}
]
}
{% endschema %}
And here is the proper way to call it:
{% for block in section.blocks %}
{{ block.settings.slide_image | img_url: '1024x' | img_tag }}
{% endfor %}
What's wrong with your code?
1) You are using section blocks but you are calling the section settings.
2) You are creating multiply block types with the same image field - there is no point to this.
3) Don't use img_url: 'medium' this deprecated. Use numbers instead. For example img_url: '1024x'.
How should your code look like
Here is how should your code look like:
{% for block in section.blocks %}
{{ block.settings.promo_image | img_url: '1024x' | img_tag }}
{% endfor %}
{% schema %}
{
"name": "Promo",
"blocks": [
{
"type": "promo",
"name": "Puote",
"settings": [
{
"id": "promo_image",
"type": "image_picker",
"label": "Promo image"
}
]
}
],
"presets": [
{
"name": "PromoTwo",
"category": "Content"
}
]
}
{% endschema %}
{% for block in section.blocks %}
<div class="image_box">
{{ block.settings.image | img_url: '150x150', scale: 2 | img_tag: block.settings.image.alt, 'logo-bar__image' }}
</div>
{% endfor %}
{% schema %}
{
"name": "multi image",
"max_blocks": 4,
"settings": [
{
"type": "header",
"content": "multi image"
}
],
"blocks": [
{
"type": "select",
"name": "Add Button",
"settings": [
{
"id": "image",
"type": "image_picker",
"label": "Add image"
}
]
}
],
"presets": [
{
"name": "multi image",
"category": "text"
}
]
}
I have added presets inside blocks in Shopify in order to have 2 presets by default when i open the Customizer. But the presets aren't showing up unless i add them manually
I tried looking at Shopify's documentation but still no luck the presets do not appear.
<div id="section-cta">
<div class="section-header text-center">
<h3>{{section.settings.text-box}}</h3>
</div>
{% for block in section.blocks %}
<div class="btn btn-primary">
<a href="{{block.settings.link}}" class="btn btn-primary">
{{block.settings.linktext}}</a>
</div>
{% endfor %}
{% schema %}
{
"name": "CTA Blocks",
"max_blocks" : 3,
"settings": [
{
"id" : "text-box",
"type" : "text",
"label" : "Heading",
"default" : "Title"
}
],
"blocks":[
{
"type" : "select",
"name" : "select",
"settings" : [
{
"id" : "link",
"type" : "url",
"label" : "Button Link"
},
{
"id" : "linktext",
"type" : "text",
"label" : "Button Here",
"default" : "Click Here"
}
]
}
],
"presets" : [
{
"name" : "Call to Action Blocks",
"category" : "Call to Action Button",
"blocks": [
{
"type" : "select"
},
{
"type" : "select"
}
]
}
]
}
{% endschema %}
So here is the image for it
There should have been 2 Add Button automatically right?
Presets are a part of Schema not the block. Moreover, Presets are not used to add content. From the Shopify Docs
Sections can be dynamically added to the theme's home page if they
have presets defined in their respective {% schema %} tags. Sections
with presets will automatically be accessible in the theme editor.
They are used to create Dynamic sections.
Section presets are default configurations of a section. They are not
related to the theme styles that are defined in settings_data.json.
When a section has one or more presets, each preset becomes a dynamic
section a merchant can add to their theme home page if the
content_for_index object has been included in index.liquid.
Shopify Preset Docs
I am working on a custom Shopify theme and I got stuck here and I don't know the reason behind it. This schema is not showing up at all. I have 9 other schemas and they all work find.
Your help is really appreciated if you can figure out what is wrong and why not showing up in the front admin panel in order to add content.
Thanks;
{% schema %}
{
"name": "product FAQ page",
"settings": [
{
"type": "text",
"id": "faq",
"label": "Product",
"default": "content"
}
]
}
{% endschema %}
The schema itself looks normal, and if Shopify allows you to save that file in the theme editor it means that Shopify considers your schema valid. If the settings are not showing up in your theme-customization admin panel, it probably means that Shopify doesn't think that the above section is relevant to the page you're looking at in the theme customizer.
Two things to check:
Have you remembered to include your section somewhere in your site? (Using {% section 'my-section-name' %}, double-checking for typos)
When trying to edit your settings for the section, are you currently looking at a page that includes that section?
I'm assuming that you're not expecting this to appear as a section that you can add dynamically to the Index page - but if you are making a dynamically-included section, remember that you need to include at least one preset in the schema data (See https://help.shopify.com/en/themes/development/sections#static-and-dynamic-sections for Shopify's documentation on dynamic sections)
In order to add dynamic sections you should include a preset configuration so that it appears on the "add sections" editor
{% schema %}
{
"name": "product FAQ page",
"settings": [
{
"type": "text",
"id": "faq",
"label": "Product",
"default": "content"
}
],
"presets": [
{
"name": "section name",
"category": "custom section"
}
]
}
{% endschema %}
for the static section, you could simply add {% section 'my-file-name' %}
You just need to set the preset for the same
{% schema %}
{
"name": "product FAQ page",
"settings": [
{
"type": "text",
"id": "faq",
"label": "Product",
"default": "content"
}
],
"presets": [
{
"name": {
"en": "Add FAQ Section"
}
}
]
}
{% endschema %}
Note: Go to the customize theme option , from left side options you will find the button "Add Section" click on that you will have the section "Add FAQ Section" click on that it will be there on the page.
I am able to create an option in my theme to upload 2 images. These will be on a carousel as part of a homepage splash.
I have achieved this with the following code in my settings_scheme.json file:
[
{
"name": "Homepage Splash",
"settings": [
{
"type": "paragraph",
"content": "Choose images for homepage splash"
},
{
"type": "image",
"id": "slideshow_1.jpg",
"label": "Image 1"
},
{
"type": "image",
"id": "slideshow_2.jpg",
"label": "Image 2"
}
]
}
]
My question is, how do I now access these two images to display them as part of my 'homepage-splash.liquid'? Looking at other templates the code should be something like this:
{% for i in (1..2) %}
<img src='{% capture image %}slideshow_{{ i }}.jpg{% endcapture %}'>
{% endfor %}
But this outputs nothing in html. I'm sure it is something very basic I am missing as I am new to Shopify. Please could someone advise, it will really help me develop further. Thanks, DB
Your code should look like this
{% for i in (1..2) %}
{% capture image %}slideshow_{{ i }}.jpg{% endcapture %}
<img src="{{ image | asset_url }}"/>
{% endfor %}