Shella Documentation


Welcome! Thank you for purchasing!

If you have any questions, feel free to contact us at this page.

Start here

Register your store

Don't have store yet?

Email me mpthemes@gmail.com your order details, store name and demo you like.

You will get:

  • Development store. No need to pay for time when you testing and configuring store. Transfer ownership when store is ready.
  • Free theme installation
  • Requiered app installation. Reviews, Wishlist, Compare. (Other apps may need additional fee)
  • Import demo settings
  • Import demo content (blogs and pages only)

Do you want to register store by yourself?

Use my affiliate link https://www.shopify.com/?ref=mpthemes and get free installation service

Free installation service includes:

  • Theme installation
  • Requiered app installation. Reviews, Wishlist, Compare. (Other apps may need additional fee)
  • Import demo settings
  • Import demo content (blogs and pages only)

Shopify software documentation

Note: If you familiar with Shopify, can manage products, collections, pages, blogs and navigation, you can skip this step.

  1. Intro to Shopify
  2. Manage products
  3. Import and export products
  4. Manage product variants
  5. Manage collections
  6. Manage pages
  7. Manage blogs
  8. Manage menus and links
  9. Translating your theme
  10. Apps for your Shopify store

Note: This theme may not be compatible with some third-party apps. It's impossible for theme authors to make the theme compatible by default with all existing apps because there are thousands of available Shopify apps. Authors of the app should provide detailed instruction about how to integrate the app with custom themes.
This isn't something specific to our themes, this is general rule for all Shopify themes and apps.

Install Theme

  1. Download theme package from themeforest.net
    You can purchase theme here
  2. Unzip downloaded file and find theme archive file
  3. Login to your Shopify store
  4. Navigate to themes. Store Admin -> Online Store -> Themes
  5. Upload theme
  6. Publish theme

Install Apps

  1. Install product reviews app. (free, optional, product reviews)
    1. Install Product Reviews app
    2. Press "Add app" button and proceed with general app installation procedure.
    3. Set "Star icon color" to #fec01a at Store Admin -> Apps -> Product Reviews -> Settings
  2. Install Metafields Editor app. (free, optional, labels, countdown, product video)
    1. Go to Shopify App Store Install Metafields Editor app
    2. Press "Add app" button and proceed with general app installation procedure.
    3. Check metafields supported by Shella theme.
  3. Install AddThis Share Buttons app. (free, optional, social sharing)
    1. Go to Shopify App Store Install AddThis Share Buttons app
    2. Press "Add app" button and proceed with general app installation procedure.
  4. Install Weglot Translate app. (paid, optional, multi-language)
    1. Go to Shopify App Store Install Weglot Translate app
    2. Press "Add app" button and proceed with general app installation procedure.
    3. Request 20% discount coupon at support
  5. Install ExIm app (free, optional, import demo data)
    1. Go to Shopify App Store Install ExIm app
    2. Press "Add app" button and proceed with general app installation procedure.
    3. Request demo data at support.
  6. Install CustomerMeta app (free, optional wishlist, compare products)
    1. Go to page Install CustomerMeta app
    2. Press "Install" button and proceed with general app installation procedure.

    Note:

    Shella theme uses only CustomerMeta API and already included all needed theme assets.
    Do NOT install theme assets inside CustomerMeta app!

Configure Store

  1. Currency format (optional, multi-currency)
    1. Go to Store Admin -> Settings -> General
    2. Scroll down to Standards and formats and press Change formatting link
    3. Update fields:
      HTML with currency to
      <span class=money>${{amount}} USD</span>

      HTML without currency to
      <span class=money>${{amount}}</span>
  2. Allow customer's accounts
    1. Go to Store Admin -> Settings -> Checkout
    2. Find Customer accounts section
    3. Set value to Accounts are optional
    4. Save changes

Sections

Header

Video manuals:



Options

# Name Value Description
1 Logo image Image, recommended size 128x54 px Set store logo
2 Logo image width Set logo width
3 Type Type1
Type2
Type3
Set header type
4 Content width Inherit global settings
Full width
Boxed
Set container width.
Use value from "Theme settings -> Layout -> Default content width" or overwrite it.
5 Menu Navigation menu Create and configure menu at "Online store -> Navigation -> Menus". Select main navigation menu.
6 Show button 'Search' Show / hide Search button
7 Show button 'Services' Show / hide Services button
8 Show button 'Account' Show / hide Account button
9 Show button 'Wishlist' Show / hide Wishlist button
10 Show button 'Compare' Show / hide Compare button
11 Show button 'Cart' Show / hide Cart button
12 Show button 'Currency' Show / hide Currency button
13 Show button 'Language' Show / hide Language button

Content

Tape content block

# Name Value Description
1 Content text Text content
2 Delay Delay in seconds when to show tape banner block
3 Show once? Tape banner behaviour if show on every page or remember user choice.
4 Cookies life How long remember user choice in cookies.

Mega menu

This is parent block for mega menu drop down. Other menu related blocks should be linked to parent Mega menu block.

Mega menu (parent block)

Mega menu (parent block) - list of options

# Name Value Description
1 For item Menu item name Should match Navigation menu item name.
2 Links column size number 1-12 Set collection list width
3 Second level is column true / false

Example menu



False (unchecked)

True (checked)

