How to Add a Shopify Homepage Section to Any Template

Let's add dynamic content sections to our pages!

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 You to backup your theme and then start

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

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.

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.

In page.about.liquid, add the Liquid code to include your new Hero Section: {% section 'hero-about' %}.

Shopify Admin

In Shopify Admin, navigate to Online Store > Pages and edit your About page.

Under the Template section, use the drop-down to select your new template. It should be available as, page.about.

Navigate back to Online Store and activate the Customize link for your current theme.

Use the Page Selector in the top left to find the About page.

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.

We hope this article helped you learn how to change the sender’s name and email address in outgoing WordPress emails.

So that’s it for now, Hope you guys like this. We will come up with another blog post soon. Contact us for any query. Follow us on Facebook