1. Introduction
  2. Getting Started
    1. Requirements
    2. WordPress Installation
    3. Theme Installation
      1. with Envato Market Plugin
      2. with FTP Client
      3. Through WordPress
    4. Child Theme
    5. Sample Data
  3. Theme Settings
    1. Layout Settings
    2. Site Logo
    3. Sticky Header
    4. Site Preloader Option
    5. Back to Top
    6. Header
      1. Site Header
      2. Topbar
      3. Search
    7. Page Header
    8. Page Settings
    9. Footer
    10. Blog/Post Settings
      1. Blog Settings
      2. Archive Settings
      3. Single Post
    11. Portfolio
    12. Color Scheme
    13. WooCommerce
      1. Products Listing
      2. Products Filters
      3. Single Product
      4. Checkout
      5. Quick View
      6. My Account
      7. Cookie Law Info
      8. Promo Popup
    14. Faq Settings
    15. Site Info
      1. Social Profiles
      2. Site Contacts
      3. Opening Hours
    16. Social Sharing
    17. Typography
    18. 404 Page
    19. Performance
    20. Maintenance
    21. Custom CSS/JS
    22. MailChimp Settings
  4. VC Elements/Shortcodes
    1. Address Block
    2. Banner
    3. Button
    4. Callout
    5. Category Box
    6. Clients Logo
    7. Countdown
    8. Counter
    9. Hotspot Image
    10. Image Slider
    11. Info Box
    12. Info Box 2
    13. Instagram
    14. Kite Box
    15. List
    16. Multi Tab Product Listing
    17. Newsletter
    18. Opening Hours
    19. Portfolio
    20. Product Deal
    21. Product Deals
    22. Product Showcase
    23. Products Listing
    24. Recent Posts
    25. Single Product Slider
    26. Social Icons
    27. Team Members
    28. Testimonials
    29. Vertical Menu
  5. Videos
    1. WooCommerce
      1. Installing WooCommerce
      2. General Settings
      3. Products Settings
      4. Tax Settings
      5. Tax Rate Example
      6. Shipping Zones
      7. Flat Rate
      8. Free Shipping
      9. Local Pickup
      10. Shipping Options
      11. Shipping Classes
      12. Checkout Settings
      13. BACS
      14. Check Payments
      15. Cash On Delivery
      16. PayPal Standard
      17. Accounts Settings
      18. Emails Settings
      19. API Settings
      20. Product Categories, Tags, & Attributes
      21. Simple Product Overview
      22. Grouped Product Overview
      23. External/Affiliate Product Overview
      24. Variable Product Overview
      25. Downloadable Product Overview
      26. Coupons
      27. Widgets
      28. Shortcodes
      29. Managing Orders
      30. Refunding Orders
      31. Reporting
      32. System Status
  6. Extra
    1. Retina Display
    2. Browser Support
    3. How to rate this item
    4. Speed Optimization
    5. WooCommerce / Shop integration
    6. Translation
      1. Poedit
      2. Loco Translate
      3. WPML
    7. Plugins Documentation
      1. WPBakery Page Builder
      2. Advanced Custom Fields
      3. Max Mega Menu
      4. WooCommerce
      5. YITH WooCommerce Compare
      6. YITH WooCommerce Wishlist
      7. Dokan Multivendor Marketplace
      8. WC Marketplace
      9. Instagram Shop
  7. Additional
    1. Header Builder
    2. Custom Sidebar Widget
    3. Mega Menu
  8. Changelog
  9. Source & Credits

Introduction

This documentation will give you an understanding of how CiyaShop is structured and guide you in performing the most common functions. If you require further assistance, related to topics not covered in this documentation, then please contact us via our support forum.

NOTE: We will not respond to any support questions on item comment section or through e-mail. If this document doesn’t answer your questions feel free to open up a private ticket in our support forum

If you want to customize this theme as per your requirement, please contact us here: Support Forum.

Requirements

Apart from the necessary WordPress requirements, and WooCommerce requirements, here are listed recommended server configuration requirements to make the theme’s functions work correctly.

  • PHP: Version 7.2 or greater
  • MySQL: Version 5.6 or greater ( OR MariaDB version 10.1 or greater)
  • memory_limit – 128M, or higher
  • max_execution_time – 180, or higher
  • upload_max_filesize – 32M, or higher
  • HTTPS support: Refer Moving Toward SSL and SSL and HTTPS for more information.

Most problems, such as white screen, out of memory error, sample data import failure, etc., usually arrive due to server settings and excessively low PHP configuration limits. You can change the necessary configurations, either by yourself (if your hosting provider allows you to do so) or contact your hosting provider to increase the limits.

So, make sure your server configuration is all set up, and the theme and plugins are working correctly. Enough server configuration will also ensure fast speed and increased performance.

Note

  • Please check the theme requirements before you start with the theme. You can check PHP configuration and limits in Admin Panel > Tools > Site Health > Info [tab]. Site Health tool is built-in in WordPress v5.2 or greater. If you are using WordPress v5.1.x or lower, use the Health Check & Troubleshooting plugin.
  • In addition to the theme’s, above-mentioned, minimum requirements, if you are using an extensive list of plugins, the minimum requirements of your website may increase, according to the count and requirements of plugins.

WordPress Installation

WordPress is one of the most accepted and popular CMS in the world that makes it the best choice for your website.
You can download and install the WordPress from the official website using WordPress’ very setup steps called “Famous 5-minute install”.

For more information on WordPress, please, visit the WordPress Codex page.

Theme Installation

We assume that your WordPress website is already set (if not, refer to WordPress Documentation to setup WordPress), the next step is to install the theme.

To get started with theme installation (we assume that you’ve purchased theme at ThemeForest),  you’ll need to download the theme file. To download theme file, go to ThemeForest Downloads and locate the theme. Click on the download button and select the “Installable WordPress file only.” It will download the WordPress theme zip file for your theme.

Once, the download completed, you can proceed with theme installation. Here are the steps to install the theme:

Option 2: with FTP Client

If you prefer to install your theme via FTP / SFTP, you can. It is a straightforward process. There are some necessary steps which cannot be miss.

For this, first, you need to install an FTP (file transfer protocol) client application. You can use FileZilla, or any other FTP Client, as per your choice and system environments.

Once FTP client installed, open it and connect to your server (we are using FileZilla for demonstration). For more information on FTP server refer this link.

Now, extract the theme from downloaded zip (Please make sure you’ve downloaded it with “Installable WordPress file only”). Then, navigate to “themes” folder on your server, it should be at “Your_Website_Root\wp-content\themes”. Now, upload the extracted “theme” folder in themes folder on the server.

Option 3: Through WordPress

For this installation method, follow below steps:

  1. Log in to the WordPress Admin Panel and go to Appearance > Themes.
  2. Click on Add New button on top of the screen.
  3. Click on Upload Theme button in the top, to upload a zipped copy of the theme (Please make sure you’ve downloaded it with “Installable WordPress file only”).
  4. Now, select the zipped copy of the theme, and click on Install Now button.

Note – This method not recommended due to the large size of the theme.

Child Theme

CiyaShop fully supports child theme. A child theme inherits the functionality and styles of another theme, called the parent theme. Child themes are the preferable way of modifying an existing theme.

A child theme allows to make minor or extensive changes, in a safest and most comfortable method, yet still, it preserves theme’s look and functionality.

And, using the child theme, in the case of updating the theme, will help to avoid losing any customization.

Theme package contains “CiyaShop Child” child theme. To use the child theme, upload the child theme, from theme package, in the /wp-content/themes/ folder.

For more information, please check below links:

https://codex.wordpress.org/Child_Themes

https://developer.wordpress.org/themes/advanced-topics/child-themes/

Sample Data

You can import the sample data by running the setup wizard, or you also can use the theme options for import the sample data. For that first, activate the “CiyaShop” theme and run the setup wizard.

Then activate the theme using the purchase code and install the required plugins. After the theme and plugins installations, the next step is to create a child theme if you want to customize it, then you can proceed with sample-data to install sample data. It will help you to understand the content/layout and customize the site quickly. If you want to continue from scratch, you can skip this step. The theme bundled with the sample data. It will create similar to the instance of our demo site ( It is not exactly the same because of the contents/layout of the demo site change time-to-time as per new changes).

