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

Activate Theme

  1. Download txt file with theme purchase code from your themeforest.net account



    Where Is My Purchase Code?
  2. Find your purchase code

  3. Paste it to theme settings at Online store -> Themes -> Customize -> Theme settings -> Verification -> Purchase code

  4. Save theme settings

How to update theme and save theme settings.

  1. Create copy of you current theme.
    Online store -> Themes -> Actions -> Duplicate.
  2. Download your current theme
  3. Unzip your current theme.
    Name theme's folder "Shella-Current"
  4. Download latest theme version from themeforest.
    Online store -> Themes -> Actions -> Download theme file.
    Unzip latest theme.
    Name it "Shella-Latest-Version"
  5. Copy theme settings file "config/settings_data.json" from current theme to latest theme.
    Shella-Current/config/settings_data.json -> Shella-Latest-Version/config/settings_data.json
  6. Zip "Shella-Latest-Version"
  7. Upload "Shella-Latest-Version.zip" to your store at Online store -> Themes -> Upload theme
  8. Reinstall apps.
  9. Reapply custom code changes.

Check this video for more details - https://www.youtube.com/watch?v=TmV6V5LrpXs

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.

    UPDATE: Metafields Editor app is not free now (since Feb 2019)

    You can use free Chrome extension ShopifyFD

    You can use free Metafields Guru app

  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

Edit shortcodes and icons

  1. You find Shortcode in some field in customise panel. For example, you see the Shortcode:
    [template:popup-size-guide]

  2. Go in admin: Themes -> Actions -> Edit code -> Snippets.
  3. Find and open corresponding snippet file - content-template.popup-size-guide.liquid
  4. Find in the same way icon file. You can find icon Shortcodes either in Customise panel or in shippet files. For example,


    List of available icons

Sections

Global settings

By default theme shows CSS colors default colors. If you need to add some color with specific name or with specific image you can add this option using Global setting.

Content

Product option setting

# Name Value Description
1 Product Associate with the product. Is not required field. Choose product if you need
2 Property Write the word Color
3 Value The name of your color option. Don't forget that the same word should be placed in Sidebar COLOR filters and in Product Tags Set header type
4 Color/Image Choose either color picker of uload image with your option
5 Assign to All
Product
Filters
Choose either color picker of uload image with your option
6 Disable default color/Disable default image Not required fields.

Example:



To see this new added option Collection Sidebar filters write the same name in the field Items in COLOR filter

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 SVG logo Show / hide SVG logo
4 Code of SVG logo Enter svg image code
5 Type Type1
Type2
Type3
Set header type
6 Content width Inherit global settings
Full width
Boxed
Set container width.
Use value from "Theme settings -> Layout -> Default content width" or overwrite it.
7 Menu Navigation menu Create and configure menu at "Online store -> Navigation -> Menus". Select main navigation menu.
8 Enable 'tooltips' Show / hide Tooltips on elements
9 Show button 'Search' Show / hide Search button
10 Show button 'Services' Show / hide Services button
11 Show button 'Account' Show / hide Account button
12 Show button 'Wishlist' Show / hide Wishlist button
13 Show button 'Compare' Show / hide Compare button
14 Show button 'Cart' Show / hide Cart button
15 Show button 'Currency' Show / hide Currency button
16 Show button 'Language' Show / hide Language button
17 Language app Weglot
Longify
Set used language application
18 Sticky logo image (desktop) Set Sticky logo image for Desktop
19 Sticky logo image width Set Sticky logo image width
20 Sticky Disable
Desktop and mobile
Only desktop
Only mobile
Set mode of sticky panel
21 Desktop sticky type Wide
Slim
Set Desktop sticky type

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
Type #5
Type #6
Type #7

Select promo box type.

Type #1

Type #2

Type #3

Type #4

Type #5

Type #6

Type #7

