Banner

Author: An Do 1176 views

To make your collection page look more beautiful, you can use this Banner element to display a banner. It should be used on a Collection template.

1. Adding Banner Element

Click into Elements –> Single Product –> Banner
Drag the Banner element from the left sidebar and Drop it wherever you want it to stay.

How To Add Banner Element With EComposer App

2. Configure Banner

Note: You cannot directly edit any Content or Image in the EComposer App. It is entirely dependent on what you add to Shopify. If you have any requests, you can go to the Shopify admin and edit your collection.

Content

Preview: This feature allows you to Select the Collection at this function and lets you view what it will look like.

Image source: You may choose the source to get the image banner from your:
- Collection: Your collection will use the image that you set in the Collection image at Shopify. Any change you can go there to edit it.
- File upload: You can get a free image from here or if you have any images that you want to use to customize the banner, click Select Image to get them and Delete if you feel they no longer represent you.
Show title/ Show description: This function may help your description and the title will be shown, whenever you click to turn it on.
Enable Parallax background: You will observe from two different positions, and defines the Image change in the position of a point on the background of the banner. Click here to learn more.
Enable overlay: Let you put the overlay on the picture, also make the details look clear.
Content position: If you have any requests for changing the position of the banner content so just come to this function to do that, and lots of options for you to consider like Center center, Center right, Center left, Top left, Top center, Top right.
Custom Height: However, sometimes you will want to change the height of the banner to make it more impressive, let’s do it by this function.

How To Change The Content With EComposer App

Design

Title/ Description: You can set the basic features for your banner, as known as Typography, Text color, Text Shadow, or Spacing.
Background: Whenever you want to fix this function, please go on Style to change the Color, Position, Attachment, Repeat, and Size.
Overlay: You will be able to change those features in this function like Opacity, Background, or CSS filters, if you have a request to turn on the Hover effect so just move to Hover settings to change as Transition Duration, and more than that in there.