Block Sections

This is a powerful and unique feature of the theme, let you rearrange contents, show/hide contents block on the homepages without editing the theme's source code. And No HTML/CSS programming knowledge required.

In the Theme Editor > Homepage. There is 10 sections (or placeholder), where you can pick a content block to show on.

Theme editor homepage sections

  • Section 1 is a placeholder which only support Carousel block - the main image slideshow.
  • Section 2 to Section 10 are placeholder which support the following blocks:
    • New Products
    • Featured Products
    • Popular Products
    • 1st Two Banners 2/3 & 1/3 Column
    • 2st Two Banners 2/3 & 1/3 Column
    • 3st Two Banners 2/3 & 1/3 Column
    • 1st Three Banners 1/3 Column
    • 2st Three Banners 1/3 Column
    • 3st Three Banners 1/3 Column
    • Recent Blog Posts
    • Instagram Photos

The theme supports 3 layout type of New Products, Featured Products and Popular Products blocks:

  • Grid
  • List
  • Carousel

Products Grid:

Products Grid

Products List:

Products List

Products Carousel:

Products Carousel

Configure a Layout Type of products block & Number of Products to show up

In the Theme Editor > Homepage, look into New Products section (or Featured Products, Most Popular Products):

  • Display type: Choose appropriate layout type (Grid, List or Carousel).
  • Number of Products: Choose number of products to show up.

Theme editor homepage products options

Show/Hide Quickview button

When hover on a product item, Quickview button is showed up by default. To disable this feature, uncheck the checkbox Show Quickview in the Theme Editor > Products section.

Theme editor show/hide Quickview button

Change colors and image sizes

In the Theme Editor > Products section, Look into the color options below Product cards, Product Sale Badges, Product cards (Quick search) and Image sizes's options.

Theme Editor Product Cards options Theme Editor Product Sale Badges options Theme Editor Product Cards Quick Search options Theme Editor Image Sizes options

Change the heading text

To change the heading text (New Products, Featured Products, Most Popular Products), edit the language file, look for the key products > new or featured or top.

Edit language new products heading text

Image Banners

The theme supports 2 type of banner blocks:

  • 2 Banners with size 2/3 column & 1/3 column.
  • 3 Banners with the same size 1/3 column.

Group of 2 banners size 2/3 & 1/3 column

2 Banners size 2/3 & 1/3

Group of 3 banners same size 1/3 column 3 Banners size 1/3

Each banner type supports up to 3 instances.

Theme editor section banners supported

Edit banner text and images

To change banner images, heading text, description and buttons, edit the language file, find the key emthemesmodez > banners:

Edit banners content in the language file

  • twothird_onethird_1: The first group of 2 banners with size 2/3 column & 1/3 column
    • banner1: Is the first banner
      • title: Banner heading text
      • text: Banner description text
      • button: Button text
      • image: Banner image URL
      • url: Image and button link
    • banner2: Is the second banner
  • twothird_onethird_2: The second group of 2 banners with size 2/3 column & 1/3 column
  • twothird_onethird_3: The third group of 2 banners with size 2/3 column & 1/3 column
  • onethird_x3_1: The first group of 3 banners with size 1/3 column
  • onethird_x3_2: The first group of 3 banners with size 1/3 column
  • onethird_x3_3: The first group of 3 banners with size 1/3 column

If you don't want to show any elements of a banner, for example the button, leave the value a single space character. Example: "button": " ".

Recent Blog Posts

Recent blog posts

This block show the most recent blog posts, maximum 3 posts are allowed to show up.

Customize heading text and other text

To change the heading text, read more text and date format, edit the language file. Find the key blog > recent_posts, posted_by and read_more, edit its values as you want.

Edit recent blog text in the language file

Instagram Photos

Instagram Photos block

Get your own User ID, Client ID, Access Token

In order to display your Instagram photos on your website, you will need to get the User ID, Client ID and Access Token from Instagram Developer portal.

1. Create your own Client ID

Open the URL https://www.instagram.com/developer/ in your browser.

Login to your Instagram account.

Click button Register Your Application:

Instagram register your application

Click button Register a New Client:

Instagram new client

Enter all required info on the form.

Instagram registration form

Note that Valid redirect URIs should be exactly http://127.0.0.1 as recommended as it will be used in the next step.

After submitting the form you will get back to the previous page with a new Client ID is created.

Instagram Manage Clients

Save this Client ID value, it will be used to configure the Instagram Photos block.

2. Retrieve your Access Token

Click button Manage on your the client app created previously. Open Security tab, uncheck Disable Implicit OAuth checkbox:

Manage client - security tab

Click Update Client button to complete.

Now open your web browser with the URL:

https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=http://127.0.0.1&response_type=token

where CLIENT-ID is replaced by your Client ID number created previously.

Click Authorize button to grant access permission:

Authorize client app

Instagram will redirect you to an error page with the URL similiar:

URL contains access token

The text after access_token= is the Access Token you want to get. Save it for the next step.

3. Retrieve your User ID

Open the link below on your web browser:

https://api.instagram.com/v1/users/self/?access_token=ACCESS-TOKEN

Where ACCESS-TOKEN is replaced by your real Access Token just received previously.

User ID code

The number in "id": "..." is your User ID.

Display your Instagram photos

To display our own Instagram photos, edit the language file. Find the key emthemesmodez > instagram, input your real code:

  • user_id: Is your Instagram User ID.
  • client_id: is your Instagram Client ID.
  • access_token: is your Instagram Access Token.
  • title: Is the heading text.

Edit instagram in the language file