To proceed to sample data installation using theme options go to Theme Settings > Sample Data and click on “Install” button (and Keep Calm). And, the import will run and processed in the background.

You can import additional pages using Additional pages importer, which contains the additional home pages.

Note: You have to activate the theme first. Without activation of the theme, you can’t import the sample data.

Theme Settings

The theme comes with Theme Options, from where users can control and customize the various portion of the site.

Layout Settings

From this section, you can control layout of the site. This section contains the below fields:

Site Layout: As field name suggests, with this you can select the layout of the site.
Background: This field depends on Site Layout field value. This field will appear and is applicable when any site layouts selected except Full Width. This field contains various subfields to set/manage background settings of the site.

Site Preloader Option

In this section, you can manage site preloader. This section contains fields to enable/disable preloader, select preloader source and select preloader image.

 

Back to Top

This section provided settings to enable/disable “Back to Top” in desktop and mobile.

Topbar

In this section, you can enable/disable topbar, and manage elements/content in topbar. This section contains some pre-defined topbar elements, i.e., Language, Currency, Phone Number, Topbar Menu, Email, and Social Profiles.

Some elements are dependent on other plugins or settings in other sections. So, they will appear on front only if the criteria fulfilled.

Page Settings

In this section, you can manage page layout, Full Width, Left Sidebar, or Right Sidebar, of default and search page.

Blog Settings

In this section, you can manage blog page sidebar and blog posts list style. You can choose the list from Classic, Grid, Masonry, and Timeline.

If the layout set to Grid or Masonry, in combination with Full Width (without Left/Right sidebar), it will provide an option to choose Grid Column Size, either 2 Column or 3 Column.

It also provides the option to display select post meta fields from Author, Categories, Tags, and Comments.

Archive Settings

In this section, you can handle to display archive page descriptions, i.e., Author Info on Author Archive page, Category Description on Category Archive page, and Tags Description on Tag Archive page.

Single Post

In this section, you can control meta fields (Author, Categories, Tags and Comments) visibility. And, can show/hide Related Posts, Author Details, and Post Navigation.

Portfolio

This element allows inserting portfolio in archive page.

  • Portfolio Sidebar : Select sidebar position for portfolio. There are three options for sidebar.
    • Full Width
    • Left Sidebar
    • Right Sidebar
  • Portfolio Column Size:Select column size for portfolio.
  • Space between Portfolio:Select a space between portfolio.
  • Portfolio styles:Select portfolio style. There are five types of styles.
  • Show categories filters:This option to Enable/Disable categories filters
  • Portfolio Pagination:Select pagination type for portfolio. There are three types available.
    • Pagination
    • Load More
    • Infinite Scroll
  • Portfolio Per Page:Enter number of portfolio to display per page.
  • Portfolio Order by: Select this option to set an order of portfolios by title, date, modifeid date or portfolio if.
    • Title
    • Date
    • Modified
    • ID
  • Portfolio Order: Select the portfolio sorting order.
    • ASC
    • DESC
  • Portfolio Fullscreen: This option is use to set the portfolio listing page in wide screen.
  • Portfolio Details
  • Display Portfolio Navigation :You can set portfolio navigation in portfolio single page using this option.
  • Display Related Portfolio :Enter title for a related portfolio.
  • Number of Related Portfolios :Enter number of a related portfolio to be displayed.

Color Scheme

Here, you can control the color of various portion/sections of the site. It contains three below color fields:

  • Primary: Main theme and background color.
  • Secondary: Theme dark title and background.
  • Tertiary: Theme description color and border colors.

Colors of some sections of the site can manage from there own setting panels.

Products Listing

In this section, you can control the look of product listing page. This section provides setting fields as below:

  • Product Listing Column: Select how much columns to display on listing page.
  • Products Columns On Mobile: Select how many columns to display in mobile devices on the listing page.
    Note: If the device width is less than 480px, it will display one column.
  • Product Listing Sidebar: Select sidebar on listing page.
  • Page Width: Select width of the page. If it set to Fixed, it will display page in the container, and if it set to Wide, it will show the page in the full width of display size.
  • Show Sidebar on Mobile Devices: This field will allow to show/hide the sidebar on mobile devices.
  • Sidebar position for mobile: If the sidebar is set to display on the mobile device, you can choose where to show it, either on top of content or bottom of the content.
  • Product Hover Style Settings: This contains sub-fields and provides settings to control display behavior when hovering over any product.
    • Product Hover Style: Select hover style. You can see the preview of hover style below this field. It contains hover styles as below.
      • Default
      • Icon Top Left
      • Image Center
      • Image Left
      • Image Bottom
      • Image Bottom 2
      • Image Bottom Bar
      • Info Bottom
      • Info Bottom Bar
    • Swap Image On Hover: Change the image on hover the product.
    • Product Title Length: Select the product title length.
    • Button Shape: Select the shape of the button. (This field applied to Image Center, Image Left, Image Bottom)
    • Button Style: Select the style of button. (This field is applicable for Default, Image Center, Image Left, Image Bottom)
    • Bar Style: Select bar style. (This field belongs to Image Bottom Bar, Info Bottom, Info Bottom Bar)
    • Add to Cart” Position: Select “Add to Cart” button position. (This field is applicable only for Image Bottom Bar, Info Bottom, Info Bottom Bar)
    • Product Icons Type: Select icon type in product hover.
  • Display “Out of stock” Label: Display “Out of stock” notice for products not in stock.
  • Sticky Footer For Mobile Device: Show and hide the sticky footer for mobile device.
  • Just Catalog: This will enable catalog mode product listing. Catalog mode product listing displays products without an online selling facility. It means it will show product without “Add to Cart” button and other features related to selling.
  • Countdown Timer: Enabling this will display a countdown timer for products that scheduled for sale on a specific date.
  • Shop Page Banner Display: Enable this to display a banner on shop page at the top of products listing.
  • Shop Page Banner: Select image to display as shop page banner. (This field is applicable only if “Shop Page Banner Display” button is on.)
  • Number of Products per Page: Select number of products to display per page.
  • Product Pagination : Select pagination style for shop page. There are three types of styles.
    • Pagination
    • Load More
    • Infinte Scroll

Products Filters

In this section (introduced in the version 2.4.0), you can manage filters on the shop page. This section provides setting fields as below:

  • Show Filter: Enable this option to show filter option on the shop page.
  • Filter Title : Enter a title for the product filter section.
  • Product Filters : Select attributes to add into the filter on the shop page. To display result from all attributes leave all attributes unselected.

Single Product

In this section, you can manage product detail page look and feel.

  • Product Page Style: Select product page style. This field contains options as below.
    • Classic: This is a default layout.
    • Sticky Gallery: In this layout, gallery images will become sticky on page scroll.
    • Wide Gallery: In this layout, gallery images will display at the top of the page in full width.
  • Thumbnail Position: Select thumbnail position (this field is applicable only on “Product Page Style” is set to Classic or Sticky Gallery).
  • Sidebar: Select sidebar layout.
  • Page Width: Select page width
  • Tab Layout: Select product tab layout. It contains options as below:
    • Default: This will display tabs in the default format.
    • Default (Center Aligned): This is Default tab style, with tabs aligned in the center.
    • Left: This will display tabs on the left side (in vertical alignment) of tab contents.
    • Accordion: This will display tabs as an accordion.
  • Countdown Timer: Enabling this will display a countdown timer if the product scheduled for sale on a specific date.
  • Countdown Title: You can set a custom title for countdown title.
  • Sticky Title: Enabling this will set the title as sticky on page scroll.
  • Next/Previous Product Navigation: Display next/previous product navigation.
  • Show Share Buttons: Display share button.
  • Show Short Description: Display short description.
  • Show “Hot” Label: Display “Hot” label, if a product marked as “Featured.”
  • “Hot” Text: You can set custom text for “Hot” Label.
  • Show “Sale” Label: Display “Sale” label, if a product is on sale.
  • Label Type: Select label type for “Sale” label. It can set to “Text” or “Percent.”
  • “Sale” Text: You can set custom text for “Sale” Label if Label type set to “Text.”
  • Show Related Products: Show related products on the product page.
  • No. of Related Products per Page: Select the number of related products to display.
  • Show UP Sells: Show UP Sells products.
  • Number of UP Sells Products per Page: Select the number of UP Sells products to display.

Checkout

