City Store Pro Documentation

Introduction

Welcome To City Store Pro !

We would like to thank you for purchasing City Store Pro, responsive Woocommerce

WordPress theme for your website. It is the premium version of City Store . Before you

get started, please invest sometime to go through the documentation. City Store Pro

can only be used with WordPress and we assume that you already have WordPress

installed and ready to go.

Installation

● Manage your theme

To install this theme you must have a working version of WordPress

already installed. For information in regard to installing the WordPress

platform, please see the WordPress Codex article on installation.

● Installation

The theme files can be uploaded in two ways:

● FTP Upload: Using your FTP program, upload the unzipped theme

folder into the /wp-content/themes*/ folder on your server.

● WordPress Upload: Navigate to Appearance > Add New Themes >

Upload. Go to browse, and select the zipped theme folder. Hit

“Install Now” and the theme will be uploaded and installed.

● Once the theme is uploaded, you need to activate it. Go to

Appearance> Themes and activate your chosen theme.

* It is very important you upload only the theme files, not the entire

package of City Store Pro. After downloading the Theme Files, please

make sure you unpackage/unzip the full download to reveal the

compressed directory of just theme files.

Installing required and recommended plugins

After Installing and activating the theme you will see the following message at the top of

the admin dashboard page. This theme requires few following plugins. Click, begin

installing plugins link which will redirect to Install Required Plugins page.

Bulk install required and recommended plugins

You can install or update the required and recommended plugins at once just by clicking

on “Begin Installing Plugins”.

● Required plugin

Jetpack: City Store Pro requires “Jetpack” plugin to function properly.

Post types like testimonial come into action only after the activation of

this plugin.

WooCommerce: The next required plugin is “WooCommerce” which is

the must if for creating Online Shops.

● Recommended plugin

Contact Form 7: City Store Pro recommends contact form 7 plugin for

contact form on your site.

YITH Woocommerce Wishlist: City Store Pro recommends contact form 7

plugin for contact form on your site.

Set up your website

Before building your site you need to configure WordPress and the plugins. Please read

carefully Theme Installation/Plugin Configuration.

WordPress Configuration

You can adjust WordPress settings as follows:

1. You can set Site Title in Settings > General.

2. You can set Blog pages show at most in Settings > Reading.

3. You can select Front Page and Posts Page in Settings > Reading.

4. You can set Discussion settings in Settings > Discussion.

5. You can change image sizes in Settings > Media.

6. You should ensure that a non-default permalink setting is selected, e.g. Post name in

Settings > Permalinks.

Setup Home Page as Demo site :

To make your site’s homepage look like exactly like our demo,

Step 1 : Goto Page, Click on Add New.

Step 2 : Enter the title (example : “Homepage”). On right sidebar there you can find Page

Attributes , On Template please Select on Homepage – Template.

Step 3 : Click on Publish and continue other steps described below.

Now You need to configure homepage as the default page so please go to settings >

readings. Choose “A static page” and choose “homepage” as frontpage. If you want to

show blog posts then create a page called “blog” and assign it to the blog page.

Customizing the homepage as the demo image

After Successful creation of the page, Click on View Page Located at the top bar.

Now you may have the homepage as below screenshot. If not, don’t worry there may be

other setting to configure . You can surely find in the documentation.

If the homepage is missing some sections like feature product section , social section , footer

sections then they needs to be configure through the customizer setting which is described

below one by one . Please go through the documentation.

How to set up frontpage as shown in demo?

To make your site’s homepage look like exactly like our demo,

Step 1 : Goto Page , Click on Add New.

Step 2 : Enter the title (example : “Homepage”).On right sidebar there you can find Page

Attributes , On Template please Select on Homepage – Template.

Step 3 : Click on Publish and continue other steps described below.

Customizing the homepage as the demo image

After Successful creation of the page, Click on View Page Located at the top bar.

Now you may have the homepage as below screenshot. If not don’t worry there may be

other setting to configure . You can surely find in the documentation.

Now You need to configure homepage as the default page so please go to settings >

readings. Choose “A static page” and choose “homepage” as frontpage. If you want to show

blog posts then create a page called “blog” and assign it to the blog page.

The demo of the front page can be further divided into following sections. You should

navigate into Appearance > Customizer > Theme Options and find the similar settings for

the sections listed below.

5.1 Theme Options

Theme options is the essential option for the theme. It generally contains

