Home page sections

Revolution slider, Scroll slider (vertical slider)

Revolution slider

How to manage revolution slider (basic)

How to manage revolution slider (advanced)

Options

# Option Description
1 Change slides every (seconds) Set timeout in seconds for next slide
2 Navigation style Choose style of arrow and bullets.
Options:
Style 1 - arrows: bottom right, bullets: bottom right
Style 2 - arrows: left/right center, bullets: bottom center
Style 3 - arrows: left/right center, bullets: off
Style 4 - arrows: right center, bullets: right center (vertical)
Off - arrows: off, bullets: off


Blocks

# Name Description
1 Slide (image) Add image slide.
2 Slide (video) Add video slide.
3 Advanced options Add this block if you need advanced configuration of slider navigation: arrows and bullets.


Slide (image) block's options

# Block option Description
1 Image Upload slide image
2 Slide style Select slide animation type
Options:
Style 1 - slide from bottom to top
Style 2 - zoom out effect
Style 3 - slide from right to left
Style 4 - zoom out effect (and stop at the end)
Style 5 - slide from top to bottom
Off - default style
3 Show info? Show/hide text info layer.
4 URL Slide URL (works when product not selected)
5 Product Select product for text info and slider link
6 Button Icon (icon code) Set button icon. Leave empty to remove button.
7 Line 1 (text) Set info text line #1. (works when product not selected)
8 Line 2 (text) Set info text line #2. (works when product not selected)
9 Line 3 (small text) Set info text line #3. (works when product not selected)
10 Info position horizontal Configure text info position
11 Info position vertical Configure text info position
12 Info offset horizontal Set horizontal offset for info text block (in pixels)
13 Info offset vertical Set vertical offset for info text block (in pixels)
14 Info move on hover Set how far move text on hover
15 Colors Set colors
16 Use custom HTML? Enable/disable custom HTML for text info block
17 Content info Text info block content
18 Params slide Advanced users only. Set custom attributes for slide. Check Revolution's slider documentation for more details.
19 Params image Advanced users only. Set custom attributes for image. Check Revolution's slider documentation for more details.
20 Params Info Advanced users only. Set custom attributes for text info layer. Check Revolution's slider documentation for more details.


Slide (video) block's options

# Name Description
1 Video type Select video type. MP4 self hosted. Video service hosted (YourTube or Vimeo)
2 Video URL Upload video file at Store admin -> Online Store -> Files
3 YourTube or Vimeo URL YourTube or Vimeo video URL


Advanced options block's options

# Name Description
1 Show bullets? Show/hide bullets
2 Show arrows? Show/hide arrows
3 Navigation direction Select navigation directions
4 Bullets position horizontal
Bullets position vertical
Bullets offset horizontal
Bullets offset vertical
Bullets position options. Set bullets offset in pixels.
5 Left arrow position horizontal
Left arrow position vertical
Left arrow offset horizontal
Left arrow offset vertical
Left arrow position options. Set left arrow offset in pixels.
6 Right arrow position horizontal
Right arrow position vertical
Right arrow offset horizontal
Right arrow offset vertical
Right arrow position options. Set right arrow offset in pixels.


Scroll slider (vertical slider)

Slider with unique vertical-scroll animation.

Slide's options is the same as for Revolution slide. Please read information about Revolution slider to get the idea how to manage slides.
Scroll slider doesn't support video slide.
Scroll slider doesn't support advanced navigation options.

Banners, 4 banners, banners with list, product banners
Banners configuration, basic (1:36)

Banners configuration, advanced (12:44)

Banners

Use this section to manage banners at home page.

Section options

