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
  • Builder
  • Title
  • Content width
  • Column Settings
  • Customization
  • Customization class

Was this helpful?

  1. Theme Sections

Builder

If you need to have the following content: Promo box (Banner), Slick Slider (fastest), Revolution Slider, Instagram, Product column, and custom HTML, a “Builder” should be added.

PreviousTheme SectionsNextPromo box (Banner)

Last updated 1 year ago

Was this helpful?

Add section -> Builder

The “Builder” section on the Home page is a massive section, which allows you to add different content blocks, such as promo boxes (banners), various sliders, pages, product columns, videos, space for a vertical menu, etc. This section can be added to any place on the home page, either straight after the header or before the footer, etc. We will get deeper into each of these blocks in the next sections.

Builder

In this section, you can configure the settings for all content blocks.

Title

Here you can add a Title for your builder section, which will be shown on the page. You can customize its font and add a link if needed:

Content width

This option enables you to choose the width of the content on the desktop. It may be either full or boxed. If it is full the image of this section is displayed in full width on the home page. Once it is boxed, you will see some space between the image and the home page on the left and right sides. In our example, we will show you the boxed width of the content:

Column Settings

Here you can choose how many items should be shown in one row on the desktop, using a dropdown menu “Size of the columns”.

The option “Size of the columns on mobile” allows you to set the number of items in the row on mobile: “1 item in the row” or “2 items in the row”. In our example, we will show you “2 items in the row”:

In the dropdown list of “Margins for the columns”, you can choose the type of margins for the columns. The position of the columns can also be set in this section. Just use a dropdown list of the ”Align of columns” and select the proper option. The option “Disable column paddings” allows you to remove space between the columns in the builder section. In the “Mobile content precedence” you can decide in which order the content blocks should be displayed in the mobile version, by writing the order, e.g.: “2,1,3”.

Customization

Please note, this is an advanced option, you should have developer skills to work with CSS styles, or hire a developer to complete this task for your store.

Customization class

You may add a custom CSS class to the Builder section. It helps if you need to apply custom changes.

Add the Builder section, add content, and configure the section.

In case you need to add additional styles, you may use the customization class option.

Please note, the customization class should be unique, it may include Latin letters, numbers, and dashes. Spaces and other chars are not allowed.

Enable the custom.css file at the Theme settings -> Developer.

Open the source file editor by pressing the dotted [...] button next to the theme name at the top left of the theme editor, then hit “Edit code”.

Find and open the assets/custom.min.css file:

Add your custom CSS class and custom styles.

The example code shows how to add a background color and top padding.

Please note, if you see the CSS term for the first time, you should hire a person who is familiar with it.

The result.

Read more information about the CSS