4 Column lines size number

Set the column size. Works only when "Second level is column" option selected.

Products (Mega menu)



Products (Mega menu) - list of options

# Name Value Description
1 For item Menu item name Should match Navigation menu item name.
2 For group (Name) Group name You can group products. Refer to Group (Mega menu) block for more details.
3 Column size number 1-12

Set Products block width



4 Float Left / right Align block position
5 Title text Set block title
6 Collection Product collection Set collection to show products
7 Products per row Set number of products per row
8 Rows Set number of rows

Promo box (Mega menu)

Promo box (Mega menu) - list of options

# Name Value Description
1 For item Menu item name Should match Navigation menu item name.
2 For group (Name) Group name You can group products. Refer to Group (Mega menu) block for more details.
3 Column size number 1-12

Set block width

4 Float Left / right Align block position
5 Title text Set block title
6 Url url Set promo box URL
7 Type Type #1
Type #2
Type #3
Type #4

Select promo box type.

Type #1

Type #2

Type #3

Type #4

8 Image Set promo box image
9 Image size Set image size
10 Text line 1 Set text line 1
11 Text line 2 Set text line 2
12 Text line 3 Set text line 3
13 Button text Set button text
14 COLORS Set text colors
15 Button Type #1
Type #2
Type #3

Select button style

Type #1

Type #2

Type #3

Custom html (Mega menu)



Custom html (Mega menu) - list of options

# Name Value Description
1 For item Menu item name Should match Navigation menu item name.
2 For group (Name) Group name You can group products. Refer to Group (Mega menu) block for more details.
3 Column size number 1-12

Set block width

4 Float Left / right Align block position
5 Title text Set block title
6 Url Set block URL
7 Content Set custom HTML content. You should be familiar with HTML and CSS.

Subscription (Mega menu)



Subscription (Mega menu) - list of options

# Name Value Description
1 For item Menu item name Should match Navigation menu item name.
2 For group (Name) Group name You can group products. Refer to Group (Mega menu) block for more details.
3 Column size number 1-12

Set block width

4 Float Left / right Align block position
5 Title text Set block title
6 Url url Set title URL
7 Placeholder text Set input placeholder
8 Button text text Set button text

Group (Mega menu)

Group (Mega menu) - list of options

# Name Value Description
1 For item Menu item name Should match Navigation menu item name.
2 Name Group name Set group name

Set same name to blocks which you want to include in this group
3 Column size number 1-12

Set block width

4 Float Left / right Align block position
5 Offset Default
Small
Set group margin. Small adds 5px margings at left/right and 10px margin at bottom.
6 Title text Set block title
7 Url url Set block URL

Title image (Mega menu)

For second collection level only, when "Second level is column" disabled.



Title image (Mega menu) - list of options

