Vogal – Page Banner

Display same banner for all pages

Go to Theme Customize -> Pages -> Select Page -> Page Banner(Section). Select image from Image field

Display different banner for different pages

1. Go to Store Admin -> Settings -> Metafield -> Pages -> click “Add definition” then follow the steps as shown in the image below.

   

2. To add an image, navigate to the pages.
   Go to store admin -> Pages -> click page you would like to show page banner -> click on “Banner Image” field in the bottom metafield box, select image and click save.
   
3. Now, Go to Theme Customize -> Pages -> Select Page -> Page Banner -> Image -> click on “Dynamic Source” button and select “Banner Image”
4. Follow same steps for mobile banner image if you would like to show different image for mobile site.

Short Description

To add page banner text, follow the steps below.

1. Go to Store admin -> Settings -> Metafield -> Pages > Add definition > then follow the steps as below image.

   

2. To add text, navigate to the pages.

   Go to store admin -> Pages -> click page you would like to show page banner text -> click on “Show all” link in the bottom metafield box, add text and save (repeat this step to add text for different page banners)

3. Now, Go to Theme Customize -> Pages -> Select Page -> Page Banner -> Add block “Text ” -> click on “dynamic Source” button from Text field, select “Short Description” and click save button