In this section, you can manage checkout page look and feel. There are three options available for checkout page layouts ex. Default, light spiral, and dark, each layout come with different looks and feel.

  • Checkout Layout: Select the checkout page layout here.
    • Default
    • Checkout
    • Dark

Quick View

In this section, you can control elements and part of product quick view.

  • Quick View: Enable product’s quick view. If this is enabled, by clicking “Quick View” button, it will display a popup with product details.
  • Product Name: Enable this to display product name in quick view popup.
  • Product link: Set product link on the product name
  • Product Categories: Enable this to display product categories in quick view popup.
  • Product Price: Enable this to display product price in quick view popup.
  • Product Star Rating: Enable this to display product star rating in quick view popup.
  • Product Short Description: Enable this to display product short description in quick view popup.
  • Product Add to Cart: Enable this to display product “Add to Cart” button in quick view popup.
  • Product Share Icon: Enable this to display product share icons in quick view popup.

My Account

In this section, you can manage content related to “My Account.”

  • Display Registration Text: Enable this to display registration information text.
  • Registration Text: You can manage registration information text in this field.

Promo Popup

In this section, you can control promotional popup settings and content. This section contains the below fields.

  • Enable Promo Popup: Enable this to display the promotional popup to users when they enter the site.
  • Promo Popup Text: This field contains promotional popup content. You can customize as per requirements.
  • Popup Background: You can set the background for promotional popup from here.
  • Hide for Mobile Devices: By this, you control to display promotional popup in mobile or not.

Faq Settings

In this section, you can control FAQ page settings. This section contains the below fields.

  • FAQ Layout: Select FAQ page layout. This contains the below options.
    • Layout 1: It’s a tabbed layout with multiple categories.
    • Layout 2: It’s accordion layout with a single category.
  • Layout 1 Fields:
    • Category Source: Select a source of categories, which do you want to display. If it’s set to “All”, it will display all categories as tabs.
    • Categories: Select categories. Selected categories will be displayed as the tabs. This field will be applicable if “Category Source” is set to “Selected”.
  • Layout 2 Fields:
    • Category: Select category to display entries from.

Social Profiles

In this section, you can control social profiles. Social Profiles is a repeater field which allows adding multiple social profiles. Click the “Add” button to add additional fields. It provides the ability to add predefined and custom social profiles. Below is the list of predefined social profiles. If you want to add a custom social profile, then select “Custom” in Social Profile field.

  • Facebook
  • Twitter
  • Google+ (Google+ Shutdown)
  • Dribbble
  • Vimeo
  • Pinterest
  • LinkedIn
  • Youtube
  • Instagram
  • Behance

Social Profiles contains fields as below:

  • Social Profile: Select social profile. If you want to add a custom social profile, then select “Custom.”
  • Link (URL): Enter social profile URL.
  • Title: Enter title for a custom social profile. (This field is applicable if “Social Profile” is set to “Custom.”)
  • Font Awesome Icon Class: Enter social profile icon class. This field uses Font Awesome to display icons. So, you can enter Font Awesome icon class. Details about Font Awesome class given below. (This field is applicable if “Social Profile” is set to “Custom.”)
    Here is the example of Font Awesome class:
    Font Awesome GitHub Icon Class: fa fa-github
    Font Awesome GitHub Icon Class to Enter: fa-github

Site Contacts

In this section, you can manage contacts information. This section contains the below fields:

  • Email: Enter email address.
  • Phone Number: Enter phone number.

Opening Hours

In this section, you can manage opening hours of your offline store.

Social Sharing

In this section, you can control social sharing services. Currently, section contains total twelve services:

  • Facebook
  • Twitter
  • Linkedin
  • Google+ (Google+ Shutdown)
  • Pinterest
  • GoogleBookmarks New
  • Reddit New
  • Tumblr New
  • StumbleUpon New
  • Digg New
  • VK New
  • XING New
  • Skype New

 

You can enable/disable any social sharing service as per your choice. Social sharing icons will appear on the blog page, blog post, WooCommerce product detail page, and product Quick View.

Note that social sharing icons on WooCommerce product detail page and product Quick View will appear only when social sharing is enabled in Theme Options » WooCommerce » Single Product and Theme Options » WooCommerce » Quick View.

Add Custom Sharing Services

It is possible that the above services are not sufficient, and you need a new service that is not included in the services mentioned above. In such a situation, you can add new service by adding custom code.

To do this, we provided a filter hook in the theme.
ciyashop_social_share_profiles

By using this filter hook, you can add custom function to add new sharing service to the existing list of sharing service. This filter accepts two arguments.

  1. social_share_profiles: Array of social share profiles.
  2. post: The Post object.

Here is an example code to add Blogger sharing service. Add this code to your child theme’s functions.php file or via a plugin that allows custom functions to be added, such as the Code Snippets plugin. Please don’t add custom code directly to your parent theme’s functions.php file as this will be wiped entirely when you update the theme.

/**
 * Custom currency and currency symbol
 */
add_filter( 'ciyashop_social_share_profiles', 'ciyashop_child_add_custom_share_option_blogger', 10, 2 );
function ciyashop_child_add_custom_share_option_blogger( $social_share_profiles, $post ) {
  $social_share_profiles['blogger'] = array(
    'class'     => 'blogger',
    'icon_class'=> 'fa fa-link',
    'link_base' => 'https://www.blogger.com/blog-this.g?u=%%url%%&n=%%title%%&t=%%text%%'
  );
  
  return $social_share_profiles;
}

If you see the code above, you will see that the link in the link_base parameter contains some values, which are wrapped with %%. These values are the post/page data, which you can use in your sharing link as per the requirements of the social service’s sharing link structure. Details of these values are provided below:

  1. %%url%%: Post link/URL.
  2. %%title%%: Post title.
  3. %%text%%: Post excerpt.

Typography

In this section, you can manage site-wide typography. This section contains an option to manage typography for body element and header elements (h1 to h6).

404 Page

In this section, you can control 404 error page content. This section contains two field sub-sections, “Page Title” and “Page Content,” and these subsections includes fields as below :

  • Page Title
    In this sub-section, you can manage 404-page title. It contains fields as below :

    • Enable Page Title: Enable/disable page title for 404 page. If this is disabled, below fields will not be applicable.
    • Page Title Source: Select page title source. “Default” option will display default title, and “Custom” option will display custom title from below “Page Title” field. Below “Page Title” field will be visible only if the option is set to “Custom.”
    • Page Title: Enter custom 404 page title.
  • Page Content
    In this sub-section, you can manage 404 page content. It contains fields as below:

    • Page Content Type: With this, you can choose which type of content you can to display. It contains two options, “Default” and “Page.” “Default” option provides a default content layout, which can be managed by below fields. And, with “Page” option, you can choose any page to display its content.
    • Content Title: Enter a content title.
    • Content Subitle: Enter a content subtitle.
    • Content Description: Enter content description.
    • Background: Set content background.
    • Content Padding: Set content padding.
    • Content Margin: Set Content margin.
    • Page: Select page to display page content as 404 content. This field will be applicable if “Page Content-Type” is set to “Page.”

Performance

This element will enable the lazy load for images in website. By enabling this option image will load on scroll of the page.

Note:  This option is the beta version.

This section provides setting fields as below:

  • Enable Lazyload (beta)? : Enable this option to show lazy load on all pages.

Maintenance

In this section, you can control “Maintenance” and “Coming Soon” pages. This section contains the below fields:

  • Enable Maintenance: With this, you can enable/disable Maintenance/Coming Soon page. All below fields are dependent on this fields. If this field is set to “No,” then no fields will be applicable/visible.
  • Maintenance Mode: Select mode, either “Maintenance” or “Coming Soon.”
  • Maintenance Fields: These fields are applicable if “Maintenance Mode” is set to “Maintenance.”
    • Maintenance Title: Enter title for Maintenance page.
    • Maintenance Subtitle: Enter subtitle for Maintenance page.
  • Coming Soon Fields: These fields are applicable if “Maintenance Mode” is set to “Coming Soon.”

    • Coming Soon Title: Enter title for “coming soon” page.
    • “Coming Soon” Subtitle: Enter subtitle for “coming soon” page.
    • Coming Soon Date: Select date for “coming soon” page.
  • Social Icons: Show/hide social icons on Maintenance/Coming Soon page.
  • Display Newsletter: Show/hide newsletter signup form on Maintenance/Coming Soon page.
  • Newsletter Form: Select newsletter form to display on Coming Soon/Maintenance Page. This field is applicable if “Display Newsletter” set to “On.”
    Note: Newsletter Form is dependent on “MailChimp for WP” plugin. This field will display dropdown only if the form is plugin is activated, linked with MailChimp and form created.