the homepage all settings.

Theme options contains 11 settings for the homepage which need to be

adjust in order to make as demo website. Below are the explanation one

by one .

The screenshot for theme options :

5.1.1

Slider Options :

For Slider option First go to the backend and Create a page.

Step 1 : wp-admin/pages/add-new page.

Step 2 : Insert the Fields shown below in order to make the change.

Fields are : Title , Banners Details , Feature Images.

Goto Customizer > Theme Options > Slider Option > Select Page Slider 1. Now You Can find

respective image. Follow same procedure for other sliders also.

5.1.2 Top Call Out Options

For Top Call Out Section there are two options available . Either you can

choose woocommerce default product category or custom call outs. Let's have

some clarifications.

It consists of three images with title and links . So first click on Top call out

sections . You can find there two options

● Display Product Categories

● Display Custom Callouts

1. Display Products Category :

Display Products Category is for the woocommerce products category which supports

category image too. For creating woocommerce products . Goto backend and follow the

steps.

Step 1 : On left sidebar you can find Products and Click on Categories. Step 2 : Enter the name , insert image and click on Add new Category . Category Should have some products in order to show on top call outs . Therefore add

or edit the products that is related with the category . Edit a product . Step 3 : On right side you can find Product Categories . click on the respective category

and click on update.

Step 4 : Now goto backend and click on apperance>customizer>Theme Options>Top

Call Out Options . Step 5 : Enable the section . Choose Display Product Categories . Now Choose All the

category you created , and click on save & publish .

If you don’t want to show the product category then you can choose Display Custom 

Callouts between  

● Display Product Categories &

● Display Custom Callouts

Step 6 : After choosing the field display custom callouts , there you can find title , subtitle, image , button and button uri and view the change live.

5.1.3 Call To Action Options

Steps : Click on show call to action and enter the details as shown above . And finally

click on save to view the change .

5.1.4 Feature Products / Mid Section Options

Steps : Click on show feature products on homepage , fill the title sections and no of

images/products to show and click on save & publish to view the change.

5.1.5 Bottom Call Out Options

Steps : Click on show bottom call out in homepage , fill the Title, Description, Link and Icon to

show and click on save & publish to view the change. As Shown in red box.

5.1.6 Quick Product

Step 1 : Click on show Product Listing in homepage , the available categories are all the

category from woocommerce category with products.

Step 2 : Click on the categories to display the respectice category products. You Can Only

Choose maximum 4 categories . Please press ctrl while selecting the categories, and click on

save & publish to view the change.

5.1.7 Testimonial Section

Testimonial is generated from the jetpack plugin so you must need to activate it to use.

Steps : Click on Show testimonial section in homepage ?, Select no of post to show as well as

background image , an if there were no any background image then there is also another option

for background colour. Select the appropriate color and click on save & publish to view the

change.

5.1.7 Blog Section :

Steps : Click on Show blog in homepage ?, Enter the title and Subtitle. Show Meta options if enabled then the red box with category, author name and date is shown in hover. Finally click

on save & publish to view the change.

5.1.8 Social Section :

Steps : Click on Show Social icons ? Enter the links/url of respective social sites. Title is appear

from the customizer>site identity>site title Finally click on save & publish to view the change.

5.1.9 Footer Widget Section :

Steps : For Footer widgets , go to homepage customize>widgets. You can find 5 widgets footer

1 to 5. For Demo select the widget first ( Footer widget 1). After it, click on Add a Widget . Search the appropriate widget , may be Text, Recent Posts ,Custom Menu etc. and finally click

on save & publish.

Another Steps to add a widget.

Step 1 : Goto backend. Click on Appearance>Widgets.

Step 2 : Select available widgets and assign to the respective widgets. After Selection click on save and view the homepage for the change.

5.1.10 Footer Copyright / Footer Options :

Steps : Click on Show pre-footer section in homepage ?, Enter the Foote text, Developed by Text

and Developed By Link. Finally click on save & publish to view the change.

Manage site title, logo and site icon

Goto homepage>customize>Site Identity.

Logo: It changes the main logo of the site.

Site Title: It changes the main site title of the site.

Tagline: It changes the tagline (i.e. Description) of the site.Just below site title.

Site Icon: The Site Icon is used as a browser and app icon for your site.Icon must be square, and

at least 512px wide and tall.