# Name Description
1 Width Change section width. Available options: boxed, fullwidth.
2 Banners per row Set number of banners per row. Available options: 2, 3, 4. This option works only on wide screens.
3 Margin Set section margin. Margin will be applied to container of all items.
Available options:
None - 0 margin
100px auto 90px (demo2) - set margin-top to 100px, set margin-bottom to 90px, set margin-left and margin-right to auto (it means center in the screen).
This values is the same as on demo#2.
Custom - set custom margin in next field. You should be familiar with CSS margin property.
4 Custom margin This is pure CSS field. You can put any valid CSS value here.
Get more info here
5 Padding (grid inner) Set item padding. Padding will be applied per each item inside container.
Available options:
None - 0 padding
0 12px 0 12px (demo2) - set padding-top to 0px, set margin-left to 12px,
set padding-bottom to 0px, set padding-right to 12px .
This values is the same as on demo#2.
Custom - set custom padding in next field. You should be familiar with CSS padding property.
6 Custom padding This is pure CSS field. You can put any valid CSS value here.
Get more info here
7 Block: Banner Add as many banners as you need. Check banner block option in next table.


Banner block options

# Name Description
1 Image Upload banner image.
You may ask about recommended image size. There is not simple answer on this question.
It depends on you configuration. How many items per row you want to see.
What layout options do you set. Fullwidth or boxed.
What margin and padding options do you set.
If you care about user with retina displays.
If you want to get best performance.
The general recommendation:
- apply all you configuration options
- check visual image size you got on you store

- multiply by two width and height. You get the recommended image size for you configuration.
For example image it's 620 x 464 pixels
- why to multiply by two? It's for devices with retina screens.

For our demo we use 584 x 438 pixels
Recommended image format is PNG
2 Image hover animation Select image animation effect on hover.
Available options:
left > right - move image from left to right
right > left - move image from right to left
bottom > top - move image from bottom to top
top > bottom - move image from top to bottom
zoom in - zoom in image
none - disable hover effect
3 URL Set banner URL
4 Line 1 (text) Set banner text
5 Text position Set banner text position
6 Line 2, Part 1(text) Set second line of text. Used on hover.
7 Line 2, Part 2(text) Set second line of text. Used on hover. You can highlight part of second line text.
8 Hover text position Set hover text position


4 banners

Use this section to manage advanced banners block, with wide and high banners.





This section is basically the same as previous. I will describe here only differences.
Please review banners section before continue on this one.

Differences with banners section

# Name Description
1 Layout options: width, margin, padding Is not available for 4 banners section. It always full width with 0 margins and 0 paddings.
2 Block banner Number of blocks is limited to 4.
Block position is very important. Cause third banner will be scaled to landscape size (wide).
Forth banner will be scaled to portrait size (tall).


Recommended image size:
640 x 480 px - for first and second block
1280 x 480 px - for third block
640 x 960 px - for fourth block


Banners with list

Use this section to manage banners at home page, with link list on hover.



This section is basically the same as banners. I will describe here only differences.
Please review banners section before continue on this one.

Differences with banners section

# Name Description
1 Block banner:
text line#1
text line#2
text position
text hover position
These settings are not available for banner list block.
2 Block banner:
list
New option for banner list section. It shows the link list on hover. Configure link list at Store admin -> Online Store -> Navigation and set to this block option.


Product banners

Use this section to manage banners at home page, with products data: name, price, buy now button.



This section is basically the same as banners. I will describe here only differences.
Please review banners section before continue on this one.

Differences with banners section

# Name Description
1 Block banner:
text line#1
text line#2
text position
text hover position
These settings are not available for banner list block.
2 Block banner:
product
New option for banner product section. It shows the product info on banner. Product name, description, price and add to cart button.
You should add products to your store first. Please refer to Shopify's user manuals how to manage products.
Products (5 sections)
How to manage product sections (2:33)

Before you start working with products home page sections. Be sure that you are familiar with products and collections management at Shopify

For advanced product configuration. Refer to theme settings and MogoPlus app sections of this documentation



One product banner



Section options