8 Image Set promo box image
9 Image size Set image size
10 Enable format 'pjpg' Enable / Disable format progressive jpg
11 Enable lazy loading Enable / Disable lazy loading
12 Text line 1 Set text line 1
13 Text line 2 Set text line 2
14 Text line 3 Set text line 3
15 Button text Set button text
16 Menu Create and select menu
17 Custom HTML Write your html here
18 ANIMATIONS Set animation for block. If you don't need any animation choose default in the both fields From and To
19 COLORS Set text colors
20 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 Margin top number Set top margin from the Footer to Content.
    4 Responsive margin top number Set top margin for responsive mode.
    5 Enable fixed true / false Enable/Disable fixed mode of the Footer
    6 Show top border true / false Enable/Disable top border line above whole Footer
    7 Show button 'Back to top' true / false Show/hide scroll to top button
    8 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
    [template:footer-custom-html]

    Open corresponding file in "Edit code" section -> Snippets -> open file: content-template.footer-custom-html.liquid
    # Name Value Description
    1 Title text Set title
    2 Enable tooltio true / false Show/hide tooltips
    3 Show facebook true / false Show/hide facebook icon
    4 Show twitter true / false Show/hide twitter icon
    5 Show google true / false Show/hide google plus icon
    6 Show instagram true / false Show/hide instagram icon
    7 Show pinterest true / false Show/hide pinterest icon
    8 Show youtube true / false Show/hide youtube icon
    9 Show behance true / false Show/hide behance icon
    10 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
    3 SVG logo true / false Enable / Disable SVG logo
    4 Code of SVG logo Enter code of SVG logo
    # Name Value Description
    1 Enable custom true / false Overwrite default copyright
    2 Content html code shortcode:
    [template:footer-copyright]
    , snippet file: content-template.footer-copyright.liquid
    # 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: Enable true / false Show/hide search popup
    2 SEARCH: Ajax search true / false If enabled the dropdown under search button will show content with corresponding search terms.
    If disabled - content will not appears.
    3 CART true / false Show/hide cart popup
    4 CART: Show free shipping true / false Show/hide free shipping
    5 WISHLIST true / false Show/hide wishlist popup
    6 COMPARE true / false Show/hide compare popup
    7 ACCOUNT: Enable true / false Show/hide account popup
    8 ACCOUNT: Page content Select page Choose from pages list the page "Include Popup Account"
    9 ACCOUNT: Sign up information content Make clean if you want to use selected above page
    10 ACCOUNT: Show subscribe true / false Show/hide subscribe block
    11 SERVICES true / false Show/hide service popup
    12 SUBSCRIPTION: Enable true / false Show/hide newsletter subscription popup
    13 SUBSCRIPTION: Layout choose Type #1 - Type #4
    14 - 17 SUBSCRIPTION: Texts texts Text line #1 - Text line #4
    18 SUBSCRIPTION: Show form true / false Show/hide form
    19 - 23 SUBSCRIPTION: Input placeholder, Button submit text, Link button text, Text 'Don't show again', Text 'Close popup' texts Enter texts
    24 SUBSCRIPTION: Image choose image Image in form
    25 SUBSCRIPTION: Image width Number Choose image width
    26 SUBSCRIPTION: Enable format 'pjpg'm true / false Enable/Disable format 'pjpg'
    27 SUBSCRIPTION: Link Enter link
    28 SUBSCRIPTION: Show once? true / false Configure popup behaviour
    29 SUBSCRIPTION: Delay number Set timeout delay to show popup
    30 SUBSCRIPTION: Cookies life time How long to save user choice in cookies
    31 SUBSCRIPTION CONFIRMATION: Enable true / false Show/hide newsletter subscription popup
    32 - 33 SUBSCRIPTION CONFIRMATION: Success message, Success button text texts
    34 SIZE GUIDE: Page content Select page Choose from pages list the page "Include Popup Size Guide"
    35 SIZE GUIDE: Content of 'Size guide' content Make clean if you want to use selected above page
    36 DELIVERY RETURN: Page content Select page Choose from pages list the page "Include Popup Delivery Return"
    37 DELIVERY RETURN: Content of 'Delivery return' content Make clean if you want to use selected above page

    Content

    # Name Value Description
    1 Title text Set title
    2 Content html code
    [template:popup-services]

    Open corresponding file in "Edit code" section -> Snippets -> open file: content-template.popup-services.liquid

    This block is under Header button "Client Service"



    # Name Value Description
    1 Title text Set title
    2 Content html code
    [template:popup-services]

    Open corresponding file in "Edit code" section -> Snippets -> open file: content-template.popup-services.liquid

    Footbar

    Notification cookies

    # Name Value Description
    1 Enable true / false Enable/disable notification cookies
    2 Text This is a standard cookie notice which you can easily adapt or disable as you like in the admin.
    We use cookies to ensure that we give you the best experience on our website.
    Enter text
    3 Button information PRIVACY POLICY Enter text
    4 Button close ACCEPT Enter text
    5 Delay number Delay time
    6 Show at once true / false Enable/disable
    7 Cookies life 1 day
    3 days
    1 week
    1 month
    1 year
    Enable/disable

    Notification products

    # Name Value Description
    1 Enable true / false Enable/disable notification products
    2 Collection Set collection to use
    3 Text line #1 Set Text line #1
    4 Text line #2 Set Text line #2
    5 Min time value in line #2 (minutes) Set min time
    6 Max time value in line #2 (minutes) Set max time
    7 Place values in line #2 Set place values
    8 Delay Set Delay
    9 Min interval Set Min interval
    10 Max interval Set Max interval
    11 Max time life Set Max time life

    Product footbar

    # Name Value Description
    1 Enable true / false Enable/disable product footbar
    2 Show title true / false Enable/disable title
    3 Show price true / false Enable/disable price
    4 Show sale price separator true / false Enable/disable price separator
    5 Show reviews true / false Enable/disable reviews
    6 Hide empty reviews true / false Hide/show empty reviews
    7 Hide reviews counter true / false Hide/show reviews counter
    8 Show options (variants) true / false Enable/disable options
    9 Show quantity true / false Enable/disable quantity
    10 Show button 'Add to cart' true / false Enable/disable button 'Add to cart'

    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 Show top separator true / false Enable/disable top separator
    3 Margin top Choose margin top
    4 Responsive margin top Choose responsive margin top
    5 Margin bottom Choose margin bottom
    6 Responsive margin bottom Choose responsive margin bottom
    7 Blog blog Select blog
    8 Items per row number Set items per row
    9 Autoplay true / false Enable/disable auto scroll
    10 Autoplay speed number Set autoplay timeout
    11 Is infinite true / false Enable/disable infinite scroll
    12 Arrows true / false Show/hide arrows
    13 Bullets true / false Show/hide bullets
    14 Disable lazy load true / false Enable / Disable lazy load

    Brands carousel



    Options

    # Name Value Description
    1 Title text Set section title
    2 Show top separator true / false Enable/disable top separator
    3 Margin top Choose margin top
    4 Responsive margin top Choose responsive margin top
    5 Margin bottom Choose margin bottom
    6 Responsive margin bottom Choose responsive margin bottom
    7 Items per row number Set items per row
    8 Autoplay true / false Enable/disable auto scroll
    9 Autoplay speed number Set autoplay timeout
    10 Is infinite true / false Enable/disable infinite scroll
    11 Arrows true / false Show/hide arrows
    12td> Bullets true / false Show/hide bullets
    13 Disable lazy load true / false Enable / Disable lazy load

    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 Enable true / false Show/hide the block
    2 Show top separator true / false Show/hide 1px grey line separator
    3 Margin top Choose margin top
    4 Responsive margin top Choose responsive margin top
    5 Margin bottom Choose margin bottom
    6 Responsive margin bottom Choose responsive margin bottom
    7 Items per row number Set number of products per row
    8 Max count number Set products limit
    9 Autoplay true / false Enable/disable auto scroll
    10 Autoplay speed number Set timeout limit for auto scroll
    11 Is infinite true / false Enable/disable infinite scroll
    12 Arrows true / false Show/hide arrows
    13 Bullets true / false Show/hide bullets
    14 Disable lazy load true / false Enable / Disable lazy load
    15 Async ajax loading true / false Enable/disable async ajax loading

    Information line



    Options

    # Name Value Description
    1 Title text Set section title
    2 Show border true / false Show/hide top border
    3 Margin top Choose margin top
    4 Responsive margin top Choose responsive margin top
    5 Margin bottom Choose margin bottom
    6 Responsive margin bottom Choose responsive margin bottom
    7 Icon color color Set icon color
    8 Title color color Set title color
    9 Paragraph color color Set text color
    10 Background color color Set background color

    Content

    # Name Value Description
    1 Icon snippet name html code
    theme-116

    Open corresponding file in "Edit code" section -> Snippets -> open file: icon-theme-116.liquid
    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 Margin top Choose margin top
    4 Responsive margin top Choose responsive margin top
    5 Margin bottom Choose margin bottom
    6 Responsive margin bottom Choose responsive margin bottom
    7 Disable paddings true / false Disable section grid paddings
    8 Horizontal align Set horizontal align
    9 Vertical align Set vertical align
    10 Overflow hidden true / false Enable/disable overflow hidden view
    11 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 for Revolution
    3. Slick Slider
    4. Slide for Slick
    5. Instagram
    6. Instagram block
    7. Promo box
    8. Products
    9. 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: Min height Default: 550 Set min height
    11 SETTINGS: Image height size Default: 550 Set min height
    12 SETTINGS: Preload spacer true / false Enable/disable preload spacer
    13 SETTINGS: Arrows true / false Enable/disable slider arrows
    14 SETTINGS: Bullets true / false Enable/disable slider bullets
    15 SETTINGS: Delay (seconds) number Set time interval to change slide

    Slide for Revolution



    # 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
    [template:promo-text]

    Open corresponding file in "Edit code" section -> Snippets -> open file: content-template.promo-text.liquid
    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.
    15 HTML LAYER: Responsive width number Set content block responsive width.
    16 HTML LAYER: Delay number Choose delay.
    17 EFFECTS: Slide animation html code Set slide animation effect. Check revolution slider documentation for more details.
    18 EFFECTS: HTML layer animation data attribute code Set content animation effect. Check revolution slider documentation for more details.
    19 EFFECTS: Parallax of image number Set parallax effect for slide image.
    20 EFFECTS: Parallax of content number Set parallax effect for slide content.

    Slick Slider

    # Name Value Description
    1 SETTINGS: Title number Set block width
    2 SETTINGS: Content width number Choose width
    3 SETTINGS: Margin top number Choose margin top
    4 SETTINGS: Responsive margin top coma separated list Set margin top per each screen size.
    5 SETTINGS: Margin bottom number Set margin bottom
    6 SETTINGS: Responsive margin bottom coma separated list Set margin bottom per each screen size.
    7 SETTINGS: Disable paddings true / false Enable / Disable paddings.
    8 SETTINGS: Horizontal align Choose horizontal align
    9 SETTINGS: Vertical align Choose vertical align
    10 SETTINGS: Overflow hidden true / false Enable / Disable overflow hidden style.

    Slide for Slick

    # 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: Responsive height By default: 550px,550px,550px,550px Set responsive height
    8 SETTINGS: Min height Set min height
    9 SETTINGS: Arrows true / false Enable / Disable arrows.
    10 SETTINGS: Bullets true / false Enable / Disable bullets.
    11 SETTINGS: Speed (seconds) Choose speed.

    Instagram



    # Name Value Description
    1 SETTINGS: Title number Set block width
    2 SETTINGS: Content width number Choose width
    3 SETTINGS: Margin top number Choose margin top
    4 SETTINGS: Responsive margin top coma separated list Set margin top per each screen size.
    5 SETTINGS: Margin bottom number Set margin bottom
    6 SETTINGS: Responsive margin bottom coma separated list Set margin bottom per each screen size.
    7 SETTINGS: Disable paddings true / false Enable / Disable paddings.
    8 SETTINGS: Horizontal align Choose horizontal align
    9 SETTINGS: Vertical align Choose vertical align
    10 SETTINGS: Overflow hidden true / false Enable / Disable overflow hidden style.

    Instagram block

    You don't have to add this block. If you haven't added it posts from your Instagram account will be loaded.

    This is developed for optimisation purposes. You can have in your Instagram optimised images which are not loaded from external resources.

    # Name Value Description
    1 Image Choose image
    2 Image size Choose image size
    3 Enable format 'pjpg' true / false Enable/disable format 'pjpg'
    4 Disable lazy load true / false Enable/disable lazy load
    5 Url Paste a link or search
    6 Content html code
    [template:instagram-block]

    Open corresponding file in "Edit code" section -> Snippets -> open file: content-template.instagram-block.liquid

    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
    9 SETTINGS: Disable lazy load true / false Enable / Disable lazy load.

    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: Responsive height coma separated list Set block responsive height.
    4 GRID: Min height coma separated list Set block min height.
    5 GRID: Margin top number Set margin top
    6 GRID: Responsive margin top coma separated list Set margin top per each screen size.
    7 GRID: Margin bottom number Set margin bottom
    8 GRID: Responsive margin bottom coma separated list Set margin bottom per each screen size.
    9 SETTINGS: Type Type #1 - Type #7 Choose the type.
    10 SETTINGS: Image Choose image.
    11 SETTINGS: Image size Select image size.
    12 SETTINGS: Enable format 'pjpg' true / false Enable / Disable format progressive jpg.
    13 SETTINGS: Disable lazy load true / false Enable / Disable lazy load.
    14 SETTINGS: Video Url Enter video url.
    15 SETTINGS: Youtube or Vimeo video URL Enter video url.
    16 SETTINGS: Autoplay true / false Enable / Disable autoplay.
    17 SETTINGS: Controls true / false Enable / Disable controls.
    18 SETTINGS: Url Paste a link or search.
    19 SETTINGS: Text line 1 Enter text
    20 SETTINGS: Text line 2 Enter text
    21 SETTINGS: Text line 3 Enter text
    22 SETTINGS: Button text Enter text
    23 SETTINGS: Menu Choose menu.
    24 SETTINGS: Custom HTML html code Enter html
    25 ANIMATION: Parallax of image Choose paralax property.
    26 ANIMATION: From Choose animation beginning.
    27 ANIMATION: To Choose animation end.
    28 ANIMATION: From opacity Choose animation opacity beginning.
    29 ANIMATION: To opacity Choose animation opacity end.
    30 ANIMATION: Animation text Choose animation text mode.
    31-33 COLOR: Text line 1 - Text line 3 Choose colors.
    34 COLOR: Button Type #1 - Type #3 Choose button type.

    Collections



    Options

    # Name Value Description
    1 Products per row number Set number of products per row
    2 Max count number Set product number per collection
    3 Responsive size coma separated list Set block size per each screen size.
    4 Margin top Choose margin top
    5 Responsive margin top Choose responsive margin top
    6 Margin bottom Choose margin bottom
    7 Responsive margin bottom Choose responsive margin bottom
    8 Disable lazy load true / false Enable / Disable lazy load

    Content - Collection block

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

    Content builder

    This is not usual section. This section is used only to configure text content layout and copy result to needed block.

    Some of theme sections has "Custom HTML" field or "Content" field. Where customer may add custom content. But many customers doesn't want to edit HTML code. In content builder you can configure custom content. Section will generate code, which you should paste to "Custom HTML" field or "Content" field.

    Workflow

    1. Duplicate your current Shella theme. Give it meaningful name. For example - Shella content builder.
    2. Add Content builder section
    3. `
    4. Configure content


      You can build your own content layout or use templates from our demo - https://take.ms/1GssY
    5. Copy result configuration with shortcodes using "Copy with Shortcodes" button
    6. Paste result in PromoBox or Slide content field to main theme
    7. Fill block text and link options. It values will be replaced in shortcodes
    8. Save this template in unpublished theme for future editing and usage

    What is the difference between "Copy with Shortcodes" and "Copy clean HTML"?

    Code with shortcodes is template, which you can reuse in multiple blocks. For example you want to add three banners with same layout. The difference is only in image, text and link. In this case you should build banner template, copy code with shortcodes and replace texts and links at final promobox block.

    Code with shortcodes allow you to build banner template one time. And easily update texts and links without changing template.

    Code with shortcodes has some limits. You can configure banner layout using up to 4 text lines and up to two buttons. If you need more complex layouts you should use clean HTML code.

    Section options



    DEVELOPMENT SETTINGS

    This options work only at content builder section. And not effect generated code.

    Name - to add name for template

    Content width and Canvas background - to change canvas preview.

    Enable developer mode - to show dotted line around content blocks. Hidden on hover.



    SETTINGS

    Section setting to configure position, width, margins, paddings, border and background. Section may include multiple content blocks.

    You can configure section to have auto width, based on content length.

    You can configure section width for all available space.

    You can also configure section border and background.

    Content blocks

    You can add next content blocks:

    • Text
    • Button
    • Button group
    • List

    Content block: Text

    You can configure text font options, position, width and color.

    Content block: Button

    You can configure button font options, position, width and type.

    Content block: Buttons group and List

    These blocks have same font, width and position options

    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
    [template:collection-sidebar-custom-html]

    Open corresponding file in "Edit code" section -> Snippets -> open file: content-template.collection-sidebar-custom-html.liquid

    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
    Type #5
    Type #6
    Type #7
    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 Enable format 'pjpg' true / false Enable / Disable format progressive jpg
    8 Disable lazy load true / false Enable / Disable lazy load
    9 Url url Set promobox URL
    10 Text line 1 text Set text line 1
    11 Text line 2 text Set text line 2
    12 Text line 3 text Set text line 3
    13 Button text text Set button text
    14 Menu Choose menu
    15 Content html code Enter html
    16 ANIMATION: From Choose begining type of animation
    17 ANIMATION: To Choose end type of animation
    18 ANIMATION: From opacity true / false Enable / Disable first opacity
    19 ANIMATION: To opacity true / false Enable / Disable end opacity
    20 COLORS: Text line 1 color Set color for text line 1
    21 COLORS: Text line 2 color Set color for text line 2
    22 COLORS: Text line 3 color Set color for text line 3
    23 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 Placeholder text Set placeholder text
    6 Button text text Set button 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

    Promo boxes have the same option as for home page section.

    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
    11 GRID: Enable tooltips true / false Enable / Disable tooltips

    Products carousel

    SETTINGS

    # Name Value Description
    1 Enable true / false Show/hide carousel
    2 Show top separator true / false Show/hide top separator
    3 Margin top Choose value
    4 Responsive margin top Choose value
    5 Margin bottom Choose value
    6 Responsive margin bottom number Write number
    7 Items per row Choose value
    8 Max count Choose value
    9 Autoplay true / false Enable / Disable autoplay
    10 Autoplay speed Choose value
    11 Is infinite true / false Enable / Disable infinite
    12 Arrows true / false Enable / Disable arrows
    13 Bullets true / false Enable / Disable bullets
    14 Disable lazy load true / false Enable / Disable lazy load
    15 Async ajax loading true / false Enable / Disable async ajax loading

    CONTENT: Collection

    # Name Value Description
    1 Title Write title
    2 Collection Choose collection

    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: Enable format 'pjpg' true/false Enable / disable format progressive jpg
    7 SETTINGS: Disable lazy load true/false Enable / disable lazy load effect on images uploading
    8 SETTINGS: Uppercase text line 1 true/false Enable / disable uppercase
    9 ANIMATION: From Choose begining state of animation
    10 ANIMATION: To Choose end state of animation
    11 ANIMATION: From opacity true/false Enable / disable from opacity effect
    12 ANIMATION: To opacity true/false Enable / disable to opacity effect
    13 COLORS: Text line 1 color Set color for text line 1
    14 COLORS: Text line 2 color Set color for text line 2
    15 COLORS: Text line 3 color Set color for text line 3
    16 COLORS: Button button type Set button type.
    Check home page builder section for more details.

    Content

    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.

    # Name Value Description
    1 For collection Choose collection
    2 Type External global settings
    Type 1 - 7
    Choose type
    3 Image Choose image
    4 Video Url Write url to video
    5 Youtube or Vimeo video URL Write url to video
    6 Autoplay True / false Enable/Disable autoplay
    7 Controls True / false Enable/Disable controls buttons
    8 Url Paste a link or search
    9 Text line 1 Enter text
    10 Text line 2 Enter text
    11 Text line 3 Enter text
    12 Button text text Enter text
    13 Menu Choose menu
    14 Custom HTML html code Enter html

    Product page

    Video manual - 08 Configure product info page

    Product page section options

    # Name Value Description
    1 GENERAL: Layout 1-6 Choose layout
    2 GENERAL: Sidebar Off
    Left
    Right
    Choose sidebar position
    3 GENERAL: Enable sticky gallery true / false Show / hide sticky gallery.
    4 GENERAL: Enable sticky sidebar true / false Show / hide sticky sidebar.
    5 GALLERY: Arrows true / false Show / hide arrows on product image gallery

    6 GALLERY: Show button 'Fullscreen' true / false Show / hide "zoom" button. When click on zoom button image shows in full screen popup.
    7 GALLERY: Zoom true / false Enable / disable image zoom inside image container.
    7a 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]

    8 INFORMATION: Show label 'In stock' true / false Show / hide 'In stock' label
    9 INFORMATION: Show label 'Out stock' true / false Show / hide 'Out stock' label
    10 INFORMATION: Show label 'Sale' true / false Show / hide 'Sale' label

    11 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

    12 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
    13 INFORMATION: Show collections true / false Show / hide collections
    14 INFORMATION: Show title true / false Show / hide title
    15 INFORMATION: Show price true / false Show / hide price
    16 INFORMATION: Show sale price separator true / false Show / hide price separator
    17 INFORMATION: Show SKU true / false Show / hide SKU
    18 INFORMATION: Show barcode true / false Show / hide barcode
    19 INFORMATION: Show availability true / false Show / hide availability
    20 INFORMATION: Show type true / false Show / hide product type
    21 INFORMATION: Show vendor true / false Show / hide product vendor
    22 INFORMATION: Show reviews true / false Show / hide reviews
    23 INFORMATION: Hide empty reviews true / false Show / hide empty reviews
    24 INFORMATION: Hide reviews counter true / false Show / hide reviews counter
    25 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 )

    26 INFORMATION: Show stock countdown true / false Show / hide stock count down text

    27 INFORMATION: Show range of stock countdown true / false Show / hide stock countdown line
    28 INFORMATION: Show text countdown true / false Show / hide text countdown
    29 INFORMATION: Show real time visitors true / false Show / hide real time visitors
    30 INFORMATION: Show options (variants) true / false Show / hide product options
    31 INFORMATION: Show quantity true / false Show / hide quantity selector
    32 INFORMATION: Show button 'Size guide' true / false Show / hide size guide popup
    33 INFORMATION: Show button 'Delivery return true / false Show / hide delivery popup
    34 INFORMATION: Show button 'Add to cart' true / false Show / hide add to cart button
    35 INFORMATION: Show button 'Add to wish list' true / false Show / hide add to wish list button
    36 INFORMATION: Show button 'Add to compare' true / false Show / hide add to compare button
    37 INFORMATION: Show dynamic checkout button true / false Show / hide dynamic checkout button
    38 INFORMATION: Show dynamic checkout confirmation true / false Show / hide dynamic checkout confirmation
    39 INFORMATION: Custom style for dynamic checkout button true / false Show / hide style for dynamic checkout button
    40 INFORMATION: Show free shipping true / false Show / hide free shipping
    41 INFORMATION: Show payments true / false Show / hide payment icons
    42 INFORMATION: Type Dark
    Light
    Choose product type
    43 INFORMATION: Show addthis true / false Show / hide addthis plugin
    44 TABS: Show tabs true / false Show / hide all tabs
    45 TABS: Show tab 'Description' true / false Show / hide description tab
    46 TABS: Show tab 'Reviews' true / false Show / hide reviews tab. You should install Review app
    47 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]




    Content

    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
    [template:product-tabs-custom-html-2]

    Open corresponding file in "Edit code" section -> Snippets -> open file: content-template.product-tabs-custom-html-2.liquid

    custom text tab

    # Name Value Description
    1 Title text Set tab title
    2 Content text Set text content for tab

    custom HTML

    # Name Value Description
    2 Content html code
    [template:product-sidebar-custom-html]

    Open corresponding file in "Edit code" section -> Snippets -> open file: content-template.product-sidebar-custom-html.liquid

    Products - block collection

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

    Related products carousel

    Related products created based on this manual - manual.
    It doesn't allow to set related products manually. If you have more questions about this manual you may ask Shopify support for details

    Options

    # Name Value Description
    1 Enable true / false Enable/disable the block on Product page
    2 Title Enter title
    3 Items per row Choose number
    4 Max count Choose number
    5 Autoplay true / false Enable/disable slider autoplay
    6 Autoplay speed Choose number
    7 Is infinite true / false Enable/disable infinite mode
    8 Arrows true / false Enable/disable Arrows
    9 Bullets true / false Enable/disable Bullets
    10 Disable lazy load true / false Enable/disable lazy load
    11 Async ajax loading true / false Enable/disable Async ajax loading (used for speed up a site)

    Product fixed sidebar

    Options

    # Name Value Description
    1 Show product usage information true / false Enable/disable right popup panel on Product page

    Content

    Text line

    # Name Value Description
    1 Content html code
    [template:product-fixed-sidebar-info]

    Open corresponding file in "Edit code" section -> Snippets -> open file: content-template.product-fixed-sidebar-info.liquid
    2 Min value number Min value
    3 Max value number Max value.

    Blog

    Configure blog list page

    Sidebar

    Configure blog sidebar. Add content blocks to sidebar.

    To enable Sidebar go in Theme settings -> Blog page



    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
    [template:blog-sidebar-custom-html]

    Open corresponding file in "Edit code" section -> Snippets -> open file: content-template.blog-sidebar-custom-html.liquid
    3 Show border true / false Show/hide one pixel border at bottom

    NEWSLETTER 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

    [template:contact-map]
    Open corresponding file in "Edit code" section -> Snippets -> open file: content-template.contact-map.liquid



    Some texts form Contact page you can find in Edit languages section, tab Contact

    Some blocks go in Online store -> Pages -> Contact

    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.

    Content

    # Name Value Description
    1 Page name true / false Enable / Disable JavaScript
    2 Size true / false Choose size
    3 Image Choose image
    4 Image size Choose size
    5 Text line #1 Enter text
    6 Text line #2 Enter text

    Password page

    Options

    # Name Value Description
    1 SUBSCRIPTION: Title Enter text
    2 SUBSCRIPTION: Paragraph Enter text
    3 SUBSCRIPTION: Placeholder Enter text
    4 SUBSCRIPTION: Button text Enter text
    5 BANNER: Image Choose image

    Content

    Social media

    Theme settings

    Verification

    Read chapter - Purchase code

    Layout

    # Name Value Description
    1 Default content width Full width
    Boxed
    Set default page width. You can overwrite this value in section options per each section.
    2 Show breadcrumbs true / false Enable/disable breadcrumbs
    3 Pagination type Classic
    Infinite scroll
    Button 'Load more'
    Set pagination type.
    4 Pagination classic centered true / false Align classic pagination
    5 Enable rtl true / false Enable/disable RTL mode
    6 Enable images lazyload true / false Enabel/disable image lazy loading
    7 Images lazyload effect Fade in
    Show
    None
    Choose effect
    8 Favicon image image Set favicon
    9 Include 'Weglot' app snippents true / false Enable/disable Include 'Weglot' app snippents
    10 Enable presentation true / false Enable/disable demo presentaion feature

    Pre-loader

    # Name Value Description
    1 Enable true / false Enable/disable Pre-loader
    2 Preloader type 1
    2
    3
    Set Preloader type.
    Type of preloader regulates the order of content elements loading: text first and font later etc.
    Recommended to use default theme's type.
    3 Custom image Add image
    4 Custom image size Choose size number
    5 Custom html Write html for preloader
    6 Custom css Write css for preloader
    7 Background opacity Choose opacity number
    8 Cursor image Add image

    Typography

    # Name Value Description
    BODY
    1 Main font family Font picker Select main theme font. It's recommended to select "regular" font version.
    Example: Basic Commercial, regular
    2 Load font weight, Load font weight #2 Enable / disable Enable additional font source file for alternative font version, bold, thin, italic.
    If you don't enable additional source file, browser will render alternative font on it's own.
    If you enable additional source file, browser will render alternative font using font source file.



    vs

    3 Font weight, Font weight #2 Font picker Select additional font variant. Font name should be the same as main font.
    Example: Basic Commercial, bold.
    4 Font size, Line height, Letter spacing Set font options. Most texts in theme created using two text styles. One style has 13px font size by default. You can configure it here.
    5 Font weight Thin, Normal, Bold Set font weight. You can configure theme to load font source file per each font weight
    8 Large font size, Large line height, Letter spacing Set font options for larger main text. By default it has 15px font size.
    HEADINGS
    1 Enable font family Enable / disable Enable custom font for headings. It is not recommended to enable lots of fonts. Each new font slowdown page load speed.
    2 Font family Font picker Set custom font for headings.
    H1, H2, H3, H4, H5, H6 HEADINGs
    1 Font size, Line height, Letter spacing, Font weight Set font options per each heading type.
    LIST
    1 Font size, Line height, Letter spacing, Font weight Set font options per list.
    2 Large list font size, Large list line height, Letter spacing Set font options per large text lists.
    BUTTONS Configure buttons typography options
    MENU Configure menu typography options
    ALTERNATIVE FONT FAMILY Configure additional font. Used at content builder.
    PRODUCT Set font weight for product price
    PRODUCT PAGE Configure options at product page
    SUBSCRIPTION POPUP Configure options for popups

    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: Enable format 'pjpg' true / false Format progressive jpg speeds up site optimisation.
    Disable this option if you add images with transperent background. Because you will see a black background instead.
    2 GENERAL: Ajax adding to cart true / false Show/hide cart popup when press add to cart button
    3 GENERAL: Show popup 'Add to cart' true / false Show/hide cart popup when press add to cart button
    4 GENERAL: Stock countdown min value Choose value
    5 GENERAL: Hours of the day to reset delivery countdown Choose value
    6 GENERAL: Average delivery time of delivery countdown (days) Choose value
    7 GENERAL: Format of delivery countdown date Write formula from letters, for example, Day DD/MM/YYYY
    8 GENERAL: Exclude days of the week Write days of the week
    9 GENERAL: Visitors min value Choose value
    10 GENERAL: Visitors max value Choose value
    11 GENERAL: Visitors max value stroke Choose value
    12 GENERAL: Visitors min update interval Choose value
    13 GENERAL: Visitors max update interval Choose value
    14 GENERAL: Show review loading text true / false Show/hide review loading text
    15 GENERAL: Cursor image Set image
    16 OPTIONS: Show custom options true / false Enable/disable advanced product swatches.
    17 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"
    18 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"
    19 OPTIONS: Options type 'Square color' Option name or list of option names separated by "|" symbol List options which you want to show as "Square color"
    20 OPTIONS: Options type 'Square image' Option name or list of option names separated by "|" symbol List options which you want to show as "Square image"
    21 OPTIONS: Options type 'Select' Option name or list of option names separated by "|" symbol List options which you want to show as "Select"
    22 OPTIONS: Options type 'Large text' Option name or list of option names separated by "|" symbol List options which you want to show as "Large text"
    23 OPTIONS: Visibility on listing Show all options
    Show only first option
    Show first and second options
    Choose mode of options displaying
    24 OPTIONS: Hide options without availability true / false Show/hide not available options
    25 FUNCTIONAL: Enable replace images in hover true / false Enable/disable change image on hover effect
    26 FUNCTIONAL: Enable tooltips true / false Enable/disable tooltips
    27 FUNCTIONAL: Enable payments tooltips true / false Enable/disable payments tooltips
    28 FUNCTIONAL: Enable option tooltips true / false Enable/disable option tooltips
    29 FUNCTIONAL: Change variants on hover true / false Enable/disable variants on hover
    30 FUNCTIONAL: Ajax preload json true / false Enable/disable lazy loading for product data.
    31 PRODUCT COLLECTION: Image size Choose image size mode
    32 PRODUCT COLLECTION: Image responsive height (in % of width) Choose image height mode
    33 PRODUCT COLLECTION: Centered information true / false Enable/disable centered information.
    34 PRODUCT COLLECTION: Show collections true / false Enable/disable collections.
    35 PRODUCT COLLECTION: Show more info for grid view (Collections, Vendor, Type) true / false Enable/disable more info.
    36 PRODUCT COLLECTION: More info type Choose Product type
    Collections
    Vendor
    37-56 PRODUCT COLLECTION: [options] true / false Show/hide product elements on PRODUCT COLLECTION page
    57-62 PRODUCT COLLECTION: [options] true / false Show/hide product elements on collection page, list style mode
    63 QUICK VIEW: Layout 1-6 Choose QUICK VIEW block layout
    55-98 QUICK VIEW: [options] true / false Show/hide product elements on QUICK VIEW
    99 QUICK VIEW: Type Dark
    Light
    Choose QUICK VIEW block color scheme
    100-117 PAYMENTS: [options]
    Available logos:
    'Power by stripe'
    'Shopify secure'
    AES 265 bit'
    'Paypal'
    'Visa'
    'Mastercard'
    'Discover network'
    'American express'
    'McAfee secure'
    true / false, url Show/hide payment type
    Enter url for each type

    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

    # Name Value Description
    1 SOCIAL SHARING IMAGE set image Shown when sharing a link on social media
    2-4 SOCIAL SHARING OPTIONS true/false Share on Facebook, Tweet on Twitter, Pin on Pinterest
    5-12 SOCIAL ACCOUNTS links Set social media links for: Facebook, Twitter, Google+, Instagram, Pinterest

    News subscription

    # Name Value Description
    1 Subscription method Shopify (default)
    MailChimp
    Choose functionality of Newsletter subscription.
    2 MailChimp URL 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 GENERAL: Free shipping value true / false Show/hide Free shipping value at shopping cart page

    2 GENERAL: Free shipping value Set price of free shipping begins (in cents)
    3 Show notes true / false Show/hide notes field at shopping cart page

    4 SHIPPING RATES CALCULATOR: Show the shipping calculator? Yes / No Show/hide shipping calculator.
    5 SHIPPING RATES CALCULATOR: Default country selection text Set default shipping country

    Account

    Set content for signup page

    Search

    # Name Value Description
    1 Show only products true / false Choose search criteria.
    If uncheck - search will be done throughout full site content: products, articles, blog posts etc will be shown in the top search dropdown

    Other

    # Name Value Description
    1 Button border radius number Set border radius for all buttons in a site
    2 Input border radius number Set border radius for all input fields in a site
    3 Button horizontal padding (desktop) number Choose horizontal padding (desktop) for buttons
    4 Button horizontal padding (mobile) number Choose horizontal padding (mobile) for buttons

    Colors: general, inputs, buttons, header, labels, footer, subscriptions popup, notifications, other

    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, labels, footer, subscriptions popup, notifications, other (colors for bullets, arrows, review stars price, sale price)

    Set corresponding colors

    Animations

    # Name Value Description
    1 CSS: Duration Choose time
    2 PRODUCT HOVER: Duration Choose time
    3 PRODUCT HOVER: Style Emersion all
    Toggle
    Fade
    Emersion horizontal
    Emersion vertical
    Scale
    Choose style
    4 PROMOBOX: Duration Choose time
    5 TOOLTIPS: Style Fade
    Scale
    Emersion vertical
    Scale
    Shift-toward
    Shift-away
    Perspective
    Choose style
    6 TOOLTIPS: Enertia true/false Enable/Disable enertia effect
    7 TOOLTIPS: Show duration Choose time
    8 TOOLTIPS: Hide duration Choose time
    9 STICK HEADER FADE: Duration Choose time
    10 STICK HEADER FADE: Opacity Choose time
    11 MENU: Desktop duration Choose time
    12 MENU: Mobile duration Choose time
    13 HEADER TAPE: Duration Choose time
    14 DROPDOWN: Duration Choose time
    15 ACCORDION: Duration Choose time
    16 POPUP: Duration Choose time
    17 NOTIFICATION: Duration Choose time
    18 FOOTBAR PRODUCT: Duration Choose time
    19 TABS: Duration Choose time
    20 TABS: Scroll duration Choose time
    21 BUTTONS: Icon animation enable true/false Enable/Disable animation
    22 PAGINATION: Duration Choose time
    23 BUTTON 'BACK TO TOP': Duration Choose time

    Java Script

    # Name Value Description
    1 Load jQuery first true / false Enable / Disable JavaScript

    Developer

    # Name Value Description
    1 Enable Shopify content for header true / false Enable / Disable custom CSS file
    2 Enable custom CSS file true / false Enable / Disable custom CSS file
    3 Enable custom JavaScript file true / false Enable / Disable custom JavaScript file

    Checkout

    # Name Value Description
    1 BANNER: Background image 1000 x 400px recommended Set image
    2 LOGO: Custom image Set image
    3 LOGO: Position Left
    Center
    Right
    Choose position
    4 LOGO: Logo size Small
    Medium
    Large
    Choose size
    5 MAIN CONTENT AREA: Background image Set image
    6 MAIN CONTENT AREA: Background color Choose color
    7 MAIN CONTENT AREA: Form fields White
    Transparent
    Coose fields type
    8 ORDER SUMMARY: Background image Set image
    9 ORDER SUMMARY: Background color Choose color
    10 TYPOGRAPHY: Headings Choose font for Headings
    11 TYPOGRAPHY: Body Choose font for Body
    12 COLORS: Accents, Buttons, Errors Choose corresponding

    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

    Icons

    Support

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



    © mpthemes.net 2019