Set your site’s title, description and add logo by navigating to Customizer > Site Identity.

How to add header image for inner pages?

This section allows you to add different header images for other pages.

Navigate to Customize > Header Image.

In Header Image Options you can add new image in the Header section by clicking Add new

image.

Menu setup

If you are new to WordPress, please visit WordPress Menu User Guide

There are two predefined theme menu locations in City Store Pro Theme

● Main menu

● Footer menu.

8.1 Create menu

1. Go to Appearance > Customize >Menus.

2. From Menus, click “Add a Menu” button and you will be able to create a

menu.

3. Now, click Add Items and you will be able to Add or Remove Menu Items

according to your requirement.

4. Select the Menu locations.

5. Click Save and publish button.

8.2 Change menu locations

● Go to Appearance > Customize> Menus > Menu Locations

● Select the menu for Main Menu. Main menu appears as the chief menu in

header section.

● Select the menu for Top Menu. It appears on the top right corner of the

theme.

● Select the menu for Footer Menu. Footer menu appears on the footer

section.

● Click Save and publish

How to manage background image?

This section allows you to add background images for website.

● Navigate to Customize > Background Image

● Select the image for Background available on media library or upload from the

other location.

● Click Save & Publish

How to change theme’s color?

Colors option lets you choose header text color, background color, theme color and

main nav color.

● Header text color changes color of site title.

● Background color changes the background of site.

● Theme color changes color of the theme

● Main nav color changes the color of main navigation

How to setup sidebar?

City Store Pro comes with five custom sidebar widgets for pre-footer area,

woocommerce sidebar for woocommerce pages, and main sidebar (default) for other

pages

Navigate widget under Appearance in the dashboard to add widgets.

How to manage additional CSS?

Go to Appearance > Customize >Additional CSS, you can add extra CSS to tweak your website’s

design.

How to manage Contact Page ?

Steps to customize contact page as demo.

Step 1 : Goto Contact page. Click on Customizer.

How to manage Contact Page Form ?

Steps For setting up Contact Form :

Step 1 : Goto Backend . Step 2 : Create a page (say ‘Contact Page’) . On Right sidebar Page Attributes choose

Template-Contact Page . Click on publish.

Step 2 : Click on Plugins and check if you had install contact form 7 plugin . You must install

contact form 7 plugin. Which is recommended by city store theme.

Step 3 : Click on Contact listed in left sidebar.

Step 4 : Click on Add new to add your own contact form . See the Documentation for more

details to create contact form . https://contactform7.com/docs/ . Step 5 : After you setup / save the contact form you can find shortcode as shown in picture.

For example [contact-form-7 id="1731" title="Contact form 1"] is the shortcode to be used in

contact page.

Step 6 : Copy the shortcode and go to contact page under pages>Contact page. Paste the code

and click on update as shown in demo picture.

Posts

Creating posts

Step 1: Navigate to Posts in your WordPress admin sidebar.

Step 2: Click on the Add New option to make a new post. Create a title, and insert your post

content in the editing field.

Step 3: Select Post Format from the right side.

Step 4: Add categories from the right side. To assign it to the post, check the box next to

the category name.

Step 5: Add tags from the right side. Type the name of the tag in the field, separate multiple

tags with commas.

Step 6: you can add featured image. To do so, first click the featured image box, select an

image and click the set featured image button.

City Store Pro Custom Post Types

JetPack Post Types

Testimonial

Easily show your customers testimonials and reviews with the 'Testimonials' post type.

Pages

New pages can be added by clicking pages on admin dashboard and can be assigned to

various templates on the right side.

Page Templates

There are various page templates that you can choose.

● Default Template (default page template)

● Home Page Template (Same as Demo)

● Full Width Template (Template With No Sidebar)

● Contact page template

Demo Content

Demo content of our Demo site is provided along with the Theme Package. Two demo files

are included.

1. content.XML

- Install plugin “WordPress Importer”

- Go to Backend > Tools > Import

- Import the content.XML file

2. Customizer.dat

- Install plugin Customizer Export/Import

- Go to Backend > Appearance > Customize > Export/Import

- Import the customizer.dat file

---------------------- EoF ---------------------

Shop: http://yudleethemes.com/

Support: http://yudleethemes.com/support/

Customization Request: http://yudleethemes.com/support/#customization_support

Tickets: http://yudleethemes.com/my-tickets/