Story theme - Create a custom full-width page section

This tutorial will help you add a full-width custom Page section to your Story homepage. This might be ideal for custom HTML, full-width embeds that require no padding on the left and right. 

Example:

The title (optional) remains aligned with the rest of the sections while the content is full-width. You will need a Shopify Page created with your custom HTML, app code or embed code to use this section. 

How to:

1

Create a new section file

From you Live theme (important, this works with published themes only) - Use the Theme actions button at the bottom of the page. Then choose Edit code:

In the Sections folder, choose Add a new section:

Call the file:

page-custom

Use the Create section button to complete. 

Erase all the default code that's generated:

Replace with all the code from this file (click link to view the code):

Click to view code

Save the file:

2

Use the Theme Editor to add and configure the new section

Open your theme editor (Customize theme).

Example for live theme:

Next in the sections tab, choose "Add section":

Add the new section:

Add the new Page Custom section:

Configure the section with a Page you've created with your custom HTML that will now display in a full-width section on the homepage. 

Example: