Customization

This page will explain all configuration available and how to edit each section appear on theme. Let's view the first homepage.

Homepage of Default Style

Top Banner

Top Banner

The top banner can be showed / edited in admin page > Marketing > Banners. When you add / edit remember to choose Location is Top of Page.

Colors Customization

To customize colors of this section, go to admin page > Storefront Design > My Themes, click button Customize of the current theme to open the Theme Editor.

Click customize theme

Look into the options showing below:

Theme editor top banner

Header Styles

This theme support 3 different header styles: - Logo at left - Logo at right - Logo at center

Header Logo at left

Header Logo at right

Header Logo at center

To configure, open the Theme Editor, scroll down to section Logo, click to expand the logo options. Choose a certain option of Logo position, then click Refresh button appear after.

Change logo position

Colors Customization

To customize colors of the header section, look into the options showing below in the Theme Editor:

Theme editor header

Mega Menu

Mega Menu

Images or labels appear on the mega menu can be edited in the language file en.json:

Edit language for mega menu

For example if the current menu Shop By has category ID = 23.

  • "show_cat_image_23": "yes": specify an image will show on this menu.
  • cat_image_23: is the image URL.

If you want to show a label beside a menu items like above image, for example the menu item Season has category ID = 28:

  • "show_item_label_28": "yes": specify a label will show beside this menu item.
  • "item_label_28": is the label text.

You can add more for other items as you want.

Dropdown mega menu 1

To display this mega menu when hover a category menu item, edit the language file lang/en.json, in section emthemesmodez > megamenu, you will see "menu_cat_0": "2".

  • menu_cat_0 mean the first category item (start from 0).
  • 2 is the identifier number of this dropdown menu.

For example if you want the third category item show this dropdown menu style, input "menu_cat_2": "2".

To edit content inside this dropdown menu, you can edit template file /templates/components/common/navigation-list-mega2.html

Edit banner images on this dropdown menu here:

Edit banner images of mega menu 2

Dropdown mega menu 2

To display this mega menu when hover a category menu item, edit the language file lang/en.json, in section emthemesmodez > megamenu, you will see "menu_cat_1": "3".

  • menu_cat_1 mean the second category item (start from 0).
  • 3 is the identifier number of this dropdown menu.
  • mega_page_X: mean the Xth page item (start from 0).

For example if you want the third category item show this dropdown menu style, input "menu_cat_2": "3".

To edit content inside this dropdown menu, you can edit template file /templates/components/common/navigation-list-mega3.html

Edit banner images on this dropdown menu here:

Edit banner images of mega menu 3

Dropdown mega menu 3

To display this mega menu when hover a category menu item, edit the language file lang/en.json, in section emthemesmodez > megamenu, you will see "menu_cat_2": "4".

  • menu_cat_2 mean the third category item (start from 0).
  • 4 is the identifier number of this dropdown menu.
  • mega_page_X: mean the Xth page item (start from 0).

For example if you want the third category item show this dropdown menu style, input "menu_cat_2": "4".

To edit content inside this dropdown menu, you can edit template file /templates/components/common/navigation-list-mega4.html

Edit banner images and static text on this dropdown menu here:

Edit banner images of mega menu 4

Dropdown mega menu 4

To display this mega menu when hover a category menu item, edit the language file lang/en.json, in section emthemesmodez > megamenu, you will see "menu_cat_3": "5".

  • menu_cat_3 mean the fourth category item (start from 0).
  • 5 is the identifier number of this dropdown menu.
  • mega_page_X: mean the Xth page item (start from 0).

For example if you want the third category item show this dropdown menu style, input "menu_cat_2": "5".

To edit content inside this dropdown menu, you can edit template file /templates/components/common/navigation-list-mega5.html

Edit banner images on this dropdown menu here:

Edit banner images of mega menu 5

Replace the image URL https://tvlgiao.github.io/bigcommerce-themes/parallaxbag/demo/images/banner-menu-jewelry{{@index}}.jpg by your own but keep {{@index}} to be replaced by index numbers (start from 0).

Default Dropdown Mega Menu

Dropdown mega menu

To display the default style mega menu when hover a category menu item, edit the language file lang/en.json, in section emthemesmodez > megamenu, you will see "menu_cat_4": " ".

  • menu_cat_4 mean the fifth category item (start from 0). Leave a space character between the double quote to set default style dropdown menu.
  • mega_page_X: mean the Xth page item (start from 0).

For example if you want the third category item show default style dropdown menu, input "menu_cat_2": " ".

Edit the slideshow

Edit the slideshow in admin page > Storefront Design > Design Options:

Edit homepage carousel

Change position of text content

The theme supports showing slideshow content like heading, text, button on left, right or center of the image. To configure this option, open Theme Editor, Look into section Carousel, click to expand:

Edit position of each carousel slide

Choose position of each slide you want to change.

Colors Customization

To customize color of the slideshow's elements, look into section Carousel in the Theme Editor:

Theme editor carousel

Hide the slideshow

To hide the slideshow on homepage, uncheck on the checkbox Show Carousel in section Carousel of the Theme Editor.

What's Special Banners

What's special banners

You can edit heading text, sub heading, images, links, text on images in the language file lang/en.json in the File Editor, find section parallaxbag > what_special:

Edit language file for what special banners

Keep In Touch (Newsletter)

Keep in touch section

Make sure you tick on the option "Allow Newsletter Subscription" in admin page > Marketing > Email Marketing:

Enable newsletter subscription

Edit text and description in the language file lang/en.json. Find key newsletter:

Edit language for newsletter text

Some Features Block

Some Features Block

You can edit background image, text, buttons, links in this block in the language file lang/en.json, find key parallaxbag > some_features:

Edit language for some features block

Special Products Tabs

Special products tabs

You can configure number of products and product display type in Theme Editor > Homepage:

Theme editor configure products on homepage

Configure colors:

Configure special products tabs

Free Shipping & Return Block

Free shipping and return block

You can edit text of this block in the language file lang/en.json, find key parallaxbag > free_shipping_return:

Edit language for free shipping return

Popular categories block

You can edit title, category images, specify category ID to display category in the language file lang/en.json. Find key parallaxbag > popular_categories:

Edit language file for popular categories section

You can find the category ID by editing the category, look at the URL on your web browser, the number is category ID:

Find category id

Note: this block only works for the root categories.

Promotion Video Block

Promotion video block

You can edit heading, sub-heading, background image and video in the language file lang/en.json. Find key parallaxbag > video:

Edit language for promotion video

6 Banners Block

6 banners block

You can edit these banners in the language file lang/en.json. Find key parallaxbag > six_banners:

Edit language for six banners block

Testimonials Slider

Testimonials Slider

You can edit testimonials in the language file lang/en.json. Find key parallaxbag > testimonials:

Edit language testimonials

Image carousel

To edit image and links in this image carousel section, edit the language file, find key emthemesmodez > image_carousel

Edit language image carousel

  • image*: is link to the image.
  • title*: is image text description.
  • url*: is image link. Leave a single space letter in the value if you want to hide any image.

Footer 3 banners

You can edit content of 3 banners in the language file lang/en.json. Find key parallaxbag > footer_three_banners:

Edit language for footer 3 banners

footer customer services

Edit language file lang/en.json find key footer > links:

Edit language footer customer services

footer delivery & returns

Edit language file lang/en.json find key footer > links:

edit language footer delivery & returns

Footer about us

Edit language file lang/en.json find key footer > about & about_text:

Edit language footer about us

Footer contact us

In your admin page > Store Setup > Store Profile, edit Store Address and Phone:

Edit store address & phone

For email, edit the language file lang/en.json, find key footer > email:

Edit email in the language file

Footer connect with us

In your admin page > Storefront Design > Design Options > Social Media, enter your social links:

Edit social media icons

Payment Icons

Theme editor payment icons

To show/hide payment icons, go to Theme Editor > Payment Icons secitons, check or uncheck any icons you want to show or hide.

Theme editor credit links

To show/hide the credit links, go to Theme Editor > Footer section, tick or untick the checkboxes as showing above.

Assign different product layout to a specific product page

Theme has 2 product layouts: default and Fullwith with Lightbox.

Product layout fullwidth:

Product layout fullwidth

To assign a product layout, edit your product in the admin panel. In tab Order Details, choose Template Layout File with the layout out want:

Assign product layout

Assign different category layout to a specific category page

Theme has 2 category layout: default and Fullwidth.

Category layout fullwidth:

Category layout fullwidth

To assign a category layout, edit your category in the admin panel. Choose Template Layout File with the layout out want:

Assign category layout

Show custom product labels

Product labels

Turn on displaying product labels in the Theme Editor > Products section, tick on the checkbox Show custom label using custom field 'card_label' and choose Display Product Sale Badges as Top Left.

Theme editor products options

Theme editor product sale badges

Edit your product in the admin panel to add custom label:

Edit product custom fields

Add a custom label named card_label and enter label text in the value input box.

Show color swatches on product card:

Color swatches on product card

To display color watches on product card, open Theme Editor > Products section, tick on the checkbox Show color swatches using custom field 'card_color'.

Theme editor products options

Edit your product in the admin panel to add custom label:

Edit product custom fields

Add a custom label named card_color and enter color hex code in the value input box seperator by commas.

Mix contents from other theme styles

For example, if you want to use theme default style as the main theme, but also want to display other content blocks from LaParis II style. You can edit the template files, rearrange, add more content blocks or delete unused content blocks.

Let open folder templates > components > emthemes-modez > home in the template files editor:

Edit template file home default

There is 2 files in this folder:

  • default.html: is used for default style.
  • laparis2.html: is used for LaParis II style.

Let's take a look at contents of 2 files:

default.html

{{> components/emthemes-modez/sections/section section="banner_laparis1_1"}}
{{> components/emthemes-modez/sections/section section="new_products"}}
{{> components/emthemes-modez/sections/section section="categories_featured"}}
{{> components/emthemes-modez/sections/section section="popular_products"}}
{{> components/emthemes-modez/sections/section section="blog_recent"}}
{{> components/emthemes-modez/sections/section section="brands_carousel"}}
{{> components/emthemes-modez/sections/section section="instagram_grid"}}

laparis2.html

{{> components/emthemes-modez/sections/section section="products_by_category_1"}}
{{> components/emthemes-modez/sections/section section="products_by_category_2"}}
{{> components/emthemes-modez/sections/section section="carousel_laparis2_1"}}
{{> components/emthemes-modez/sections/section section="special_products_columns"}}
{{> components/emthemes-modez/sections/section section="brands_carousel"}}
{{> components/emthemes-modez/sections/section section="instagram_grid"}}

The files are showing very clearly how content blocks are displayed. See values in parameter section="...":

  • banner_laparis1_1: Is the first block content 3 banners in the homepage of default style.
  • new_products: Is a block contains new products.
  • categories_featured: Is a block contains featured products with categories list as appeared on the homepage of default style.
  • popular_products: Is a block contains popular (or bestselling) products.
  • blog_recent: Is a block contains recent blog posts.
  • brands_carousel: Is a brand images carousel.
  • instagram_grid: Is a block displaying instagram photos.
  • products_by_category_1 & products_by_category_2: Is a block contains product in a certain category as showing on homepage of LaParis II style.
  • carousel_laparis2_1: Is the image carousel as showing on homepage of LaParis II style.
  • special_products_columns: Is a block contains 3 columns showing new products, featured products and bestselling products as displayed on homepage of LaParis II style.

So just copy a line from the other file to the other. Arrange position of these sections as you wish.

Example of a mixed default.html:

{{> components/emthemes-modez/sections/section section="new_products"}}
{{> components/emthemes-modez/sections/section section="popular_products"}}
{{> components/emthemes-modez/sections/section section="banner_laparis1_1"}}
{{> components/emthemes-modez/sections/section section="products_by_category_1"}}
{{> components/emthemes-modez/sections/section section="products_by_category_2"}}
{{> components/emthemes-modez/sections/section section="instagram_grid"}}
{{> components/emthemes-modez/sections/section section="blog_recent"}}
{{> components/emthemes-modez/sections/section section="brands_carousel"}}

Add our own CSS (Sass) code

To add your own custom CSS code you can edit the file assets/scss/_theme-custom.scss_ in Edit Theme Files editor:

Edit file _theme-custom.scss

Note:

  • Copy / backup this file for future theme upgrade.
  • Add custom CSS code required CSS (or Sass) programming skill. It's not recommended for new users.