How to Add a Shopify Homepage Section to Any Template

Shopify Themes feature dynamic Sections on each homepage. Content such as hero banners, carousels, featured blogs, and collections to name a few. This makes editing your homepage and giving your Store a custom look a breeze!

However, wouldn't it be nice to have some of these dynamic content Sections available elsewhere? Have you ever wanted to add a hero banner or a featured product to a regular content page?

Before we get started, I'd recommend setting up a local development environment for editing your Theme files. Using Theme Kit allows you to edit right on your local machine using your favorite code editor. This is optional, but makes writing and managing code much easier.

The steps

Let's go over the steps on how to do exactly this! For the sake of this tutorial, we'll assume you'll be adding a hero banner to a page called About.

Theme files

1. For the Hero Section that you want to add, find the existing file under [your-site-name]/sections/hero.liquid. Make a copy for each page you want an instance of. In our case, one for the About page: hero-about.liquid.
2. For the page that you want to use the Hero Section in, make a new page template. Find [your-site-name]/templates/page.liquid and make a copy: page.about.liquid.
3. In page.about.liquid, add the Liquid code to include your new Hero Section: {% section 'hero-about' %}.

Shopify Admin

1. In Shopify Admin, navigate to Online Store > Pages and edit your About page.
2. Under the Template section, use the drop-down to select your new template. It should be available as, page.about.
3. Navigate back to Online Store and activate the Customize link for your current theme.
4. Use the Page Selector in the top left to find the About page.
5. The new Section should be available for editing on the Editor Sidebar.

And there you have it! Your Page should now feature a unique instance of the Hero banner Section you added to the About page Template. Great job! 🙌

Applying elsewhere

The same basic steps could also be applied to add a dynamic content Section to any Template available in your Theme. It would be a matter of making a copy of the Section file (hero-[template-name].liquid) and including the Section code in the Template where the section is to be output ({% section 'hero-[template-name]' %}).

Be sure to not include a Section within another Section as this leads to an error being output on your site.

Did this tutorial help? Were there any steps missing? Have a sweet Shopify Theme to show off? Let me know in the comments!

Happy hacking! 💻😄💖