Codion Theme

Codion Theme Documentation

Codion Theme is a theme for e-commerce websites which comes with a modern and elegant design. Codion has a full screen animated slider, smooth parallax scrolling, subtle animations, video ribbons, product showcase section,WPBakery Include and many more.

After downloading the theme in your system you need to log in to your WordPress dashboard and navigate to Appearance » Themes » Add New » Upload Theme and select the theme zip file you downloaded previously and click Install Now button.

In a few seconds, WordPress will upload and extract the theme from the archive. The last step is following recommended plugin.

To set up your website frontpage you first need to create two pages. One will become the front-page, and the other will be where your posts are displayed. For example, you have created two pages named Home and Blog , Now go to Settings » Reading, set the Front page displays to a static page and select your recently created pages Home as your front page and Blog as posts page.

Header Options

In this section contains two different sections, First one is most top bar where you can set up the top bar according to your requirement. The second section is the header in which you can set the default header image. The recommended header size is 1200 × 280px.
Blog page header title and subtitle are also changed through the header section.


Logo Section :

In the Site Identity section, you can add the logo of your website, site title, tagline, and a site icon.

Frontpage Sections

You can customize  everything on the front page in this section.

Slider Section

  • Add new slider  For each slide, you can add  picture,  title, subtitle, button label, and its link. You can add as many slides as you want.
  • By default, your Slider section is visible. You can check the Hide slider section button and the slider will disappear from your homepage.
  • In the slider shortcode section, you can add a shortcode of any slider plugin to replace the theme’s default slider.

Products section

  • In product section by default WooCommerce latest products are displaying. If you want to have different products, you have two options. Either enter a WooCommerce shortcode or select a category of products to display.
  • By default  your Products section is visible. You can check the Hide products section button and the section will disappear from your homepage.

Services Section

  • Add new service box  For each service, you can add an icon,  title,  subtitle, and its link. You can add as many services as you want.
  • Icon – There are more icons than the ones listed in the theme, you can find the full list on the Icon Font page and scroll down to the section Complete List of Class Names . There, when you find an icon that you like just copy the name and paste it in the Icon input in the service box. Don’t worry, the icon appears immediately so you can see if you copy-pasted the right icon name.

Products slider

  • By default  WooCommerce products from the first category found are displayed in this section. You have the option to choose a different category, to add a title and a subtitle.
  • The Products slider section is visible on each page by default. There are two different options to hide this section on your front page and single product page.


  • n this section  you can show multiple product categories. Add  title and subtitle for your category sections and choose the categories to display on front page .


  • In banners section  you can add the section title. By default  there are three banners on your homepage but you can add as many banners as you want. In each banner, you can add an image and a link to that image.


  • Add a title for your video and embed the video from YouTube . A short video about your products would be probably the best way to promote them.
  • Add a video thumbnail image.
  • You can adjust the padding value to increase or decrease the size of the video section.
  • By default, your Video section is visible. You can check the Hide video section button and the video section will disappear from your homepage.


  • In ribbon section, you can add a background image with some text,  button text and the button link.


  • In map section you can add a map to use this section first install Intergeo Maps plugin then create a map and paste its shortcode here to display on frontpage .


  • In shortcodes section  you can use any shortcode. Add a title,  subtitle and the shortcode to display a new section on the front page. You can add as many shortcodes as you want.


Colors section gives you full control to change the color scheme of your website. Along with that , you can change the color of the header text, background, navbar background, menu items, menu hover, and footer background.

In footer section  you can edit the copyright of your site and you have the option to add social media icons. Select the icon you want with your social link. You can add as many icons as you want.

In Background section you can set the background image of your website.

In  widget section, you could add widgets to footer areas by selecting the section you want and then clicking  Add a Widget.

Advanced options

Advances section gives you many options:

  • You can disable the pre loader with a simple click.
  • You can set the font size.
  • Here you can customize the content for the 404Not found page. The best part is the Background Image for 404 Page and the “Back to” button. Never lose again your visitors from that page.

About Page

Create a page and select the template About page for it.

Contact Page

Create a page and select the template Contact page for it.

Quick View button

Adding a quick view button which will display a short description of each product has always been a nice-to-have tool for your e-commerce website, which is why we’ve made it easy with ShopIsle Pro. The quick view button can be implemented by using the  YITH WooCommerce Quick View plugin. If you would like to make further customizations to this feature, the entire documentation of this plugin is available on its landing page on