Adding sections to other pages and templates in Debut Theme without duplicating the section code.

[Ninthony]

In the html of your page you have to add some anchor tags around the collection images and add an href attribute to them to link them:

<a href="/collections/your-collection-handle">
  <img src="/path-to-your-collection-image">
</a>

[lauraanez]

Thanks for your help, can you tell me exactly where should i make this, at the end of  the theme css liquid or where? i dont know coding.  

[Emelby]

I am getting so confused/frustrated - I am not a coder - I just want sections on other pages - I've done the new page templates - but as soon as I change things in a section, it changes them on home page also. I need them to be different on every page - this business of adding -1 and -2 doesn't seem to work for me, unless I'm doing it wrong? I don't even want the galleries and stuff on my home page but when I hide them they are hidden on the other pages too. I have spent a whole week going round in circles with this - I never realised that doing other pages was SUCH a headache, surely it should be standard to be able to have a banner across the top of each page, each page with a different picture, and to be able to just add pictures and stuff, I'm going nuts!

[Jose13]

You need to duplicate the section to have a unique one. Unfortunately, you'd have to have a duplicate for each page you want to insert a new section. Now, if you duplicate a section, I recommend you remove the "presets" on the schema. This will make that duplicated section unavailable at home, it is not mandatory but it will help you reduce the clutter of duplicated sections on the homepage. Also change the name in the schema so you can identify each section on your theme editor.

[Emelby]

Thank you for the reply - the problem is I don’t know what you mean by the schema - where are the presets for the schéma - I’m not a coder  

[Ninthony]

At the bottom of a section file there is a little area called the schema. It'll look something like this:

{% schema %}
{
"name": "Blank Section",
"class": "desktop-mobile-banner",
"tag": "section",
"settings": [
{
"type": "header",
"content": "Blank Section"
}

],
"presets": [
{
"name": "Blank Section",
"category":"Custom",
"settings": {
}
}
]

}
{% endschema %}


{% javascript %}
{% endjavascript %}

He means remove the presets section, but make sure you delete the comma at the end of the other closing square brace though ("]"). Like this:

{% schema %}
{
"name": "Blank Section",
"class": "desktop-mobile-banner",
"tag": "section",
"settings": [
{
"type": "header",
"content": "Blank Section"
}
]
}
{% endschema %}


{% javascript %}
{% endjavascript %}

This will make your section file static and not dynamic, so it wont show up in your customize editor on the home page.

[Emelby]

Thank you SO much, I’ll see if I can figure it out. If I’m struggling do you mind if I ask you more precision, I don’t want to be annoying! 

[Emelby]

Hi thank you for your help, I see the changes you clearly explained above (thank you) - again sorry for not being a coder aargh! - before I change anything am I supposed to make a duplicate of the schema or change the actual one?

Also if I want a header across the whole page on separate pages I don't see a template section for that on the debut theme - I feel so limited in changing the pages, and they look terrible

[Ninthony]

Instead of making a bunch of separate sections, I think making a separate page template would be a better idea. So let's say you have two types of pages, some with a banner, and some without. I would go to your Template files, add a new template, select page from the dropdown, and then name it 'banner' -- so that when you go into your pages and select a template from the bottom right you would see 'page.banner'. 

In page.banner.liquid I would use a case statement to check your page's handle, and assign an image src to a variable. So it would look something like this:

{% assign banner_image = false %}
{% case page.handle %}
  {% when 'about-us' %}
    {% assign banner_image = '/path-to-your-about-us-banner.jpg' %}
  {% when 'contact' %}
    {% assign banner_image = '/path-to-your-contact-banner.jpg' %}
  {% when 'faqs' %}
    {% assign banner_image = '/path-to-your-faq-banner.jpg' %}
{% endcase %}

{% if banner_image %}
  <style>
  .banner-container {
    background-image: url({{ banner_image }});
    background-size: cover;
    width: 100%;
    height: 500px; // however tall you want your banner to be
  }
  </style>
  <div class="banner-container">

  </div>
{% endif %}

{{ page.content }}

This is just a simplified example and not copy paste material, but this is the general idea. I know it probably seems like a lot if you don't do any markup on your own. I'd be happy to help you if you'd like. You can send me a personal message with your store url and I'll request access to your themes to make the change for you. If you can give me an idea of exactly what you'd like to do that'd help (screenshots, what images where, etc.)

[Emelby]

Do you really not mind helping me? I don’t want to trouble you