# Name Value Description
1 For item Menu path Should match Navigation menu item path concatenated by "+" sign.
For example, if you have navigation menu "Men's -> Clothing"
Path will looks like "Men's+Clothing"
2 Image image Set image
3 Image size number Set image size
4 Url url Set image URL
  • Label (Mega menu)



    Label (Mega menu) - list of options

    # Name Value Description
    1 For item Menu path Should match Navigation menu item path concatenated by "+" sign.
    For example, if you have navigation menu "Men's -> Clothing -> Coats"
    Path will looks like "Men's+Clothing+Coats"
    2 Type New
    Sale
    Hot
    Set label type
    3 Text text Overwrite text value

    Footer

    Video manual - 04 Advanced footer options - Shella Shopify theme



    Options

    # Name Value Description
    1 Type Type #1
    Type #2
    Type #3
    Type #4
    Type #5
    Set footer type.
    Type #1
    Type #2
    Type #3
    Type #4
    Type #5
    2 Content width Inherit global settings
    Full width
    Boxed
    Set container width.
    Use value from "Theme settings -> Layout -> Default content width" or overwrite it.
    3 Show button 'Back to top' true / false Show/hide scroll to top button
    4 Button 'Back to top' scroll visible limit number Set scroll height when show back to top button

    Footer type defines design and available content

    # Footer type Supported content
    1 Type #1 Menu
    Custom html
    Social media
    Subscription
    Logo
    Copyright
    Payments
    2 Type #2 Menu
    Custom html
    Social media
    Subscription
    Logo
    Copyright
    Payments
    3 Type #3 Menu
    Social media
    Subscription
    Logo
    Copyright
    Payments
    4 Type #4 Social media
    Subscription
    Copyright
    5 Type #5 Social media
    Copyright

    Content

    # Name Value Description
    1 Show title on desktop true / false Show/hide title on desktop
    2 Title text Overwrite menu title
    3 Menu navigation menu Set navigation menu
    # Name Value Description
    1 Show title on desktop true / false Show/hide title on desktop
    2 Title text Set title
    3 Content html code Set custom HTML content. You should be familiar with HTML and CSS.
    # Name Value Description
    1 Title text Set title
    2 Show facebook true / false Show/hide facebook icon
    3 Show twitter true / false Show/hide twitter icon
    4 Show google true / false Show/hide google plus icon
    5 Show instagram true / false Show/hide instagram icon
    6 Show pinterest true / false Show/hide pinterest icon
    7 Show youtube true / false Show/hide youtube icon
    8 Show behance true / false Show/hide behance icon
    9 Show skype true / false Show/hide skype icon
    # Name Value Description
    1 Title text Set title
    2 Paragraph text Set description text
    3 Placeholder text Set placeholder
    4 Button text text Set button text
    # Name Value Description
    1 Image image Set image
    2 Image width number Set image size
    # Name Value Description
    1 Enable custom true / false Overwrite default copyright
    2 Content html code Set custom copyright content
    # Name Value Description
    1 Type Dark
    Light
    Set icon color style
    2-19 Show payment icon
    Set icon URL
    true/false
    url
    Configure payment icons

    Popups

    Options

    # Name Value Description
    1 SEARCH true / false Show/hide search popup
    2 CART true / false Show/hide cart popup
    3 WISHLIST true / false Show/hide wishlist popup
    4 COMPARE true / false Show/hide compare popup
    5 ACCOUNT true / false Show/hide account popup
    6 Sign up information html code Set custom HTML content
    7 Show subscribe true / false ?
    8 SERVICES true / false Show/hide service popup
    9 SUBSCRIPTION true / false Show/hide newsletter subscription popup
    10 Show once? true / false Configure popup behaviour
    11 Delay number Set timeout delay to show popup
    12 Cookies life time How long to save user choice in cookies

    Content - custom HTML block



    # Name Value Description
    1 Title text Set title
    2 Content html code Set custom html code

    Home page

    Video manuals:

    Custom Slider Revolution

    Section for developers, who are familiar with HTML, CSS code and want to create custom slide show using full power of revolution slider.

    Check slider documentation here.

    Put your slider code at sections/slider-revolution.liquid file.

    Articles carousel

    # Name Value Description
    1 Title text Set section title
    2 Blog blog Select blog
    3 Items per row number Set items per row
    4 Autoplay true / false Enable/disable auto scroll
    5 Autoplay speed number Set autoplay timeout
    6 Is infinite true / false Enable/disable infinite scroll
    7 Arrows true / false Show/hide arrows
    8 Bullets true / false Show/hide bullets

    Brands carousel



    Options

    # Name Value Description
    1 Title text Set section title
    2 Items per row number Set items per row
    3 Autoplay true / false Enable/disable auto scroll
    4 Autoplay speed number Set autoplay timeout
    5 Is infinite true / false Enable/disable infinite scroll
    6 Arrows true / false Show/hide arrows
    7 Bullets true / false Show/hide bullets

    Content - Brand block

    # Name Value Description
    1 Image image Set brand image
    2 Link url Set brand URL

    Products carousel



    Options

    # Name Value Description
    1 Show top separator true / false Show/hide 1px grey line separator
    2 Items per row number Set number of products per row
    3 Max count number Set products limit
    4 Autoplay true / false Enable/disable auto scroll
    5 Autoplay speed number Set timeout limit for auto scroll
    6 Is infinite true / false Enable/disable infinite scroll
    7 Arrows true / false Show/hide arrows
    8 Bullets true / false Show/hide bullets
    9 Async ajax loading true / false Enable/disable lazy loading products data

    Information line



    Options

    # Name Value Description
    1 Title text Set section title
    2 Show border true / false Show/hide top border
    3 Icon color color Set icon color
    4 Title color color Set title color
    5 Paragraph color color Set text color
    6 Background color color Set background color

    Content

    # Name Value Description
    1 Icon code text Set icon code
    2 Title text Set title
    3 Paragraph text Set text

    Builder



    # Name Value Description
    1 Title text Set section text
    2 Content width Inherit global settings
    Full width
    Boxed
    Set container width.
    Use value from "Theme settings -> Layout -> Default content width" or overwrite it.
    3 Disable paddings true / false Disable section grid paddings
    4 Horizontal align Set horizontal align
    5 Vertical align Set vertical align
    6 Responsive levels are [1260, 1025, 778, 541] Info about responsive pixel sizes. You can adjust content behaviour per each level.

    Builder content blocks

    1. Revolution Slider
    2. Slide
    3. Instagram
    4. Promo box
    5. Products
    6. Custom HTML

    Revolution Slider



    # Name Value Description
    1 Name text Set slider name. Use same name at Slide block to link blocks with slider
    2 GRID: Size number Set slider width for all devices devices
    3 GRID: Responsive size coma separated list of numbers Set width per each screen size.
    Responsive levels are [1260, 1025, 778, 541]
    4 GRID: Margin top number Set margin top value
    5 GRID: Responsive margin top coma separated list of numbers Set margin top per each screen size.
    Responsive levels are [1260, 1025, 778, 541]
    6 GRID: Margin bottom number Set margin bottom
    7 GRID: Responsive margin bottom coma separated list of numbers Set margin top per each screen size.
    Responsive levels are [1260, 1025, 778, 541]
    8 SETTINGS: Grid width coma separated list of numbers Set slider grid width per each screen size.
    Responsive levels are [1260, 1025, 778, 541]
    9 SETTINGS: Grid height coma separated list of numbers Set slider grid height per each screen size.
    Responsive levels are [1260, 1025, 778, 541]
    10 SETTINGS: Arrows true / false Enable/disable slider arrows
    11 SETTINGS: Bullets true / false Enable/disable slider bullets
    12 SETTINGS: Delay (seconds) number Set time interval to change slide

    Slide



    # Name Value Description
    1 For slider (name) text Set slider name, same as at Slider block
    2 Link url Set slide ULR
    3 Image image Set slider image
    4 Video Url url Set video URL of self-hosted mp4 video.
    You can upload video at Shopify Admin -> Settings -> Files
    File size limit - 20Mb.
    5 Youtube or Vimeo video URL url Set video link
    6 HTML LAYER: HTML html code Set slide content
    7 HTML LAYER: Horizontal position Left
    Center
    Right
    Set horizontal position for slide content
    8 HTML LAYER: Horizontal offset number Set horizontal offset
    9 HTML LAYER: Reverse horizontal offset true / false Change offset direction
    10 HTML LAYER: Vertical position Top
    Center
    Bottom
    Set vertical position for slide content
    11 HTML LAYER: Vertical offset number Set vertical offset
    12 HTML LAYER: Reverse vertical offset true / false Change offset direction
    13 HTML LAYER: Align Left
    Center
    Right
    Align content inside block.
    14 HTML LAYER: Width number Set content block width.
    EFFECTS: Slide animation html code Set slide animation effect. Check revolution slider documentation for more details.
    15 EFFECTS: HTML layer animation data attribute code Set content animation effect. Check revolution slider documentation for more details.
    16 EFFECTS: Parallax of image number Set parallax effect for slide image.
    17 EFFECTS: Parallax of content number Set parallax effect for slide content.

    Instagram



    # Name Value Description
    1 GRID: Size number Set block width
    2 GRID: Responsive size coma separated list Set block width per each screen size.
    3 GRID: Margin top number Set margin top
    4 GRID: Responsive margin top coma separated list Set margin top per each screen size.
    5 GRID: Margin bottom number Set margin bottom
    6 GRID: Responsive margin bottom coma separated list Set margin bottom per each screen size.
    7 SETTINGS: User ID text Set Instagram user id.
    8 SETTINGS: Client ID text Set Instagram Client ID
    9 SETTINGS: Access token text Set Instagram access token
    10 SETTINGS: Disable paddings true / false Disable grid paddings
    11 SETTINGS: Items limit number Set number of images
    12 SETTINGS: Size number Set image width
    13 SETTINGS: Responsive size coma separated list Set image width per each screen size

    How to configure Instagram

    Looks like easy task, only three fields. But not :) It's not easy task.
    You should directly follow next steps. Pay attention to every symbol, every whitespace, every detail.
    When work with URL one wrong symbol may cause errors.

    Steps to get Instagram user id, client id, access token

    1. You should have Instagram account, loaded with images. If not, create it right now. And load with images.
    2. Login to your Instagram account an sign up as new developer here
    3. Register your application (client) here.
      Most fields are not important you may fill it with random data.
      The most important field is "Valid redirect URIs". Put there you website URL with ending slash "/". Example: "http://www.yourdomain.com/"
      Client id will looks like b325d13ecb254c638a5f02c340911751
      Note "Valid redirect URIs"
      Note "CLIENT ID"
      Go to your client configuration at Security tab and enable implicit OAuth (remove check on Disable implicit OAuth)
    4. Get access token
      Copy example URL to your text editor (notepad for example)
      copy
      https://www.instagram.com/oauth/authorize/?client_id=[YOUR_CLIENT_ID]&redirect_uri=[YOUR_REDIRECT_URL]&response_type=token&scope=public_content
      and replace [YOUR_CLIENT_ID] and [YOUR_REDIRECT_URL] placeholders with your data from previous step.
      you should get something like this

      https://www.instagram.com/oauth/authorize/?client_id=b325d13ecb254c638a5f02c340911751&redirect_uri=http://www.yourdomain.com/&response_type=token&scope=public_content


      Load this URL in browser
      Press Authorize
      You should be redirected to your website with added token in URL address bar.
      Access token will looks like 233117080.b325d13.cc459df978e146f6961b2f3b48827c18
      Note "access_token"
    5. Get user ID
      If you split access token by dots. You will get three strings. First string is your user id.
      If access token is 233117080.b325d13.cc459df978e146f6961b2f3b48827c18
      Here is you user id 233117080

      You can also check user id as recommended here

    Promo box



    # Name Value Description
    1 GRID: Size number Set block width
    2 GRID: Responsive size coma separated list Set block width per each screen size.
    3 GRID: Margin top number Set margin top
    4 GRID: Responsive margin top coma separated list Set margin top per each screen size.
    5 GRID: Margin bottom number Set margin bottom
    6 GRID: Responsive margin bottom coma separated list Set margin bottom per each screen size.
    7 SETTINGS: Type Type #1
    Type #2
    Type #3
    Type #4
    Type #5
    Type #6
    Set Promobox type

    Type #1


    Type #2


    Type #3


    Type #4


    Type #5


    Type #6


    8 SETTINGS: Image image Set image
    9 SETTINGS: Image size number Set image size
    10 SETTINGS: Video Url url Set self-hosted video url.
    11 SETTINGS: Youtube or Vimeo video URL url Set Youtube or Vimeo video url.
    12 SETTINGS: Autoplay true / false Enable/disable autoplay for video
    13 SETTINGS: Url url Set promo box URL.
    14 SETTINGS: Text line 1 text Set text 1
    15 SETTINGS: Text line 2 text Set text 2.
    16 SETTINGS: Text line 3 text Set text 3.
    17 SETTINGS: Button text text Set button text.
    18 SETTINGS: Menu navigation menu Set navigation menu.
    19 COLORS: Text line 1 color Set color for text line 1
    20 COLORS: Text line 2 color Set color for text line 2
    21 COLORS: Text line 3 color Set color for text line 3
    22 Button Type #1
    Type #2
    Type #3
    Set button type. You can adjust button colors at "Theme settings -> Colors (buttons)".
    Type #1


    Type #2


    Type #3

    Products



    # Name Value Description
    1 GRID: Size number Set block width
    2 GRID: Responsive size coma separated list Set block width per each screen size.
    3 GRID: Margin top number Set margin top
    4 GRID: Responsive margin top coma separated list Set margin top per each screen size.
    5 GRID: Margin bottom number Set margin bottom
    6 GRID: Responsive margin bottom coma separated list Set margin bottom per each screen size.
    7 SETTINGS: Title text Set block title
    8 SETTINGS: Collection collection Set product collection
    9 SETTINGS: Maximum products in column number Set products limit

    Custom HTML



    # Name Value Description
    1 GRID: Size number Set block width
    2 GRID: Responsive size coma separated list Set block width per each screen size.
    3 GRID: Margin top number Set margin top
    4 GRID: Responsive margin top coma separated list Set margin top per each screen size.
    5 GRID: Margin bottom number Set margin bottom
    6 GRID: Responsive margin bottom coma separated list Set margin bottom per each screen size.
    7 SETTINGS: HTML html code Set custom HTML content here. You should be familiar with HTML and CSS.

    Collections



    Options

    # Name Value Description
    1 Products per row number Set number of products per row
    2 Responsive size coma separated list Set block size per each screen size.
    3 Max count number Set product number per collection

    Content - Collection block

    # Name Value Description
    1 Title text Overwrite collection name in tab
    2 Collection collection Set product collection

    Collection page

    Configure collection page

    Video manuals:

    Sidebar

    Configure collection sidebar





    Current filters

    # Name Value Description
    1 Title text Set block title
    2 Default state Set block state
    3 Show border true / false Show/hide block border

    Parameters

    # Name Value Description
    1 Title text Set block title
    2 Default state Set block state
    3 Show border true / false Show/hide block border

    Collections

    # Name Value Description
    1 Title text Set block title
    2 Default state Set block state
    3 Show border true / false Show/hide block border
    4 Menu navigation menu Set list of collections
    5 Type of tags input Radio
    Checkbox
    Set filter input

    Filters

    # Name Value Description
    1 Title text Set block title
    2 Default state Set block state
    3 Show border true / false Show/hide block border
    4 Type of filter Tags
    Colors
    Vendors
    Product types
    Set filter type
    Tags - filter by tag, show as checkbox
    Color - filter by tag, show as color circle
    Vendors - filter by vendor, show as checkbox
    Product types - filter by product type, show as checkbox
    5 Items list of values, separated by "|" sign Set list of values
    6 Show all from collection true / false Show available values from products
    7 Direction Rows
    Columns
    Set values alignment
    8 Max column size number Set maximum number of values per column.
    9 Columns number Set columns number

    Filter by price



    # Name Value Description
    1 Title text Set block title
    2 Default state Set block state
    3 Show border true / false Show/hide block border
    4 Min value number Set minimum price range
    5 Max value number Set maximum price range
    6 Step number Set step

    Filter by title

    Add filter by title field

    # Name Value Description
    1 Title text Set block title
    2 Default state Set block state
    3 Show border true / false Show/hide block border
    4 Placeholder text Set placeholder text
    5 Button text text Set button text

    Products

    # Name Value Description
    1 Title text Set block title
    2 Default state Set block state
    3 Show border true / false Show/hide border
    4 Collection product collection Set product collection
    5 Max count number Limit products from collection
    6 Products type Short
    Full
    Set product design

    Custom HTML

    # Name Value Description
    1 Title text Set block title
    2 Default state Set block state
    3 Show border true / false Show/hide block border
    4 Content html code Set custom html content

    Promobox

    # Name Value Description
    1 Title text Set block title
    2 Default state Set block state
    3 Show border true / false Show/hide block border
    4 Type Type #1
    Type #2
    Type #3
    Type #4
    Set promobox type. Same types as for home page section. Refer to home page Builder -> Promobox block for more details.
    5 Image image Set promobox image
    6 Image size number Set image size
    7 Url url Set promobox URL
    8 Text line 1 text Set text line 1
    9 Text line 2 text Set text line 2
    10 Text line 3 text Set text line 3
    11 Button text text Set button text
    12 Text line 1 color Set color for text line 1
    13 Text line 2 color Set color for text line 2
    14 Text line 3 color Set color for text line 3
    15 Button Type #1
    Type #2
    Type #3
    Set button type. Same types as for home page promo box. Refer to home page Bulider -> promobox for more details.

    Subscription

    # Name Value Description
    1 Title text Set block title
    2 Default state Set block state
    3 Show border true / false Show/hide block border
    4 Paragraph text Set description
    5 Button text text Set button text
    6 Placeholder text Set placeholder text

    Head

    Configure collection header



    Default title settings

    # Name Value Description
    1 Default desktop title Only title
    Title with description
    Only description
    Disabled
    Set title type for desktop

    Title with description
    With promo box


    Without promo box


    Only title


    Only description




    Disabled


    2 Default mobile title Only title
    Title with description
    Only description
    Disabled
    Set title type for mobile

    Content

    Set listing product options

    # Name Value Description
    1 SORT BY: Show true / false Show/hide sort by drop down
    2 INFORMATION: Show true / false Show/hide information text
    3 LENGTH: Show true / false Show/hide number of product on page drop down
    4 LENGTH: Default 6, 12, 18, 24 Set default value for number of products per page.
    5 GRID: Show true / false Show/hide product listing mode controls
    6 GRID: Default products per row (Extra large) number Set default grid mode for Extra large screens
    7 GRID: Default products per row (Large) number Set default grid mode for Large screens
    8 GRID: Default products per row (Medium) number Set default grid mode for Medium screens
    9 GRID: Default products per row (Small) number Set default grid mode for Small large screens
    10 GRID: Default view grid (Extra small) number Set default grid mode for Extra small screens

    Collection list

    List collections section

    # Name Value Description
    1 GRID: Size number Set grid width per each collection
    2 GRID: Responsive size coma separated list of numbers Set grid width for different screen sizes
    3 GRID: Enable masonry true/false Enable / disabel masonry effect
    4 SETTINGS: Type promo box type Set promobox type.
    Check home page builder section for more details.
    5 SETTINGS: Image size number Set image size
    6 SETTINGS: Uppercase text line 1 true/false Enable / disable uppercase
    7 COLORS: Text line 1 color Set color for text line 1
    8 COLORS: Text line 2 color Set color for text line 2
    9 COLORS: Text line 3 color Set color for text line 3
    10 COLORS: Button button type Set button type.
    Check home page builder section for more details.

    You can overwrite settings for every collection.
    Add content block, select collection to apply settings from this block.
    Set new settings for selected collection.
    Block settings are the same as home page builder section. Check it's documentaion for more details.

    Product page

    Video manual - 08 Configure product info page

    Product page section options

    # Name Value Description
    1 GALLERY: Arrows true / false Show / hide arrows on product image gallery

    2 GALLERY: Show button 'Fullscreen' true / false Show / hide "zoom" button. When click on zoom button image shows in full screen popup.
    3 GALLERY: Zoom true / false Enable / disable image zoom inside image container.
    3a Product video Video metafield Show / hide video for product.

    You should set value at metafields app
    Namespace = video
    Key = url
    Value type = string
    Value = [youtube video url]

    4 INFORMATION: Show label 'In stock' true / false Show / hide 'In stock' label
    5 INFORMATION: Show label 'Out stock' true / false Show / hide 'Out stock' label
    6 INFORMATION: Show label 'Sale' true / false Show / hide 'Sale' label

    7 INFORMATION: Show label 'New' true / false Show / hide 'New' label

    You should set value at metafields app
    Namespace = labels
    Key = new
    Value type = string
    Value = true

    8 INFORMATION: Show label 'Hot' true / false Show / hide 'Hot' label

    You should set value at metafields app
    Namespace = labels
    Key = hot
    Value type = string
    Value = true
    9 INFORMATION: Show collections true / false Show / hide collections
    10 INFORMATION: Show title true / false Show / hide title
    11 INFORMATION: Show price true / false Show / hide price
    12 INFORMATION: Show sale price separator true / false Show / hide price separator
    13 INFORMATION: Show SKU true / false Show / hide SKU
    14 INFORMATION: Show barcode true / false Show / hide barcode
    15 INFORMATION: Show availability true / false Show / hide availability
    16 INFORMATION: Show type true / false Show / hide product type
    17 INFORMATION: Show vendor true / false Show / hide product vendor
    18 INFORMATION: Show reviews true / false Show / hide reviews
    19 INFORMATION: Hide empty reviews true / false Show / hide empty reviews
    20 INFORMATION: Hide reviews counter true / false Show / hide reviews counter
    21 INFORMATION: Show stock countdown true / false Show / hide stock count down text

    22 INFORMATION: Show range of stock countdown true / false Show / hide stock countdown line
    23 INFORMATION: Show countdown true / false Show / hide time countdown

    You should set time at metafields app
    Namespace = countdown
    Key = date
    Value type = string
    Value = date in format YYYY-MM-DD HH:MM:SS ( example - 2018-10-29 17:10:09 )

    24 INFORMATION: Show options (variants) true / false Show / hide product options
    25 INFORMATION: Show quantity true / false Show / hide quantity selector
    26 INFORMATION: Show button 'Size guide' true / false Show / hide size guide popup
    27 INFORMATION: Show button 'Delivery return true / false Show / hide delivery popup
    28 INFORMATION: Show button 'Add to cart' true / false Show / hide add to cart button
    29 INFORMATION: Show button 'Add to wish list' true / false Show / hide add to wish list button
    30 INFORMATION: Show button 'Add to compare' true / false Show / hide add to compare button
    31 INFORMATION: Show payments true / false Show / hide payment icons
    32 INFORMATION: Type true / false Show / hide product type
    33 INFORMATION: Show addthis true / false Show / hide addthis plugin
    34 TABS: Show tabs true / false Show / hide all tabs
    35 TABS: Show tab 'Description' true / false Show / hide description tab
    36 TABS: Show tab 'Reviews' true / false Show / hide reviews tab. You should install Review app
    37 Custom tab per product metafield You can add unique tab per each product. Different content per each product.
    Add two metafields fot needed product to show custom tab.
    You can add four custom tabs per each product.

    Metafields:

    Tab#1

    Meta field for tab title

    Namespace = tab
    Key = title
    Value type = string
    Value = [text]

    Meta field for tab content

    Namespace = tab
    Key = content
    Value type = string
    Value = [text]


    Tab#2

    Namespace = tab1
    Key = title
    Value type = string
    Value = [text]

    Namespace = tab1
    Key = content
    Value type = string
    Value = [text]


    Tab#3

    Namespace = tab2
    Key = title
    Value type = string
    Value = [text]

    Namespace = tab2
    Key = content
    Value type = string
    Value = [text]


    Tab#4

    Namespace = tab3
    Key = title
    Value type = string
    Value = [text]

    Namespace = tab3
    Key = content
    Value type = string
    Value = [text]




    Product page section blocks

    If you want unique tabs per each product you should add metafields as described above.

    If you want same tabs for all product in store, you may add content block 'custom html tab' or 'custom text tab'

    custom html tab
    # Name Value Description
    1 Title text Set tab title
    2 Content HTML code Set HTML content for tab
    custom text tab
    # Name Value Description
    1 Title text Set tab title
    2 Content text Set text content for tab

    Products carousel

    Configure product carousel at the bottom of the page.

    # Name Value Description
    1 Enable true/false Show / hide product carousel
    2 Show top separator true/false Show / hide top border (1 pixel height)
    3 Items per row number Set items per row
    4 Max count number Set product limit
    5 Autoplay true/false Enable / disable autoplay
    6 Autoplay speed number Set timeout for autoplay
    7 Is infinite true/false Enable / disable infinite scrolling
    8 Arrows true/false Show / hide arrows
    9 Bullets true/false Show / hide bullets
    10 Async ajax loading true/false Enable / disable ajax lazy loading product data

    Product carousel - block collection

    # Name Value Description
    1 Title text Set collection title
    2 Collection collection Set products collection

    Blog

    Configure blog list page

    Sidebar

    Configure blog sidebar. Add content blocks to sidebar.



    Categories



    # Name Value Description
    1 Title text Set block title
    2 Menu navigation menu Set menu
    3 Show border true / false Show/hide one pixel border at bottom

    Tags



    # Name Value Description
    1 Title text Set block title
    2 Show border true / false Show/hide one pixel border at bottom

    Recents

    # Name Value Description
    1 Title text Set block title
    2 Menu navigation menu Set blog list to show recent posts from these blogs
    3 Show border true / false Show/hide one pixel border at bottom

    HTML



    # Name Value Description
    1 Title text Set block title
    2 Content html code Set custom html content. You should be familiar with HTML and CSS.
    3 Show border true / false Show/hide one pixel border at bottom

    Subscription

    Configure subscription from

    # Name Value Description
    1 Title text Set block title
    2 Show border true / false Show hide bottom border
    3 Paragraph text Set description
    4 Button text text Set button text
    5 Placeholder text Set placeholder text

    Content

    Configure blog listing page content.





    # Name Value Description
    1 Show title true / false Show/hide title
    2 Type Type #1
    Type #2
    Set layout type.
    Type #1 - list
    Type #2 - grid (masonry)
    3 Size number Set post width (for type #2 only)
    4 Enable masonry true / false Enable/disable masonry effect (for type #2 only)
    5 Posts per page number Set posts per page limit
    6 Show image true / false Show/hide image
    7 Show information true / false Show/hide information
    8 Show tags true / false Show/hide tags
    9 Show content true / false Show/hide text
    10 Show button true / false Show/hide read more button
    11 Show comments true / false Show/hide comments
    12 Show empty comments true / false Show/hide empty comments
    13 Max post content length (letters) number Set text excerpt limit

    Blog article

    Configure blog post page





    To add slider to post add following code to post content.

                                


    And add slide blocks



    Contact page

    Set Google map code



    Gallery page

    Create and configure gallery page



    Create gallery page, set template suffix to "page.gallery"

    Online store -> Themes -> Customize. Navigate to gallery page, sections -> gallery section. Add gallery items.

    Theme settings

    Layout

    # Name Value Description
    1 Enable pre-loader true / false Enable/disable pre-loader.
    2 Default content width Full width
    Boxed
    Set default page width. You can overwrite this value in section options per each section.
    3 Show breadcrumbs true / false Enable/disable breadcrumbs
    4 Pagination type Classic
    Button 'Load more'
    Set pagination type.
    5 Pagination classic centered true / false Align classic pagination
    6 Enable rtl true / false Enable/disable RTL mode
    7 Enable images lazyload true / false Enabel/disable image lazy loading
    8 Favicon image image Set favicon
    9 Optimize CSS true / false Enable/disable speed optimization
    10 Enable presentation true / false Enable/disable demo presentaion feature

    Typography

    # Name Value Description
    1 Font url url Set font url. Copy / paste value of "href" attribute.



                                            https://fonts.googleapis.com/css?family=Ubuntu:300,300i,400,400i,500,500i,700,700i
                                        
    2 Font family text Set font family.



                                            'Ubuntu', sans-serif;
                                        
    3 Body font size number Set body font size
    4 Body line height number Set body text line height
    5 Body large font size number Set font size for captions
    6 Body large line height number Set font line hieght for captions

    Collection page

    # Name Value Description
    1 SIDEBAR: Visibility Desktop and mobile
    Only desktop
    Hide
    Set sidebar visibility
    2 SIDEBAR: Position Left
    Right
    Drop down
    Set sidebar position.
    3 SIDEBAR: Enable sticky true / false Enable/disable sticky sidebar
    4 SIDEBAR: Default 'Show only available' true / false Show/hide out of stock products.
    You can add parameter block, to allow visitor manage this option.

    Product

    # Name Value Description
    1 GENERAL: Show popup 'Add to cart' true / false Show/hide cart popup when press add to cart button
    2 OPTIONS: Show custom options true / false Enable/disable advanced product swatches.
    3 OPTIONS: Options type 'Circle color' Option name or list of option names separated by "|" symbol List options which you want to show as "Circle color"
    4 OPTIONS: Options type 'Circle image' Option name or list of option names separated by "|" symbol List options which you want to show as "Circle image"
    5 OPTIONS: Options type 'Image' Option name or list of option names separated by "|" symbol List options which you want to show as "Image"
    6 OPTIONS: Options type 'Select' Option name or list of option names separated by "|" symbol List options which you want to show as "Select"
    7 OPTIONS: Hide options without availability true / false Show/hide not available options
    8 FUNCTIONAL: Enable replace images in hover true / false Enable/disable change image on hover effect
    9 FUNCTIONAL: Ajax preload json true / false Enable/disable lazy loading for product data.
    10-21 PRODUCT COLLECTION: [options] true / false Show/hide product elements on collection page
    22-28 PRODUCT COLLECTION: [options] true / false Show/hide product elements on collection page, list style mode

    Blog page

    # Name Value Description
    1 SIDEBAR: Visibility Desktop and mobile
    Only desktop
    Hide
    Set sidebar visibility
    2 SIDEBAR: Position Left
    Right
    Drop down
    Set sidebar position.
    3 SIDEBAR: Enable sticky true / false Enable/disable sticky sidebar

    Article page

    # Name Value Description
    1 SIDEBAR: Visibility Desktop and mobile
    Only desktop
    Hide
    Set sidebar visibility
    2 SIDEBAR: Position Left
    Right
    Drop down
    Set sidebar position.
    3 SIDEBAR: Enable sticky true / false Enable/disable sticky sidebar

    Social media

    Set social media links

    News subscription

    Set MailChimp subscription form URL.
    Check video manual for more details
    You should copy only action string from form tag.

    Currency

    # Name Value Description
    1 Enable currency conversion true / false Even though prices are displayed in different currencies, orders will still be processed in your store's currency.
    2 Format Configure currency format. With currency code or without it.
    3 Show sale price separator true / false
    4 Supported Use the country's ISO currency code. Set list of currencies you want to show on your store.
    Separate your currency codes with a space.
    5 Short names Set short names
    6 Full names Set Full names
    7 Default Set default currency

    Compare

    Configure compare products popup.

    Cart

    # Name Value Description
    1 Show notes true / false Show/hide notes field at shopping cart page

    2 Show the shipping calculator? Yes / No Show/hide shipping calculator.
    3 Default country selection text Set default shipping country

    Account

    Set content for signup page

    Colors

    Colors (general)

    Set colors palette for all theme elements.
    In next color settings sections you may change particular elements like buttons, header, etc
    Number of color options may scary at first. But don't worry it's easy to use and you will love them.
    Cause you can change almost every color at your store.
    Each color at palette has ID.
    #1 - Primary color
    #2 - Background, text color
    #3 - Text color
    ...
    Total 9 colors, which is widely used in theme.
    All theme elements use one of these 9 colors.
    You can create new theme skin by only changing 9 colors.
    No need to set colors for each element, for each button, page element, icon, etc.
    Only 9 options. Isn't amazing? :)
    Of course we thought about people who want advanced color options.
    All other color options (hundreds) for such people.
    Don't worry you shouldn't configure each option. Only for elements which you want to customize.





    Note:

    Unfortunately Shopify's color picker. Doesn't have "transparent" option.
    Shella theme allow you to "appoint" unused color and theme will render it as transparent.
    Choose not used color at palette theme will treat it as transparent.
    We recommend to use "#fffffa" color as transparent.
    Next if you want to make some element transparent, just set it's color value to "#fffffa" or whatever you put to the transparent field.

    Colors (inputs)

    Set color for inputs.





    Colors (buttons)

    Set color for buttons. Three types of buttons





    Colors (header)

    Set color for header elements

    Colors (labels)

    Set color for labels

    Colors (footer)

    Set color for footer

    Credits

    All the photos used in this template are intended only to illustrate the template and all the rights on them belong to their legal owners.

    1. jQuery
    2. Bootstrap
    3. Owl Carousel
    4. Isotope
    5. Masonry

    Icon font

    Support

    If you have any questions, feel free to submit ticket.



    © mpthemes.net 2019