Install #1 Page Builder App for FREE and get deal 6 months of Standard Plan. Hurry up! See Detail  

Header background

Unsen - Collection with banner

Alfred

Written by Alfred

Last updated

214 views

On this page


Here is an amazing section that will allow you to design a custom Banner image and some collections. You can show both of Image and collections in this section.

1.webp

It is usually located on Homepage. However, Shopify 2.0 allows you to add the Collection with banner section to any pages that you wanna use.

Steps

  1. In the theme editor (Customize), click Add section

  2. Search Collection with banner

  3. Click Save

1. Collection with Banner content

The Collection with Banner section has a total of 8 content blocks, you can use those blocks to build the Collection with Banner layout that you wanna use, you can view the video below to know about Collection with Banner section blocks:

2. How to configure the Collection with Banner section?

- Banner Item (parent): You can upload the Banner image here, this section allows you to add 2 separate images for the Desktop and Mobile devices.

1.png

- Image position: You can configure to choose a position for the Banner image here. We have 3 positions for you to choose: Start, Center & End.

1.gif

- Image hover effect: You can choose a hover effect for the image here. We have a total of 7 effects for you to choose. If you don't wanna use the hover effect, you can choose None.

- Banner effect when hovering: You also can choose an effect for the banner when hovering here, we have a total of 5 effects for you to choose. If you don't wanna use the hover effect, you can choose None.

1.gif

- Content vertical/ horizontal position: You can configure the position for the content on the Banner image here. Our theme supports changing the content position on all devices: Desktop, Tablet and Mobile.

1.webp

- Show background content color? checkbox: Tick on this checkbox to enable background color for the content here.

- Background color: You can set the color for the content here, this option also supports Metafiled.

- Background color opacity: Configure the opacity for the content on the Banner image here.

1.webp

- Show border content color checkbox: Tick on this checkbox to enable border content color for the content.

- Border color: You can set the color for the border here, this option also supports Metafiled.

- Background border: You can set the color for the Background border here, this option also supports Metafiled.

- Border opacity: You can configure the opacity for the border content here.

- Border style: You can choose a style for the border content here. We have 3 styles for you to choose: Dash, Solid and Double. If you don't wanna enable border, you can choose None.

colbanner-MARGIN.gif

- DESIGN OPTIONS

Please follow this guideline to config Layout, Background, Margin/Padding for the section.

[Private Offer] EComposer Partner Plan

ecomposer.jpg
Exclusively for The4 users, when you bougth any theme from us, you can get Ecomposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:

  • FREE 100% EComposer Standard plan for 6 months (save you $114)
  • Build ANY Shopify pages: Landing page, Sale Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
  • Create advanced sections & add to your theme with ease
  • 100+ professtional, stunning designer-made templates
  • Build pages with a love drag-drop editor, no coding required

How to claim offer. Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject "Theme name+EComposer" to upgrade for free

Ecomposer1.jpg
Cheers, The4.

We highly recommend Shopify apps from our partners.

We uses cookies to ensure you get the best experience on our website.