Custom CSS/JS

In this section, you can add custom CSS and JavaScript. It can be useful if you want to do any custom formatting with CSS or functionality with JavaScript.

MailChimp Settings

In this section, you have to provide “MailChimp API Key” and “MailChimp List ID” for newsletter shortcode.

VC Elements/Shortcodes

CiyaShop comes with bundled WPBakery Page Builder (formerly Visual Composer) and Massive Addons with lot of shortcodes.

Along with that CiyaShop contains various customized shortcodes for different needs. Here below you can find settings and details for them.

Address Block

This element allows inserting address block in content.

Param Name Description
Style Choose address block styles from Default, Border, and Flat.
Shape Select icon shape.
Icon Library Select icon library with visual composer you can easily add icons from following libraries:
– Font Awesome
– Open Iconic
– Typicons
– Entypo
– Linecons
– Mono Social
– Material
– Pixel
– Flaticons
Icon Select icon from the selected library.
Sub Contents This is repeater field where you can add multiple address sub contents, like Phone Number, Address, and Emails. It contains fields as below.
Title Enter title.
Enable Link Select this check box to enable link for sub-content title.
Content Link Select/enter a content link. This field would be visible only if Enable Link field checked.

Button

This element allows inserting the Button in content.

Param Name Description
Button Type Select Button type.

– Default
– Border
– Simple Link

Title and Link Set Button Link and title here.
Use google fonts ? Select this option if you want to use google fonts.
Border Shape Select Border Shape.

– Square
– Round
– Rounded

Button Width Select Button Width.

– Default
– Full

Button Size Select Button Size.

– Small
– Medium
– Large
– Extra large

Custom Color
Background Color Select Background Color.
Background Hover Color Select Background Hover color.
Text Color Select Text Color.
Text Hover Color Select Text Hover color.
Icon
Icon Enable icon.
Icon Position Select icon position.
Icon Library Select icon library with visual composer you can easily add icons from following libraries:

– Font Awesome
– Open Iconic
– Typicons
– Entypo
– Linecons
– Mono Social
– Material
– Pixel
– Flaticons

Icon Select icon from the selected library.

Callout

This element allows inserting Callout in content.

Param Name Description
Title Enter Callout Title.
Title Color Select Title color.
Title Element Tag Select title element tag.

– H2
– H3
– H4
– H5
– H6

Description Enter Description.
Button
Link Set Link for Button.
Button Type Select Button type.

– Default
– Border
– Simple Link

Background Color Select Background Color.
Background Hover Color Select Background Hover color.
Text Color Select Text Color.
Text Hover Color Select Text Hover color.
Icon Note : It will be displayed only if “Enable” is checked.
Icon Enable Icon.
Icon Source Select Icon Source.
– Font
– Image
Icon Source ( Font )
Icon Color Select Icon Color.
Icon Size Select Icon Size.
Icon Library Select Icon Library.

– Font Awesome
– Open Iconic
– Typicons
– Entypo
– Linecons
– Mono Social
– Material
– Pixel
– Flaticons

Icon Select Icon from library.
Icon Source ( Image )
Icon Image Upload/Select Icon Image.
Note: These fields only visible if Icon Source “Image” is Selected.

Category Box

This element allows inserting the Category Box in content.

Param Name Description
Title Enter title for category box.
Subtitle Enter subtitle for category box.
Categories Select categories to display on the front. If no categories selected, it will not show the Category box on front.
Display View All Links Select this check box to set the link for category box.
Link Set the link for category box.
Background
Background Image Set background image for category box.

Countdown

This element allows inserting the countdown in content.

Param Name Description
Countdown Date Select date for countdown.
Expire Message Enter a message to display, instead of date counter, when the deal is expired.
Countdown Style Select a countdown style. As you like.

Counter

This element allows inserting the Counter in content.

Param Name Description
Style Select Counter Style.
Icon Disable icon.
Counter Alignment select Counter Alignment.
Icon position Select icon position.
Note : It will be displayed only if “Style-4” is selected.
Content
Counter Title Enter Counter title.
Use google fonts ? Select this if you want use google fonts.
Title Color Select Title Color.
Counter Title Font Size Enter Counter Title Font Size between 14 to 50.
Counter Title Font Style Select Counter Title Font Style.

– Inherit
– Italic

Counter Title Font Weights Select Counter Title Font Weight.
Counter Title Text Transform Select Counter Title Text Transform.

– Inherit
– Lowercase
– Uppercase
– capitalize

Counter Number Enter Counter Number.
Counter Number Font Size Enter Counter Number Font Size between 14 to 50.
Counter Number Font Styles Select Counter Number Font Style.

– Inherit
– Italic

Counter Number Font Weights Select Counter Number Font Weight.
Number Color Select Number Color.
Counter Icon Background Select Icon Background/Border.
Note: These fields only visible if “Style-2” is Selected.
Counter Background Color Select Counter Background Color.
Note: These fields only visible if “Style-2” is Selected.
Icon Note : It will be displayed only if “Disable ?” is unchecked.
Icon Source Select Icon Source.
– Font
– Image
Icon Source ( Font )
Icon Color Select Icon Color.
Icon Size Select Icon Size.
Icon Library Select Icon Library.

– Font Awesome
– Open Iconic
– Typicons
– Entypo
– Linecons
– Mono Social
– Material
– Pixel
– Flaticons

Icon Select Icon from library.
Icon Source ( Image )
Icon Image Upload/Select Icon Image.
Note: These fields only visible if Icon Source “Image” is Selected.

Hotspot Image

This element allows inserting the Hotspot image in content.

Param Name Description
Image Source Select Image Source.

– Image
– External Link

Image Source ( Image )
HotSpot Image Select/Upload Image.
Image Source ( External Link )
HotSpot Image Link Please enter image external link.
Pointer Style Select Pointer Style.
Trigger Select Trigger(how it will display).

– Hover
– Click

Color Scheme Select Color scheme.

– Light
– Dark
– Theme

List Item Note : It is a repeater field where you can add multiple items. It contains fields as below.
Position Enter the Position.
Image Upload/Select image.
Title Enter the Title.
Content Enter the Content.
Link Set Link and Link title.
Direction Select Direction Position.

– Up
– Right
– Left
– Down

Hide Desktop it will not display in desktop if “Hide Desktop?” is Checked.
Hide Mobile it will not display in Mobile if “Hide Desktop?” is Checked.

Image Slider

This element allows inserting the image slider in content.

Param Name Description
Style Choose image slider style. There are two styles.
Slides
Enable Caption Select this check box to caption on slides.
Slides It is repeater field where you can add multiple slides. It contains fields as below.
Slide Image Select slide image.
Title Enter title.
Note:It will be displayed only if “Enable Caption” is selected.
Title Link ? Enable the link on the title.
Title URL (Link) Enter/select the link for the title.
Note:It will be displayed only if Title Link ? is selected.
Subtitle Enter subtitle.
Note:It will be displayed only if “Enable Caption” is selected.
On Click Action Select action when the image clicked.
Custom Link Add a custom link for the click event on slider image.
Note:This field will be applicable only when “Open Custom Link” selected it as “On Click Action.”
Slider Settings
Carousel size Enter image size. Ex: thumbnail, medium, large, full or other sizes defined by the current theme.
Show Pagination Control Select this check box to display pagination controls.
Show Prev/Next Buttons Select this check box to display prev/next buttons.
Infinity Loop Select this check box to enable infinity loop and display carousel in the circular loop.
Slides per view Enter the number of slides to display at the same time.
Slides Counts in Responsive View
Slides per view (<480px) Enter the number of slides to display for viewport size lower than 480px.
Slides per view (<768px) Enter the number of slides to display for viewport size lower than 768px.
Slides per view (<992px) Enter the number of slides to display for viewport size lower than 992px.
Slides per view (<1200px) Enter the number of slides to display for viewport size lower than 1200px.
Note: Count entered in “Slides per view” will be used for device width above 1200px.
Margin Enter margin-right(px) on item.

Info Box

This element allows inserting the information box in content.

– Default
– Flat
– Border

Param Name Description
Layout Select infobox layout style.
Content Alignment Select content alignment.
Note: This field is not visible for style-4 and style-5.
Icon Position Select icon position for the infobox.
Note: This field only visible if style-2 is selected.
Disable Icon Select this check box to disable the icon.
Content
Title Enter the content title.
Title Element Tag Select title tag.
Title Color Select the title color.
Description Enter description. Please ensure to add short content.
Step Note : This section not visible for style-1 layout.
Enable Step Select this check box to enable the step.
Step Select the step to be displayed.
Step Position Select the step positions.
Icon Note : This section only visible when disable icon is unchecked. Also, this section is not visible for style-4 and style-5.
Icon Style Select the icon style. There are three styles, and each style contains the specific fields.
Icon Style ( Flat )
Icon Shape Select icon shape.
Background Color Select icon background color.
Enable Outer Border Check this check box to enable outer border.
Icon Style ( Border )
Icon Shape Select icon shape.
Background Color Select icon background color.
Border Width Enter/select border width.
Border Style Select border style.
Enable Outer Border Check this check box to enable outer border.
Icon Size Select icon size.
Icon Source Select icon source.
Icon Source ( Font )
Icon Color Select icon color.
Icon Library Select font icon library.

– Font Awesome
– Open Iconic
– Typicons
– Entypo
– Linecons
– Mono Social
– Material
– Pixel
– Flaticons

Icon Select font icon.
Icon Source ( Image )
Icon Image Select the icon image.

Info Box 2

This element allows inserting the information box 2 in content.

Param Name Description
Layout Select infobox layout style.

– Default
– Flat
– Border

Content Alignment Select content alignment.
Note: This field is not visible for style-2.
Content
Title Enter the content title.
Add link to title? Enable this if you want to add link to title.
Link Select enter the link.
Title Element Tag Select title tag.

– H2
– H3
– H4
– H5
– H6

Title Color Select the title color.
Description Enter description. Please ensure to add short content.
Description Color Select Description Color.
Icon
Icon Style Select the icon style. There are three styles, and each style contains the specific fields.
Icon Size Select icon size.

– Extra Small
– Small
– Medium
– Large
– Extra Large

Disable Animation Select this if you want to disable the icon.
Icon Source Select icon source.

– Font
– Image
– External Link

Image Source ( Font )
Icon Color Select icon color.
Icon Shape Select icon shape.
Icon Library Select font icon library.

– Font Awesome
– Open Iconic
– Typicons
– Entypo
– Linecons
– Mono Social
– Material
– Pixel
– Flaticons

Icon Select font icon.
Image Source ( Image )
Icon Image Select the icon image.
Note: These fields only visible if Icon Source “Image” is Selected.
Image Source ( External Link )
Image Link Please enter image external link.
Background options Select background option.
Note: This section is visible for style-3.

– Border Color
– Background Color

Background Options ( Border Color )
Border Width Enter border width between 1 to 10 (px).
Border Color Select border color.
Border Hover Color Select border hover color color.
Background Options ( Background Color )
Title Hover Color Select title hove color.
Background Color Select background color.
Background Hover Color Select background hover color.
Background Image Select or upload Image for background.

Instagram

This element allows inserting the instagram images in content.

Param Name Description
List Type Select List type. There are two types, and each contains specific parameters.
Style Select instagram style.
Username Enter Instagram username or #hashtag to displayed result.
Show Title Select this check box to show image title.
Show Button Select this check box to display “Follow us” button.
Title Setting Note: This section only visible if “Show Title” checkbox checked.
Title Element Select title element.
Title Enter the title.
Button Setting Note: This section only visible if “Show Button” checkbox checked.
Button Text Enter the button text for “Follow Us” button.
Show Icon Select this check box to show Instagram icon with button.
Instagram items settings
Item Count Select the number of items to be displayed
Show Likes Select this check box to show likes count.
Show Comments Select this check box to show comments count.
Image Size Select image size.
Grid settings Note: This section only visible if list style selected to a grid
Grid Column (Extra large ≥1200px) Select grid columns for extra large devices.
Grid Column (Large ≥992px) Select grid columns for large devices.
Grid Column (Medium ≥768px) Select grid columns for medium devices.
Grid Column (Small ≥576px) Select grid columns for small devices.
Grid Column (Extra small <576px) Select grid columns for extra small devices.
Carousal settings. Note: This section only visible if list style selected to carousal
Show Pagination Select this check box to show carousel pagination navigation.
Show Left/Right Navigation Select this check box to show carousel left/right navigation.
Item Gapping Select gapping between carousel items.
Carousel Items(Extra large ≥1200px) Number of items to display in extra large devices.
Carousel Items(Large ≥992px) Number of items to display on large devices
Carousel Items(Medium ≥768px) A Number of items to display on extra medium devices.
Carousel Items(Small ≥576px) A number of items to display in small devices.

Kite Box

This element allows inserting the kite box in content.

Param Name Description
Images It is repeater field where you can add multiple items.
Note: You can add maximum up to 4 items. Select SQUARE image, with minimum 700px * 700px resolution. Otherwise, structure looks broken.
Image Select/upload the kite box image.
Title Enter the Title.
Enable Button Select this check box for enable button.
Button Text Enter the button text.
Note: This field is only visible if enable button checked.
Button Link Enter/select button link.
Note: This field is only visible if enable button checked.
Content It is repeater field where you can add multiple items.
Note: You can add maximum up to 3 items.
Title Enter the content title.
Description Enter the content description.

List

This element allows inserting list items with icons instead of bullets.

Param Name Description
Add Icon? Select this check box to add the icon to list items.
Icon Library Select icon library. With Visual Composer you can add icons from following libraries:
– Font Awesome
– Open Iconic
– Typicons
– Entypo
– Linecons
– Mono Social
– Material
– Pixel
– Flaticons
Icon Select icon from the selected library.
List Items It is repeater field where you can add multiple list item. It contains fields as below.
Content Enter content.
Content Link Enter/select content link.

Multi Tab Product Listing

This element allows to insert mutli tab product listing.

Param Name Description
Listing Type Select listing type.
Enable Intro Enable intro to display title and description (and tabs) on left side of listing.
Content Note : If “Intro” is enabled, title and subtitle will be displayed in “Intro” portion, otherwise it will be displayed at top.
Title Enter the intro title.
Title Color Select the title color.
Description Enter intro description.
Description Color Select description color.
Intro Design
Background Type Select intro background type. There are 3 types each contains specific fields
Background Type ( Color )
Background Color Select background color.
Background Type ( Image )
Background Image Upload intro background image.
Background Position Select intro background image position.
Background Repeat Select intro background image repeat.
Background Size Select intro background image size.
Overlay Color Select overlay color for background image.
Intro Content Alignment Select content alignment in Intro.
Tabs
Tabs Position Select tabs position.
Note: If ‘Intro’ is not enabled, Tab Position will be set as ‘Top’ by default.
Top Tabs Style Select tabs style, when Tabs are positioned at top.
Note: This field only visible if tab position set to top.
Top Tabs Alignment Select tabs alignment, when Tabs are positioned at top.
Note : This field only visible if tab position set to top.
Tabs Source Select tabs source.
Tabs Source (Categories) Select categories to display as tab.
Note: This field is visible if “Tabs Source” selected as categories.
Tabs Source (Product Types) Select product types to display as tabs.
Note: This field is visible if “Tabs Source” selected as product types.
Tabs Source (Product Types) Select product types to display as tabs.
Note: This field is visible if “Tabs Source” selected as product types.
Tab Link Color Note: Tab Link color will applied, If ‘Tab Position’ set as inro.
Tab Link Active Color Note: Tab link active color will applied, If ‘Tab Position’ set as inro.
Product
Number of item Enter the number of items to be displayed.
Grid Settings Note: This section only visible if List style set to Grid.
Grid Columns Select listing grid columns.
Carousal Settings Note: This section only visible if List style set to carousal.
Small Devices ( ≥576px ) Select number of items to display in small devices.
Medium Devices ( ≥768px ) Select number of items to display in medium devices.
Large Devices ( ≥992px ) Select number of items to display in large devices.
Extra Large Devices ( ≥1200px ) Select number of items to display in extra large devices.

Newsletter

This element allows inserting newsletter in content.

