How can I add a section on a legacy theme?

Solved

How can I add a section on a legacy theme?

Cotswold_Cubs_
Tourist
5 0 3

Hello,

 

I'm using a legacy theme - Debut.

 

I've added a page to my shop and would like to add a number of my collections via a 'collection list' section.

 

Unfortunately, after speaking with Shopify Help, it seems that, as I'm using a legacy theme, this isn't possible without some sort of additional code. I'd be really grateful if anyone can help me with this.

 

I'm a complete novice with coding so a step-by-step guide/walk-through would be really appreciated! 

 

Thanks 🙂

Accepted Solution (1)

swym
Trailblazer
212 44 90

This is an accepted solution.

Hello Cotswold_Cubs_

It's good practice to create a copy of your theme and work on that to preview the changes before applying, especially if you are editing the raw code. Alternatively, you can also use the Shopify theme editor’s versions to revert to previous versions, but it is not recommended if you are making multiple changes.

 

Now to answer your specific question on adding a section to the page of a legacy theme: 

 

1. Identify the Page Template: 

  • From your Shopify admin, go to online  store -> Pages
  • Click the title of the page you want to update. 
  • In the online section, you will see the name of the template assigned to this page, as shown in the screenshot below:  swym_0-1715061441738.png
  • Note the name of the template assigned to this page. This is crucial as you'll need to edit the code of this specific page template.

2. Open the code editor, as shown in the screenshot below. 

swym_1-1715061441745.png

 

3. Locate the Template File: 

In the code editor's search box, search for "page." This will display the relevant template file. If the template name is, for example, "contact," the file you should look for is "page.contact.liquid." If it's the default template, look for "page.liquid."

swym_5-1715061821859.png

 

4. Edit the Template File: Open the identified file and add the following code at the bottom to add the collection-list section:

 

{% section 'collection-list' %}

 

It would look something like below:

swym_3-1715061441762.png

 

6. Save the file and navigate to the customization settings to verify if the section has been added. You can now customize and add collections to the section using these settings.
swym_4-1715061441433.png

 

Done? Now save the file, and try previewing to confirm if the changes work for you.  

 

I hope this helps!

Regards,
Abhishek from Swym

- Appreciate the assistance. Show your approval with a Like! And when your question finds its answer, seal the deal by marking it as an Accepted Solution!
- Our Solutions: Wishlist Plus | Swym Back in Stock Alerts | Swym Gift Lists and Registries

View solution in original post

Replies 6 (6)

swym
Trailblazer
212 44 90

This is an accepted solution.

Hello Cotswold_Cubs_

It's good practice to create a copy of your theme and work on that to preview the changes before applying, especially if you are editing the raw code. Alternatively, you can also use the Shopify theme editor’s versions to revert to previous versions, but it is not recommended if you are making multiple changes.

 

Now to answer your specific question on adding a section to the page of a legacy theme: 

 

1. Identify the Page Template: 

  • From your Shopify admin, go to online  store -> Pages
  • Click the title of the page you want to update. 
  • In the online section, you will see the name of the template assigned to this page, as shown in the screenshot below:  swym_0-1715061441738.png
  • Note the name of the template assigned to this page. This is crucial as you'll need to edit the code of this specific page template.

2. Open the code editor, as shown in the screenshot below. 

swym_1-1715061441745.png

 

3. Locate the Template File: 

In the code editor's search box, search for "page." This will display the relevant template file. If the template name is, for example, "contact," the file you should look for is "page.contact.liquid." If it's the default template, look for "page.liquid."

swym_5-1715061821859.png

 

4. Edit the Template File: Open the identified file and add the following code at the bottom to add the collection-list section:

 

{% section 'collection-list' %}

 

It would look something like below:

swym_3-1715061441762.png

 

6. Save the file and navigate to the customization settings to verify if the section has been added. You can now customize and add collections to the section using these settings.
swym_4-1715061441433.png

 

Done? Now save the file, and try previewing to confirm if the changes work for you.  

 

I hope this helps!

Regards,
Abhishek from Swym

- Appreciate the assistance. Show your approval with a Like! And when your question finds its answer, seal the deal by marking it as an Accepted Solution!
- Our Solutions: Wishlist Plus | Swym Back in Stock Alerts | Swym Gift Lists and Registries
Cotswold_Cubs_
Tourist
5 0 3

Thank you so much! This worked perfectly and your instructions were very clear 🙂

 

Thanks again!

swym
Trailblazer
212 44 90

Hey @Cotswold_Cubs_,

 

Thank you for confirming that the solution worked! Please give it a like (👍) if you found it helpful. Your feedback is greatly appreciated!

 

Best regards,

Abhishek from Swym

 

- Appreciate the assistance. Show your approval with a Like! And when your question finds its answer, seal the deal by marking it as an Accepted Solution!
- Our Solutions: Wishlist Plus | Swym Back in Stock Alerts | Swym Gift Lists and Registries
Cotswold_Cubs_
Tourist
5 0 3

Hello! I wondered if you might be able to help me again.

When I add multiple pages like this, they are all the same. So if I update one page, they all change and are the same.

Is there a way to have multiple, different pages with different collection lists?

Thanks, Sarah 🙂 

 

 

swym
Trailblazer
212 44 90

Hey @Cotswold_Cubs_

 

I understand what you are trying to achieve here, and whatever you mentioned is achievable using Shopify templates.  

You need to follow the following steps: 

  1. You need to create separate templates for each collection where you want separate layouts and assign them to their respective collections. 
  2. Update the layout using customization settings for each of them. 

Please refer to this doc for reading about Shopify templates: Shopify Templates 

 

You can also refer to this video guide where you can learn about creating and using multiple templates: YouTube Guide for Shopify Templates 

 

I hope this helps! 

 

Regards, 

Abhishek from Swym

- Appreciate the assistance. Show your approval with a Like! And when your question finds its answer, seal the deal by marking it as an Accepted Solution!
- Our Solutions: Wishlist Plus | Swym Back in Stock Alerts | Swym Gift Lists and Registries

PaulNewton
Shopify Partner
7746 679 1617

Either you need to convert one of the templates to a JSON format template, or add static templates.

https://shopify.dev/docs/themes/architecture/sections 

Both processes and exact implementation details are way beyond the scope of a forum post.

 

Alternatively migrate to a more modern theme such as Dawn.

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org