Banner showcase
The Banner Showcase section allows you to highlight multiple collections or categories in a visually engaging tabbed banner layout.
Layout
Customization of the "Layout" in this section is as follows:
Wide
Grid
Banner height
Customization of the "Banner height" in this section is as follows:
Adapt to first image
Small
Medium
Large
Content style
Show container on desktop
Toggle this to enable or disable the container wrapper around banner content on desktop view.
Content alignment on desktop
Customization of "Content alignment on desktop" is as follows:
Left
Center
Right
Horizontal position on desktop
Customization of "Horizontal position on desktop" is as follows:
Left
Center
Right
Text content position on desktop
Customization of "Text content position on desktop" is as follows:
Over image
Outer image
Desktop hoverable content
Content type
Choose what type of content to show when hovering over banners.
Collection
Text with icon
Content position
Customization of "Desktop hoverable content position on desktop" is as follows:
Over image
Below image
Show carousel pagination
Turn this on to display navigation dots or pagination indicators below the carousel.
Pagination color
Choose the color for the carousel pagination dots.
Color scheme
In this section, you can change the background and foreground color of the section using the color scheme:
Scheme 1
Scheme 2
Scheme 3
Scheme 4
Scheme 5
Scheme 6
Mobile layout
Content alignment
Customization of "Content alignment on mobile" is as follows:
Left
Center
Right
Content under images on mobile
Turn this on to move the content below the image on mobile devices.
Outer space
Top space
Add extra space (in pixels) above the section to control its placement on the page.
Bottom space
Add space below the section to create proper spacing between sections.
Add Tab Content
Click on "Tab content" and its customization is as follows.
Custom preview image
Use "Custom preview image" to add the banner image to the section.
Control image opacity
Using this settings, you have the ability to change the opacity of the image overlay. Modify this settings to increase or decrease the opacity level of the overlay on the preview image.
Collection
Select the Shopify collection that this tab will display.
Collection custom image
Optionally upload a different image to display inside the tab content. If left blank, the collection’s default image will be used.
Heading
Text
Add a heading that appears as the tab title.
Size
Customization of the "Tab title size" in this section is as follows:
Small
Medium
Large
Description
Add text to display as a description in the section.
Button
Label
Enter a text to display as a button label in the section.
Link
Add the page or collection link where users will be directed when they click the button. This option works only when no collection is selected above.
Color scheme
In this section, you can change the background and foreground color of the tab content using the color scheme:
Scheme 1
Scheme 2
Scheme 3
Scheme 4
Scheme 5
Scheme 6
Mobile Layout
Custom preview image
Upload a mobile-specific preview image for this tab. This image will be shown on mobile devices instead of the default preview. Leave it blank to use the main preview image.
Last updated