Param Name Description
Style Select the newsletter style.
Newsletter Designs Select the newsletter design style.
Note: This field is only visible if style-1 selected.
Title Enter the title.
Description Enter description. Please ensure to add short content.
MailChimp List Id Enter the List-id.
MailChimp API Key Enter the API key.
Content Alignment Select content alignment.
Note: This field is only visible if style-2 selected.
Content Background Select content background type. Select background types dark if you set the dark background for the newsletter and select background light when the background is light.
Note: using this field content text color will change.

Opening Hours

 
This element allows inserting opening hours time in content.

Param Name Description
Title Enter the Title for opening hours.
Note: To display the timing you have to add the time in theme options at “Appearance > Theme Options > Site Info > Opening Hours.”

Portfolio

This element allows inserting the portfolio in content.

Param Name Description
Style Select the portfolio style.
Portfolio Type Select portfolio type. There are three types.
– Isotope
– Carousel
– Grid
Number Of Portfolio Select the Number of portfolio to display.
Note:This option is only visible if portfolio type not set as Isotope
Categories Select categories to limit result from. To display result from all categories leave all categories unselected.
Note:This option is only visible if portfolio type set as Isotope
Portfolio Column Size This option to set items per view.
Space between Portfolio Select a space between portfolio.
Order By Select the option in which order portfolio display.
– Title
– Date
– Modified
– Id
Sort By Please select the sorting order for portfolio
Slider Settings Note:This section is only visible if portfolio type set as carousel.
Extra large ≥1200px Select items per view for extra large device.
Large ≥992px Select items per view for large device.
Medium ≥768px Select items per view for medium device.
Small ≥576px Select items per view for small device.

Product Deal

This element allows inserting product deal in content. Product deal contains the product which are in sales.

Param Name Description
Product Select product to be displayed. This product comes from the product in sales.
Note : If the Start Date is greater than the Current Date, or the End Date is less than the current date, the selected items will not be shown on the front. Also, if the Sale Price is not entered, it will not be shown.
Deal Details
Expire Message Enter a message to display, instead of date counter, when the deal is expired.
Counter Size Select deal counter size.

Product Deals

This element allows inserting multiple product deals in content. Product deal contains the product which are in sales.

Param Name Description
Enable Intro Content Enable intro content to display title and description.
Title Add intro title.
Note : This fields only visible if Enable Intro Content is selected.
Title Color Select title color.
Note: This fields only visible if Enable Intro Content is selected.
Description Add intro description.
Note: This fields only visible if Enable Intro Content is selected.
Description Color Select description color.
Note: This fields only visible if Enable Intro Content is selected.
Product Count Enter number product to display.
Product Categories Select categories to limit result. To display result from all categories, leave all categories unselected.
Enable Link Enable this to display a link in Intro Content.
Note: This fields only visible if Enable Intro Content is selected.
Intro Design Note: This section only visible if Enable Intro Content is selected.
Intro Position Select intro position.
Background Type Select intro background type. There three options each contains specific fields.
Background Type ( Color )
Background Color Select background color.
Background Type ( Image )
Background Image Upload intro background image.
Background Position Select intro background image position.
Background Repeat Select intro background image repeat.
Background Size Select intro background image size.
Overlay Color Select overlay color for the background image.
Intro Link Note: This section only visible if Enable Link is selected.
Link Title Enter the link title.
Link Add link. For email use mailto:your.email@example.com.
Link Color Select link color.
Link Position Select link position.
Link Alignment Select “Link Position” with “Carousel Controls.”
Note: This field only visible if link alignment set with carousal controls.
Deal Details
Expire message Enter a message to display, instead of date counter, when the deal is expired.

 

Product Showcase

This element allows inserting product showcase in content.

Param Name Description
Title Enter the title for Product Showcase.
Title Element Tag Select title element tag for title.
Product Type Select type of product to display in the slider.

– Featured Product
– Recently Viewed Product
– Product In Sale
– Top Rated Product

Number of item Enter the number of products to display in the slider.

Products Listing

This element allows inserting product listing in content.

Param Name Description
Listing Type Select listing type.
Enable Intro Enable intro to display title and description (and tabs) on the left side of the listing.
Content Note: If “Intro” is enabled, title and subtitle will display in “Intro” portion. Otherwise, it will display at the top.
Title Enter intro title.
Title Color Select title color.
Note: This field only visible if “Enable Intro” is checked.
Description Enter intro description.
Description Color Select description color.
Note: This field only visible if “Enable Intro” is checked.
Enable Intro Link Enable this to display a link in Intro Content.
Note: This field only visible if “Enable Intro” is checked.
Intro Link Note: This section only visible if “Enable Intro Link” is checked.
Link Title Enter the link title.
Link Add link. For email use mailto:your.email@example.com.
Link Color Select link color.
Link Position Select link position.
Note: It is applicable only when “Listing Type” is set to “Carousel.” If “Listing Type” is set to grid, this will be set as “Below Description” by default.
Link Alignment Select link alignment with carousel controls.
Note: It is applicable only when “Link Position” is set with carousal controls.
Intro Design Note: This section only visible if “Enable Intro” is checked.
Intro Position Select intro position.
Intro Content Alignment Select content alignment in Intro.
Background Type Select intro background type.
Background Type ( Color )
Background Color Select background color.
Background Type ( Image )
Background Position Select intro background image position.
Background Repeat Select intro background image repeat.
Background Size Select intro background image size.
Overlay Color Select overlay color for the background image.
Background Image Upload intro background image
Products
Description Enter intro description.
Product Source Select product source.

– Product type
– Category

Product Source (Product Type) Select product type to display products.
Note: This field only visible if Product source set to product type.- Newest- Featured
– Best Sellers
– On sale
– Cheapest
Product Source (Category) Select category to display products.
Note: This field only visible if Product source set to Category.
Carousal Settings Note: This setting will be visible if listing type set to carousal
Small Devices ( ≥576px ) Select number of items to display at a time in small devices.
Medium Devices ( ≥768px ) Select number of items to display at a time in medium devices.
Large Devices ( ≥992px ) Select number of items to display at a time in large devices.
Extra Large Devices ( ≥1200px ) Select number of items to display at a time in extra large devices.
Grid Settings Note: This setting will be visible if listing type set to grid
Grid Columns No. of listing grid columns.

Recent Posts

This element allows inserting recently added post in the content.

Param Name Description
Style Select the recent post style.
List Type Select list type

– grid
– carousal

Enable Intro Enable intro to display title and description (and tabs) on left side of the listing.
Note: This field is only visible if style-1 selected.
Content Note: This section only visible if Enable Intro checked.
Title Add intro title.
Title Color Select title color.
Description Add intro description.
Description Color Select description color.
Enable Intro Link Enable this to display a link in Intro Content.
Into link
Link Title Enter the link title.
Link Add link. For email use mailto: your.email@example.com.
Link Color Select link color.
Link Position Select link position.
Note: It is applicable only when “Listing Type” is set to “Carousel.” If “Listing Type” is set to grid, this will be set as “Below Description” by default.
Link Alignment Select link alignment with carousel controls.
Note: This field is only visible if link position set with carousal controls.
Intro Design
Intro Position Select intro position.
Intro Content Alignment Select content alignment in Intro.
Background Type Select intro background type.

– Color
– Image
– None

Background Type (Image)
Background Position Select intro background image position.
Background Repeat Select intro background image repeat.
Background Size Select intro background image size.
Overlay Color Select overlay color for the background image.
Background Image Upload intro background image.
Background Type (Color)
Background Color Select background color.
Grid setting Note: This section only visible if list type selected to the grid
Grid Columns – Extra large Devices ( ≥ 1200px) Select grid columns in extra large devices width ≥1200px.
Slider setting Note: This section only visible if list type selected to carousal.
Extra large ≥ 1200px Select items per view for extra large devices.
Large ≥ 992px Select items per view for large devices.
Medium ≥ 768px Select items per view for medium devices.
Small ≥ 576px Select items per view for small devices.
Margin Enter margin, in pixels (px), between each item.
Posts
Count Enter a number of posts to display.
Categories Select categories to limit result. To display result from all categories leave all categories unselected.

Single Product Slider

This element allows inserting single product slider in content.

