Tutorial: Create a non-full width homepage banner

If you'd like to have a Image with text overlay banner that's not full-width, here is a section module you can add. In this tutorial we will add a new section allowing you to choose the regular full-width version or a new version that's not full width. 

Result:

Step 1

Open your Code Editor:

https://myshopify.com/admin/themes/current

In the Sections folder, choose "Add a new section"

Call the new file: index-banner-wrapper

Choose the Create section button to continue. 

Erase all the default code that's generated:

Replace all the code with the code from this file:

https://gist.githubusercontent.com/whistlerbrad/090dda65b4354e246ef9eacc32971491/raw/df5eab06bcc9a03ddbf8e4efa57613bfb1d52b6d/index-banner-wrapper.liquid

Save the file. 

Step 2

Open your Theme Editor:

https://myshopify.com/admin/themes/current/editor

In the homepage sections, choose Add section

You will now have a new section to choose "Banner with wrapper":

Add that and you can customize it with all the same options of Image with text overlay. This version will not be full-width. 

Example on a page:

Still need help? Contact Us Contact Us