Viola Documentation
Submit a TicketLiveChat
  • Webibazaar Support
  • Shopify Viola
  • Header
    • Announcement bar
    • Header section
    • Mega menu
  • Overlay Group
    • Newsletter Popup
    • Promotional Popup
  • Theme Settings
    • Colors
    • Typography
    • Layout
    • Buttons
    • Variant pills
    • Inputs
    • Cards
    • Product card review
    • Content containers
    • Media
    • Dropdowns and pop-ups
    • Drawers
    • Badges
    • Social media
    • Search behavior
    • Favicon
    • Currency format
    • Cart
    • Checkout
    • Custom CSS
  • Sections
    • Rich text
    • Video
    • Page
    • FAQ
    • Image gallery
    • Custom Liquid
    • Contact form
    • Collapsible content
    • Multicolumn
    • Email signup
    • Collage
    • Slideshow
    • Scrolling bar
    • Collection list
    • Featured collection
    • Image Banner
    • Featured Product
    • Countdown with product
    • Tab Products
    • Countdown
    • Video with text
    • Image with text
    • Product with image
    • Text with icons
    • Lookbook
    • Testimonials
    • Blog Posts
    • Logo list
    • Social media gallery
    • Image comparison
  • Footer
  • Age verification popup
  • Product page
    • Product tab
    • Quick order list
    • Recently viewed product
  • Color swatches
  • Collection Page
    • Collection banner
    • Meta collection list
    • Product Grid
  • Pages
    • How to create page template?
  • Languages and Currency
  • Additional Settings
  • Dynamic source of color swatch variant image
  • how can reset all the changes I made?
  • Turning your website layout from right to left
  • Use of 'Translate & Adapt' App
  • Continue selling when out of stock
  • Collection filter color swatch from metaobject
  • Quick Links
  • Change Log
    • Version 2.0.0
    • Version 1.0.13
    • Version 1.0.12
    • Version 1.0.11
    • Version 1.0.10
    • Version 1.0.9
    • Version 1.0.8
    • Version 1.0.7
    • Version 1.0.6
    • Version 1.0.5
    • Version 1.0.4
    • Version 1.0.3
    • Version 1.0.2
    • Version 1.0.1
    • Version 1.0.0
  • Importing our demos
Powered by GitBook
On this page
  • Collection banner
  • Adding Collection banner via metafield
  • Setting the Collection image
  1. Collection Page

Collection banner

PreviousCollection PageNextMeta collection list

Last updated 5 months ago

Collection banner

To set up a collection image section:

  • Go to Customize theme. At the top of the page, use the dropdown to select a template that contains a collection banner section.

  • Select Collections > Default collection.

  • From the side panel, select the Collection banner block.

  • You can select Description or Image.

  • Click Save.

Settings
Description

Heading size

Customization of "Heading size" as follows:

  • Small

  • Medium

  • Large

Heading alignment

Customization of "Content alignment" as follows:

  • Left

  • Center

Show collection description

Enabling this checkbox will allow you to display the added description in the collection.

Default collection image

Use "Default collection image" to add the image to the section.

Show collection image

Enabling this checkbox will allow you to display the added image in the collection.

Layout

Customization of the "Layout" in the collection banner is as follows:

  • Column

  • Overlay

Banner background

Modifying the color of the banner background will result in a corresponding color change for the banner background.

Banner text

Modifying the color of the banner text will result in a corresponding color change for the banner text.

Background overlay

By enabling this checkbox, you have the ability to change the opacity of the image overlay. Modify the "Background overlay" setting to increase or decrease the opacity level of the overlay on the collection banner image.

Adding Collection banner via metafield

Before you can add Collection image(metafield value) to specific collections, you need to add the necessary metafield definition for this information.Comment

  • From your Shopify admin, go to Settings > Custom data > Collections

  • Click Add definition

  • In the Name field, enter Collection image

  • In the Namespace and key field, enter custom.collection_image

  • Click Select type then select File.

  • than select Accept all file types

  • Click Save to save the definition

  • You should see the Collection image in the list of definitions by now

Setting the Collection image

  • In your admin, within Collections, click on the collection you want to add the Collection image

  • Scroll down to the Metafields. You should see the Collection image here.

  • To set an image, click on the Collection image field

  • Click Save to save your changes

Live Chat Support | Webibazaar Template
Logo