Param Name Description
Style Select product slider style.
Title Enter title.
Note: This field is not visible if style-2 selected.
Content Enter the product slider content.
Note : This field is not visible if style-2 selected.
Select category Select category to display product from.
Product Type Select product type. The type of product you want to display on front page.

– Newest
– Featured
– Best seller
– On sale
– Cheapest

Number of Item Enter the number of items to display on the front.

Social Icons

This element allows inserting social icons in content.

Param Name Description
Style Select icon style.
Shape Select icon shape.
Size Select icon display size.
Hover Style Select icon hover style.
Social Profile It is repeater field where you can add multiple items. It contains fields as below.
Profile Link Set icon link.
Icon Select social icon from the library.

Team Members

 
This element allows inserting team members slider in content.

Param Name Description
Style Select team member style.
Count Enter the number of members to display.
Categories Select categories to limit result. To display result from all categories leave all categories unselected.
Slider Settings
Show Pagination Control Select this check box to display pagination controls.
Show Prev/Next Buttons Select this check box to display prev/next buttons.

 

Testimonials

This element allows inserting testimonial slider in content.

Param Name Description
Style Select style for testimonials.
Show Title Select this check box to display title.
Note: This field visible for style-2 only.
Carousal Settings Note: This section only visible if style-2 or style-3 selected.
Carousal speed Enter carousel speed in milliseconds.
Post Settings
Count Enter the number of testimonial items to display.
Categories Select categories to limit result. To display result from all categories leave all categories unselected.

Vertical Menu

This element allows inserting vertical menu in content.

Param Name Description
Title Enter the title.
To Display the vertical menu on the front, you have to add the menu in Appearance > Menus and have to select the checkbox “Shortcode – Vertical Menu” in Appearance > Menus > Menu Settings.

Installing WooCommerce

General Settings

Products Settings

Tax Settings

Tax Rate Example

Shipping Zones

Flat Rate

Free Shipping

Local Pickup

Shipping Options

Shipping Classes

Checkout Settings

BACS

Check Payments

Cash On Delivery

PayPal Standard

Accounts Settings

Emails Settings

API Settings

Product Categories, Tags, & Attributes

Simple Product Overview

Grouped Product Overview

External/Affiliate Product Overview

Variable Product Overview

Downloadable Product Overview

Coupons

Widgets

Shortcodes

Managing Orders

Refunding Orders

Reporting

System Status

Retina Display

The basic concept of a Retina image is that an image twice the size of a standard web image will display on the screen. On a non-retina device an image will be 100px X 100px whereas a Retina device will display the same image but at 200px X 200px. Most of the devices use this branded concept for Retina devices like having approximately twice the pixel density of a non-retina device.

If you want to get perfect looking images on Retina screens, for example, you build a website where you upload regular images into Content; then you must always upload two images in Media
Add new section which looks like below:

my_image.png - this is the name for standard image (e.g. 100px X 100px)
my_image@2x.png - this is the example name for retina image and file must be always 2x larger than regular image (e.g. 200px X 200px)

Note You need to include retina.js to make your website completely retina ready. See example below:

<!-- retina -->
<script type="text/javascript" src="js/retina.js"></script>

For more information about retina documentation and to download retina.js click here.

Browser Support

CiyaShop supports latest two versions of all major browsers like Chrome, Firefox, Safari, Opera, Internet Explorer 11 and Edge.

How to rate this item

If you like our theme and support, Please do not forget to rate it with five stars in your Downloads section and write a review in Comments as it will add more value to our services!

Kindly visit here: http://themeforest.net/downloads and find “Rate this item” below the download button and rate out the theme.

Advance Thanks in Anticipation!

Speed Optimization

 

The two factors involved in reducing load time of site are as below:

1. Limiting the scripts to minimum number of files as possible.

WordPress sites are especially susceptible to loading many scripts upon page load. This is because plugins and themes generally have their own scripts that need to be loaded in order to function. In some websites, developers would manually combine them to reduce the overhead upon page load.

2. Deferring the loading of “non-critical” scripts.

It includes moving scripts to the bottom of the page. When a browser is loading your page, it typically loads things in parallel until it encounters a script. And while working on a script browser load only scripts nothing else. Once the script is loaded, the website can continue rendering everything else. You can see how, especially if you have many scripts, this can affect your page load time.

Steps to Resolve the “Render-blocking JavaScript and CSS” PageSpeed Error:

Step 1. Resolve any render-blocking plugin scripts by adjusting plugin settings, if possible.

Google PageSpeed help you to determine which render-blocking scripts coming from a plugin you need to adjust. If you are able to identify any plugins from the list of scripts, go to each plugin’s settings, one by one, and search for a setting that will defer the JavaScript or load it asynchronously. If you are unable to identify any plugins from the list of scripts, or if you do not have any of these plugin settings available to you, continue on to step 2.

Revolution Slider settings :

Do the following :

1. Revolution Slider “Global Settings”:
– Include RevSlider libraries globally: ON.
– Insert JavaScript Into Footer: ON
– Defer JavaScript Loading: OFF.

2. After changing individual plugin settings, clear your cache and test properly.

3. Check PageSpeed insights. Making these changes to Slider Revolution helped reduce the number of render-blocking scripts your site had, but you still need help from other plugins to clean up everything else.

 

Step 2. Resolve the CSS file from render-blocking

Install the “Autoptimize” plugin and check the following settings:

    • Enable Optimize HTML code
    • Enable Optimize JavaScript code
    • Enable Optimize CSS Code
      • “Inline and Defer CSS”

These options help you to place “above the fold” CSS in the header so it is loaded first before loading the rest of the CSS script. This allows the above-the-fold content styling to load first so it will be rendered as quickly as possible for the visitor.

Following guide will help you to enable these options.

I. IDENTIFY All of Your Site’s CSS.

A.) Open Autoptimze (Settings –> Autoptimze), and tick the “Inline All CSS?, Remove Google Fonts? and Also aggregate inline CSS?” option (click all images below for a larger view):

B.) Then, click “Save Settings and Empty Cache” at the bottom of your Autoptimize dashboard.

C.) In another browser tab with an empty cache, open your homepage’s source code (right click –> open source).

D.) Your HTML will (likely) be huge now. Copy everything between the <style type=”text/css” media=”all”> and ending </style> tags.

II. EXTRACT the Critical CSS.

A.) Open this Critical Path CSS Generator and enter your site’s homepage URL into the field under #1 (“URL”).

B.) Paste the code you copied from your source into the field under #2 (Full CSS).

C.) Click the ‘Create Critical Path CSS’ button, and you’ll get something like:

D.) Copy the generated CSS code.

III. APPLY Critical CSS.

A.) Go back into Autoptimize, and tick the “Inline and Defer CSS?” option.

B.) Enter the code you copied from the Critical Path CSS Generator into the field under the Inline and Defer CSS option box. Like:

C.) Click “Save settings and Empty Cache” at the bottom of your Autoptimize dashboard.

And that’s it! You’re good to go.

WooCommerce / Shop integration

This theme is fully compatible with the WooCommerce plugin. We carefully designed this theme in such a way that you can build a beautiful shop that load with options, and one that is perfect in appearance.

Since WooCommerce is an external plugin, all information will found on the WooCommerce’s site. Here are several useful WooCommerce links:

How to Install WooCommerce and Setup Default Shop Pages

WooCommerce can installed with two methods. The first method is to install the plugin(s) with theme required/recommended plugins. For this, go to Admin Panel > Appearance > Install Plugins. Then, select “WooCommerce” (you can choose other plugins too from the list) and install. You can activate installed, but not activated, plugins from here too. The second method is below.

  • Go to Admin Panel > Plugins > Add new, and enter “WooCommerce” in the search field and hit enter.
  • Once the result loaded, you will find the WooCommerce plugin in the list. Click on the “Install now” button next to “WooCommerce” plugin.
  • Once “WooCommerce” installed, click on the “Activate” button.
  • After activation, it will display WooCommerce Setup Wizard.

After successful installation and activation, it will proceed with the setup wizard, where you can configure various basic required settings for the shop. For more information check the WooCommerce documentation and below the video.

Theme Translation

CiyaShop is entirely multi-language. It means you can translate the site into any one or multiple languages.

There are various options to translate the site. You can do it by either editing .po file, or by using plugins.

Poedit

Translation with Poedit is a .po file editing translation method.

This app provides the easy method to create new translations for any language, edit existing translations, synchronize strings and also generate the .mo file.

