Shella Shopify Theme
  • User Manual
  • Shopify help
  • Get Started
    • How to create a new Template
    • How to add and edit a Page
    • How to build Metaobjects
    • How to find a handle
    • Filters logic
    • Pre-Order
  • Product variants
  • Header
    • Theme Blocks
  • Footer
    • Theme Blocks
  • Metafields
    • How to create custom filters
  • Theme Sections
    • Builder
      • Promo box (Banner)
      • Slick Slider
      • Revolution Slider
      • Instagram
      • Product column
      • Custom HTML
      • Space for vertical menu
    • Spacer
    • Article carousel
    • Brand carousel
    • Product carousel
    • Review carousel
    • Contact form
    • FAQs
    • Gallery
    • Information line
    • Search form
    • Subscription form
    • Brands
    • Collections
    • Lookbook
    • One product
    • Collection page heading
      • Theme Blocks
    • Collection banner builder
      • Theme Blocks
    • Ticker
  • Products
    • Product page
      • Theme blocks
    • Related product carousel
    • Usage information sidebar
  • Collections
    • Product grid
      • Current filters
      • Collections
      • Filters
      • Filter settings
      • Tags
      • Products
      • Custom HTML
      • Subscription
      • Promo box (Banner)
  • Collections list
  • Page categories
    • Policy page
    • Lookbook
      • Page
    • Gallery
      • Page
    • FAQs
      • Page
    • Contact
      • Page
    • Brands
      • Page
    • Password
      • Social media
    • Search
      • Current filters
      • Filters
      • Filter settings
      • Products
      • Custom HTML
      • Subscription
      • Promo box (Banner)
    • Quick view
  • Blogs
    • Theme Blocks
  • Blog posts
    • Theme Blocks
  • Theme settings
    • Quick Start
    • License
    • Logo and Favicon
    • Layout
    • Colors
    • Typography
    • Collection and Search page
    • Product -> General
    • Product -> Variants
    • Product -> Collection Page
    • Product Page and Quick View
    • Search
    • Currency
    • Cart
    • Wishlist and Compare
    • Payments
    • Social Media
    • News Subscription
    • Blog and Article Pages
    • Account
    • Reviews
    • Services
    • Apps and Language
    • Button, Input and Promo Box
    • Notifications
    • Pre-loader
    • Animations
    • Developer
    • Custom CSS
  • Theme features
  • Back to Help Center
Powered by GitBook
On this page
  • Section settings
  • Content
  • Image
  • Text
  • Button #1 - #2
  • Other content
  • Video
  • Layout
  • Animation

Was this helpful?

  1. Page categories
  2. Search

Promo box (Banner)

This block enables you to add a banner to the sidebar.

Others -> Search -> Search page -> Add block -> Promo box (Banner)

Section settings

You can give this block a “Title” and choose its “Default state”: open, close, fixed, or without a title.

Content

In this section, you can add a URL for the banner that will redirect your customers to the needed page, when clicking on the banner. Simply click on it and choose the desired page from the dropdown list, or you can paste a link that is not on this list.

Image

In order to make your banner more attractive for the clients, you can add an image for it. The recommended image size for the desktop is 1440 x 550 pixels. The size of the image can be changed on the “Image size” scale from 200 to 2000 pixels. You can also add an “Image mask” and choose the level of its opacity on the “Image mask opacity” scale from 0.1 to 1.0. An image mask is a sort of color cover that can be put over the image in order to give it a particular shade of color if it has some opacity, or to cover it completely with the color if the opacity level is at maximum.

Text

Here you can customize the text content for your banner in the promo box. There are 3 text lines that can be added. Delete the line value for the text or button if you want to hide the element and use '<br>' for a line break. Of course, the style of the text content can be changed in the “Colorize style”, where you can choose one of eight possible styles for this purpose.

Button #1 - #2

For each banner in the promo box, you can add two buttons, which can be customized. There are three customization options for the buttons: Button text, URL for the button, and Button style. In the Button text, you can write the title of the button, e.g.: Shop now, or More. In the URL for the button insert the link to which the client should be redirected when clicking on the button and in the Button style you can choose one of the button styles which are offered in the dropdown list.

Other content

List

In order to add a page with list content for the banner, press “Select page” and choose the one from the list. You can create a list of content in your Shopify admin -> Online Store -> Pages.

Custom HTML

Video

If you want to have a video on your Home page, you can add it here in the Promo box. If this is a YouTube or Vimeo link, you can simply insert it in the “YouTube or Vimeo video URL”. If the source of the video is different, you can upload it in Shopify Admin-> Settings-> Files and add a link here. Once you have uploaded the video, copy its URL and paste it into “Video URL”. You can also decide whether the video should have autoplay or control, simply by enabling or disabling such options like “Video autoplay” and “Video controls”

Layout

Here you can choose the “Type” of layout for the text in the promo box. Shella theme offers a lot of types for layout, simply choose the one, that suits best for your store.

Animation

You can decide whether the image should have an animation when being hovered over with the mouse cursor by choosing the proper option from “Move image on hover to”. The positioning of the image can also be set in the “Static image position”. Just choose one of the available options from the dropdown list. In the same way, you can decide whether or when the banner image in the promo box should have an opacity. In the dropdown list “Image opacity” the options static, hover, static, and hover or none can be chosen for this purpose.

Here is how a block “Promo box (Banner)” may look in the sidebar:

PreviousSubscriptionNextQuick view

Last updated 2 years ago

Was this helpful?

This option allows you to replace the whole text content in the promo box with the page content. How to add and edit a page you can read .

here