adartstudio

Homepage Configuration

Homepage Sections

There are 12 different sections available on Homepage.

  • Slideshow


http://take.ms/fvWma

Recommend size: width >2048 for Retina, 1600 for best performance.

You can enable Full-height function.


Add unlimited content, each slide comes with many options: text color, alignment, heading, subheading, description, button.

 



By default, our theme set the slideshow to always cut to center when in responsive mode. Therefore, your images in slideshow are just showing the center.

If you don’t want that, you can change Responsive option from Auto to Manual.

Then you can add your own responsive style manually in Edit code > Assets > theme.scss.liquid.



http://take.ms/TnXbL

You can enable Behind the header option so the slideshow will be under the header. You can lower header opacity at General Settings > Colors > Header.

 

  • Banners


http://take.ms/DUVMP

Unlimited banners to be added.

Uncheck “Use container” to set banner in full-width.

 


http://take.ms/1HFJr

Each banner comes with many options. Set the width of each one and the banners will be automatically ordered in masonry grid.

 

  • Collection list


http://take.ms/dD89l

Unlimited collections to be added.

Disable container to use full-width grid, you can also disable spacing between collections.

Each collection comes with many options. Set the width of each one and the collections will be automatically ordered in masonry grid.


 

  • Featured Collection


http://take.ms/EPwpX

There are 2 types of display collection: Grid or Carousel.


http://take.ms/KJUrd


http://take.ms/AmTq9

 

  • Image with text


http://take.ms/DUDHC

You can set width for each image or paragraph.

 

  • Image with text overlay


http://take.ms/Poxw5

 


http://take.ms/XFWCM

 

  • Video


http://take.ms/PXkhm

Remember to put in Embed code from Youtube or Vimeo. Read here to know where to find it.

 

  • Product list


http://take.ms/CuVFv

Unlimited products to be added.

Same as Featured Collection, this comes with 2 types of display: Grid or Carousel.


In mobile view, theme shows only 1 product per row by default. You can check the box "Enable 2 columns layout on mobile" to show 2 products per row.

 

  • Instagram feed


Remember to paste your Instagram Access Token in General Settings tab > General > Instagram Access Token. You can get this token key here.

 

  • Blog posts


http://take.ms/Z7BEb

Blog feed automatically sorts by latest posts.

You need enter title, sub-title, choose the blog categories and number blogs. There are other options to display:


 

  • Newsletter


http://take.ms/Oku5E

You can set MailChimp form action URL in General Settings tab > General.

 

  • Store Info

Unlimited items to be added.

You can choose to add image or icon (from fontawesome library). Remember to write fa-iconname (which you can find here).


http://take.ms/qI6sP


    • Related Articles

    • Homepage sections

      There are 13 different sections available on Homepage. Slideshow Image Size Recommend size: width >2048 for Retina, 1600 for best performance. Enable Full-height: if enabled, slideshow will auto scale all images to equal the height of screen. ...
    • Homepage Sections

      There are 12 different sections available on Homepage. 1. Slideshow http://take.ms/fvWma Recommend size: width >2048 for Retina, 1600 for best performance. You can enable Full-height function. Add unlimited content, each slide comes with many ...
    • Theme Configuration - General Settings

      General Settings In your admin site, go to Online Store > Themes > Customize Theme, you’ll see the “Theme Settings” tab. The first section in this tab is “General”, where many general settings can be edited.   Here you can edit these options: Back to ...
    • Theme Configuration - General Settings

      General Settings The first section in this tab is “General”, where many general settings can be edited. Here you can edit these options: Back to top button: enable/disable Wishlist page: select the name of the page that uses "page.wishlist" template ...
    • Megamenu configuration

      Drop-down Menu Our theme uses the navigation standard of Shopify. Please read this instruction from Shopify to learn how to create a drop-down menu. Mega Menu A mega menu is a two-level drop-down menu (a dropdown menu inside a dropdown menu). For ...