To edit .po file, follow the below steps:

  1. Open Poedit
  2. Choose “New from Po/POT file.
  3. Select the pot file from wp-content/themes/ciyashop/languages/ciyashop.pot.
  4. Select the new language you want to translate. Choose the country, (e.g., French) if you want the language in general, or if you want the more exact, select French (France) or French (Madagascar) to consider local dialects.
  5. Save the file with your language name, prefixed with the theme name, like “ciyashop-fr_FR.po” for “French (France)” or “ciyashop-fr_MG.po” for “French (Madagascar)“. It will generate both a .po and .mo files for your translation.
  6. Place these files into the wp-content/languages/themes/ folder.

How to Update Translated Language File

When a theme is updated, and text strings are updated in the language files, then you can update your language translation file to sync with latest changes. For this follow below steps.

  1. Open Poedit.
  2. Open translated .po file of your desired language in POEdit.
  3. Select Catalogue > “Update from POT file’ in top menu.
  4. In the opening file dialog, choose the ciyashop.pot file from wp-content/themes/ciyashop/languages folder. The catalogue will then be auto updated with all the new text strings, and your custom ones will be preserved.
  5. Save the file after updating and adding translations.

Loco Translate

Loco Translate is the in-browser translation file editing method.

To start translation follow the below steps.

  1. Install Loco Translate plugin.
  2. Go to Loco Translate > Themes and select “CiyaShop.”
  3. Click on “New Language” link.
  4. Choose a language in “Choose a language” field, and choose “languages/loco/themes/click-shop-<locale>.po” in “Choose a location” field.
  5. Translate strings and click on “Save” button to save the translations.

For more information check below links.
https://localise.biz/wordpress/plugin/manual
https://localise.biz/wordpress/plugin/beginners

WPML

WPML is an in-browser multi-lingual translation plugin. It provides facility to translate WordPress, Themes, and Plugins strings and add contents in multi-language.

WPML is a commercial plugin. So, you need to purchase a copy of WPML, with below modules, to start the translation.

  1. WPML String Translation
  2. WPML Translation Management
  3. Advanced Custom Fields Multilingual (ACFML)

Check below video for WPML setup.

For further settings, after WPML plugins installation, Check “Getting Started Guide.”
For more information and settings, see WPML Documentation.

Plugins Documentation

CiyaShop is compatible with the below plugins. These plugins will add support for various features.

WPBakery Page Builder (formerly Visual Composer)

WPBakery Page Builder is a page builder plugin for WordPress which allows you to create stunning website content with simple drag and drop. With WPBakery Page Builder you can create and manage your WordPress content in minutes.

Here are few links for more information.
Documentation
Help Center
Video Tutorials Academy

Advanced Custom Fields

Advanced Custom Fields is a WordPress plugin which allows you to add extra content fields to your WordPress edit screens. These extra content fields are more commonly referred to as Custom Fields and can allow you to build website’s faster.

You can find guide and information about how to work with fields on ACF Documentation.

Due to safety reasons, ACF Admin Panel is disabled in WordPress Admin. To enable it, add this code in wp-config.php.

<?php
define('ACF_DEV', true);
?>

Max Mega Menu

CiyaShop is compatible with Max Mega Menu, to create the mega menu. See below video or this documentation for more information.

WooCommerce

WooCommerce is a free eCommerce plugin that allows you to sell anything, beautifully. Built to integrate seamlessly with WordPress, WooCommerce is the world’s favorite eCommerce solution that gives both store owners and developers complete control.

Here are few links for more information.
Documentation
Video Tutorials

YITH WooCommerce Compare

YITH WooCommerce Compare plugin is an extension of WooCommerce plugin that allow your users to compare some products of your shop.

Here are few links for more information.
Documentation

YITH WooCommerce Wishlist

YITH WooCommerce Wishlist offer visitors a chance to add the products of your woocommerce store to a wishlist page. With YITH WooCommerce Wishlist you can add a link in each product detail page, in order to add the products to the wishlist page.

Here are few links for more information.
Documentation

Dokan Multivendor Marketplace

WC Marketplace

Instagram Shop by Snapppt

Snapppt is a free Instagram shop plugin that turns your Instagram images into picture perfect shoppable links.

Here are few links for more information.
Instagram Shop by Snapppt
Snapppt – Get-started guide
Snapppt – WooCommerce & WordPress
Snapppt – Embed options and guides

Header Builder

CiyaShop comes with six predefined header styles with different settings and options, by using them in combination, you can make a beautiful header.

In the process of our product improvement, we built a header-builder in theme. Header builder is an intuitive drag and drop header editor. With the help of header builder, you can create customized, eye-catching and impressive unlimited headers with the infinite number of styles by just drag and drop.

Header builder also provides facility to create customized and responsive headers for mobile devices too, which give a great user experience on all devices and platforms. Header builder provides better and precise control over header elements. You can use a component at different locations, like Top Bar, Main Header or in the Header Bottom, and you can set individual properties for each.

Header builder comes with six predefined styles, which you can import while creating a new header, and then you can customize it as per your requirements.

 

Enable Header Builder in Theme Options

By default, the theme will display predefined header styles. You can display custom header by enabling it by selecting “Header Builder” in Theme Options > Header > Site Header > “Select header type” field. Enabling custom header will enable another field, named “Select Custom Header”, next to “Select header type” field, in which you can choose custom header built in Header Builder section.

 

Header Builder Sections

A header consists of three sections:
1. Top Bar: As the name suggests, it’s the top area of the header.
2. Main Header: As the name suggests, it’s the main area of the header.
3. Header Bottom: As the name suggests, this row is located at the bottom of the header.

 

Header Builder Components

Header builder comes with the below components:

  1. Account: Add a login and register links and form.
  2. Button: Create buttons with various styles and options.
  3. Cart: Add WooCommerce Cart icon.
  4. Compare: Add WooCommerce Compare icon.
  5. Currency: Add WooCommerce currency switcher dropdown.
  6. Divider: Add a separator to divide the header content.
  7. Email: Add email address.
  8. Static Block: Select and add a Static Block content.
  9. Language: Add language switcher/selector dropdown.
  10. Logo: Add a logo in the header. Settings to customize the logo options are available in the theme options.
  11. Menu: Add any existing WordPress menus to the header.
  12. Phone Number: Add a phone number to the header.
  13. Primary Menu: Add menu assigned in the Primary menu location.
  14. Search: Add a WordPress search form.
  15. Social Profile: Add social profile links to the header. Social profiles can be managed from Theme Options.
  16. Space: Add horizontal space between two elements.
  17. Text Block: Add text/HTML content with WYSIWYG editor.
  18. Wishlist: Add WooCommerce Wishlist icon.

 

Custom Sidebar Widget

This element allows you to create custom sidebar, Which you can use in any page. To add the sidebar in particular page go to Pages -> Custom Sidebar.

Mega Menu

CiyaShop boosts default functionality of WordPress menu to adding mega menu in the theme, So it is more comfortable and smooth. Create a menu from Appearance > Menus and drag and drop post, page, category or anything which you need in the menu. Mega menu is enabled only on the primary menu. Click on “Enable Mega Menu” from CS Mega Menu.

When you hover on the menu item, You will see “Menu Setting” option.

Menu Setting comes with the below options:

  1. Link Anchor : Link where you want to navigate.
  2. Menu Color Scheme : Select color scheme Dark or Light.
  3. Design Type : Select Design type Dropdown or Mega menu.
  4. Open Submenu On Click : Open sub menu.
  5. Enable Menu Link : Open menu link. It will appear when “Open Submenu On Click” option selected.
  6. Select Icon : Select Icon for Menu.
  7. Label : Menu item label.
  8. Label Color : Menu item label color.
  9. Background Image : Select background image for mega menu.
  10. Background Repeat : Select Background image repeat type.
  11. Background Size : Select Background image size.
  12. Background Position : Select Background image position.



Changelog

You can see the detail about the changelog here.

https://ciyashop.potenzaglobalsolutions.com/change-logs/

Source & Credits

All images and videos are for preview purposes only and not included in the download files. Images are of copyrights under Creative Commons CC0.

Images

Scripts

CSS & Fonts

Note For questions on basic WordPress, HTML, Javascript or CSS editing – please give your question a quick Google or visit W3Schools as theme issues get top priority.

Suggest Edit