# Name Description
1 Image Set product image. Recommended image size is 1920 x 640 px
2 Image Alt text Set image alt text
3 Text #1 Set text #1
4 Text #2 Set text #2
5 Button text Set button text
6 Button link Set button link
7 Width Select section width. Full width or boxed.
8 Margin Set margin. Without margin, margin like on demo#7, custom margin
9 Custom Margin This is pure CSS field. You can put any valid CSS value here.
Get more info here


Products (4 plus 1)

Section options

# Name Description
1 Layout type Select layout type. Big product at left or at right.
2 Big product Select product.
3 Small product (top, left) Select product.
4 Small product (top, right) Select product.
5 Small product (bottom, left) Select product.
6 Small product (bottom, rigth) Select product.


Products (collection)



Section options

# Name Description
1 Product's collection Group products into collection.
Select which collection you want to show on this section.
2 Products per row Set products per row opton.
3 Product limit Set products limit. You can show limited number of products.
4 Product Type Select product layout.
Info on Hover - show product info on hover.
Info under product image - show product info under the image.
5 Width Set section width
6 Margin Set section margin
7 Custom Margin This is pure CSS field. You can put any valid CSS value here.
Get more info here


Products slider



Section options

# Name Description
1 Product's collection Select product collection to show in slider
2 Product limit Set product limit. To show only first X products.


Products vertical sliders



Section options

# Name Description
1 Product's collection #1 Set collection for first vertical slider.
2 Product's collection #2 Set collection for second vertical slider.
3 Product's collection #3 Set collection for third vertical slider.
Brand Slider

Brand slider

Add this section to show brand slider at home page



Section options

# Name Description
1 Width Set section width. Full screen or boxed.
2 Margin Set section margin
3 Custom Margin This is pure CSS field. You can put any valid CSS value here.
Get more info here
4 Block: brand Add as many brands as you need.


Brand block options

# Name Description
1 URL Set brands URL
2 Image Set brands image.
Recommended image size 152 x 49 px
3 Image Alt Set image alt attribute. Good for SEO.
From the blog

From the blog

Use this section to show latest posts from you blog.
You should be familiar with blog, articles management at Shopify software. If not, please refer to Shopify's documentation.



Section options

# Name Description
1 Caption Set section caption. Empty to remove caption.
2 Blog Select blog. You should create blog and articles first.
3 Posts per row Set number of post per row.
4 Number of posts Limit total number of post in slider
5 Width Set section width. Full screen or boxed.
6 Margin Set section margin.
7 Custom Margin This is pure CSS field. You can put any valid CSS value here.
Get more info here
Infobox
How to add info box (1:29)

Infobox

Use this section to create info box at home page.



Section options

# Name Description
1 Box Type Select type:
Type #1


Type #2


Type #3


2 Appearance Set section width.
3 Block: banner Add as many info boxes as you need. Recommended number from 2 to 4.


Block options

# Name Description
1 Icon code Set icon. Empty to hide icon. Check all available icons here
2 URL Set box URL
3 Text (line 1) Set text #1
4 Text (line 2) Set text #2. This is rich text editor input. You can format text with strong and italic styles.
You can also add link
Instagram

Instagram slider

Use this section to show latest post from your Instagram account



Options

# Name Description
1 Caption link text Set caption link text
2 Caption link URL Set caption link URL
3 Caption Set caption


Instagram options

# Name Description
1 Instagram user ID Set Instagram user id
2 Instagram client ID Set Instagram client id
3 Instagram access token Set Instagram access token

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
Testimonials

Testimonials

Use this option to add testimonials block on home page

Section options

# Name Description
1 Background image Set background image
2 Image alt Set alt text for background image.
3 Width Set section width
4 Margin Set section margin
5 Custom margin This is pure CSS field. You can put any valid CSS value here.
Get more info here
6 Block testimonial Add as many testimonials as you nee.


Block testimonial options

# Name Description
1 Caption Set testimonial caption
2 Text Set testimonial text
3 Author Set testimonial author