I'm fairly new to liquid and Shopify development, but I'm making my way through. I've hit a snag where it seems like what I want to accomplish isn't possible. I'm making a static article page that's primarily HTML, but scattered throughout, I'd like to include instances of a relevant "You Might Like" section to display products.
<HTML>
{% section 'youMightLike' %}
<HTML>
{% section 'youMightLike' %}
I've tried adding a "presets" in the schema tag, and while that allows my section code to be placed anywhere on the homepage and function the way I think it should, my static page only allows for one collection to be chosen (which is then applied to every section on the page).
I've also tried adding blocks to the schema so I could just choose the collection in the block, but that seems to consolidate all the {% section 'youMightLike' %} lines across my entire page.
Am I thinking about this the right way, or is there something else I should be looking into?
Provided your theme is Online Store 2.0 capable, all you need is a unique page template and then you can just add whatever sections are necessary via the customizer.
If it's just a general page or what have you, break your HTML into a section or sections you can include on the page and then you can move around as needed https://shopify.dev/themes/architecture/sections
If your theme isn't 2.0 capable, then you can just create additional sections by modifying them slightly so they're unique. Just copy the section and then modify the name somehow so it's not the same.
Related
I have a section with content that can be edited from the Shopify Customizer. I use this section across multiple pages, but the content remains the same.
Is there a way to instead bind this section to a whole layout?
Because when you update the content, you have it re-enter it on every single page template that uses this section. I can have static HTML across all page templates that use a layout, but this isn't useful because the content needs to be editable from the Shopify Customizer.
You can have a section across a layout after all.
I was doing
layout/my-new-layout.liquid:
{% render 'section-component.liquid' %}
when I was supposed to be doing
layout/my-new-layout.liquid:
{% section 'section-component.liquid' %}
For reference
If you're trying to convert a template-only section to a layout-only section...
Remove the section JSON data from the template: templates/page.your-template.json.
Add a {% section 'your-section' %} in the layout (i.e. layout/my-new-layout.liquid).
I tried following this guide to create an alternative template for customization.
https://shopify.dev/tutorials/customize-theme-create-alternate-templates
However, every single section edit I makee are global.
For example: I have two page template: pages.alternative1.liquid and pages.alternative2.liquid
Whenever I edit a section on a page with pages.alternative1.liquid, the same
edit affects the same section on pages.alternative2.liquid as well. Is this normal behavior from
Shopify? How should I edit the page then so that a change in one section
doesn't affect all template?
*Note: I am editing the Debut default theme
using Shopify editor: Theme => Customize
Best Regards
Yes this is a normal behavior.
Static sections ( they are the section that are called like so {% section 'your section' %} ) share content between them. This means that if you edit one anywhere it will update everywhere you use it.
On another hand section that are used on the homepage via the {{content_for_index}} tag are dynamic and you can create the same section with different content. (but only on the homepage or where the tag in question is present)
So if you like to have different content on the page a single section will not do you any good. You can create multiply sections with different names in order to use them on different pages, but if you have 5-10+ page it's not a viable option, since it will become too much of a cluster of section files.
I was trying to test the limitations of the Shopify's sections and I was left facing an issue.
Whenever I included one or more static section of a type in the homepage, if there were already dynamic sections of that same type, the one inserted later in the page would show up as a blank whitespace.
Is it not possible to use a static and a dynamic version of the same section in the same template?
For example, making index.liquid
{% section 'slideshow' %}
{{ content_for_index }}
Where settings_data.json contains a 'slideshow' in the sections.
I'm not sure I follow you.
When you use a static section the information for the section is saved in the settings_data.json file. So when you use that section any where else it will use the same information that was entered.
When you use a dynamic section that information is saved in settings_data.json once again but the content for each sections is different and you can have different content for the same section.
That said when you use a static section and dynamic section together the content between them is NOT shared. So when you use a dynamic section that is set as a static section the content will not be passed from the static section to the dynamic section, so that's why your section is blank.
I assume this is the issue you are describing.
I'm attempting to create a secondary index page for a theme that I'm working on. It would have the same sections as the primary index page, but with different content. I don't mind hardcoding this instead of it being editable from theme editor.
I've created a new index template called secondary, and copied the code from index.liquid into it. Everything shows up fine.
Then I tried to create a new block in the settings_data.json, right under content_for_index called content_for_secondary, but trying to call it in my new page template isn't working.
I've looked all over for documentation but I can't seem to find exactly how Shopify is handling sections in the settings_data.json and how I can create a new array of sections to call in an alternate template.
Has anyone had any experience with this?
You can't change {{ content_for_index }} it's a global variable. You can read more about it here.
Therefore {{ content_for_secondary }} isn't actually anything, this is why nothing is rendered.
Depending on what you are trying to achieve I think you are best off creating the index sections as statically included sections using {% section 'foobar' %} This way the content on the homepage will still be largely editable. You won't however be able to adjust their order in the theme settings. Check out the link above it will tell you all you need to know.
You might create a page template, for example called secondary_home.
Then, duplicate available sections for homepage (do not use the same or content will be the same), and include them in your new template.
Create a page using the template you created.
Load page in "Customize theme" then set settings for each sections.
Please note that this is only possible with statics sections as dynamic ones are only available for home.
the site that I'm working at is designed in a such way that CSS class is set for the tag on all the pages and the css classes used are different for all pages. Each page has common elements such as a header, a footer and a nav bar. I'd like to set up a single page template and include all common elements there but the body tag stands in the way. Is there a way to control a template from a content page? I know I can specify a code behind for content pages but i can't rely on content authors to enter it correctly each time they add a page. My current thinking is to set up multiple page template, one for each css class that is referenced in the body tag and put the common page elements into user controls. This is less than ideal because I will end up with lots of mostly identical templates and my user controls would not be editable easily. I guess I would have to use shared content items and such making the content authors hunt all over the site. I would have been much simpler to update the common header in a single page template.
Can someone please suggest a way?
I submitted a reply in the Sitefinity forums where you originally posted this, but just in case you check here first I'll ask the same question: how is the css class for body determined?
if it can be done programmatically you can use the code-behind of the Master Page for the template to set it so that it's handled automatically.
If this won't work, tell me more about how the css class is assigned and I will try to come up with an alternative.
hope this is helpful!