JustinWDev of Archived Theme Support
5/9/2015 - 5:09 AM
Add a Hero image module to your Brooklyn theme. Image will use parallax as your scroll down past it. Position the hero image wherever you wa
Add a Hero image module to your Brooklyn theme. Image will use parallax as your scroll down past it. Position the hero image wherever you want on your homepage.
</div><!-- //wrapper -->
<div class="collection-hero">
<div class="collection-hero__image" style="background-image: url({{ 'hero.jpg' | asset_url }});"></div>
</div>
<div class="wrapper"> {
"name": "Home - Hero Image",
"settings": [
{
"type": "paragraph",
"content": "You can turn this section on and off in the Home section"
},
{
"type": "image",
"id": "hero.jpg",
"label": "Image",
"max-width": 1200
}
]
}, {
"value": "hero-image",
"label": "Hero Image"
},What you want
Another homepage module! This time to add a hero image, just as wide as the images in the slideshow, but shown down below on your homepage.
You want to control where the hero image is shown on your homepage:
You want to, of course, be able to upload the image on your Customize theme page:
What you need to do
- Edit your settings_schema.json file to add theme settings. That's the hardest part: editing the JSON. See below what you need to add.
Add the option.json bit (found below) FOUR TIMES under Home > Sections, once for each section. (Theme settings allow you to order your homepage modules as you wish.)
Add the section.json bit (found below) ONCE as a new root section.
- Create a new hero-image.liquid snippet. Add to it the code below.
That's it! No need to edit index.liquid nor the stylesheet.