Citymart Theme Setup

To get the Citymart Theme set-up correctly there are a few steps that you have to take

Below you will see a few links to different blank images that are in this theme

To create a image suitable for your selected theme, copy this link and follow the details of using an online image editor – SumoPaint

 

This themes sample site has a logo size of:

240 x 55 pixels (width x height)

Sample Image Link

http://static.wearequick.com/themeimages/logo.jpg

You can add your new logo in the admin area by going to admin > system > settings (image tab)

Click here to view more details about how to add a logo

 


 

 2. Shop Details

Now your shop has been setup, you can modify your shops name, location and currency.

You can do this in the admin area by going to admin > system > settings

The fields you should edit are:

General Tab:Store Name:
Address:
E-Mail:
Telephone:
Fax:
Store Tab:Title:
Meta Tag Description:
Local Tab:Country:
Region / State:
Currency:
Length Class:
Weight Class:

 

Click here to view more details about modifying the settings area

 


 

 3. Home Page Slides

This themes sample site has a home page slide size of:

940 x 3439 pixels (width x height)

Sample Image Link

http://static.wearequick.com/themeimages/asenti/slide1_1.gif

 

Adding New Slides

You can add your new logo in the admin area by going to admin > system > Home Page Slides

 

Click here to view more details about using the Theme Content Slider

 


4. Shop Colors

To modify the shop colors go to 

admin > system > modules > Theme Control Module

General Tab

Default Theme: Select a pre made theme you would like to use
Enable Panel Tool: This gives you more control over the shops colors
Body Pattern: Click on a pre installed background color to use it
Use Custom Background: You can also upload your own background image and then select it
Customize Background: How the image is used / displayed

 

 

Page Setting Tab

This tab has two sub tabs available 

Category Tab

The Category tab lets you modify how the site displays:

Display Product Modes
Columns
Enable Product Popup Image

 

Contact Tab

This lets you enter indetails that are displayed on the contact page 

Enter in any addition details you would like displayed in the text box

 

Font Tab

 This tab lets you modify the fonts used on the site. There are also 3 font style area that you can use to modify different areas on the site.

You can modify:

  • Font Size
  • Enable Customize Font: (standard or Google fonts available)
  • Body Selector: Put CSS Selector such as body, h1, h3,h4, .box-title

 

Internal Modules

Top Bar

This lets you add in a new top bar image 

The default image size is 1400 px x 63 px

Sample Image Link

 

http://static.wearequick.com/themeimages/citymart/topheader.psd

 

Header

This lets you modify the top header information

Please note this area does use predefinfed CSS to break up the 3 display areas

If you delete this by accident, edit this area again, click the ‘Source’ button and paste in the code displayed in the blue boxes below (overwriting what you have already entered)

 


<div class="box-services"><span class="iconbox pull-left"><i class="fa fa-truck">&nbsp;</i></span>
<div class="media-body">
<h4>Free shipping</h4>
<span>all order over $150 </span></div>
</div>
<div class="box-services"><span class="iconbox pull-left"><i class="fa fa-refresh">&nbsp;</i></span>
<div class="media-body">
<h4>Return &amp; Exchange</h4>
<span>in 3 working days </span></div>
</div>
<div class="box-services"><span class="iconbox pull-left"><i class="fa fa-phone">&nbsp;</i></span>
<div class="media-body">
<h4>My Number</h4>
<span>Sed ullamcorper mattis sit</span></div>
</div>

 

Footer

This area lets you add in your Facebook Page 

Url Facebook Field

 

Newsletter and contact details (Footer Columns 2)

Please note this area does use predefinfed CSS to break up the 3 display areas

If you delete this by accident, edit this area again, click the ‘Source’ button and paste in the code displayed in the blue boxes below (overwriting what you have already entered)

 

<p>Send your email a newsletter.</p>
<div class="email"><input name="email" placeholder="email" type="text" value="" />
<div class="button-email">GO</div>
</div>
<h3>Order online</h3>
<p>Phone: +123 456 789</p>
<p>Fax: +123 456 789</p>
<p>Email: admin@admin.com</p>

 

Social Links (Footer Columns 3)

Please note this area does use predefinfed CSS to break up the 3 display areas

If you delete this by accident, edit this area again, click the ‘Source’ button and paste in the code displayed in the blue boxes below(overwriting what you have already entered)

 

<h3>Stay Connected</h3>
<ul>
<li class="facebook"><span class="fa fa-facebook">&nbsp;</span><a href="#">Facebook</a></li>
<li class="twitter"><span class="fa fa-twitter">&nbsp;</span><a href="#">Twitter</a></li>
<li class="google"><span class="fa fa-google-plus">&nbsp;</span><a href="#">Google</a></li>
<li class="youtube"><span class="fa fa-youtube">&nbsp;</span><a href="#">Youtube</a></li>
<li class="rss"><span class="fa fa-rss">&nbsp;</span><a href="#">RSS Feed</a></li>
</ul>

 


5. Shop Default Image Sizes

You can modify the size of the images displayed in your shop by going to admin > system > settings ‘image tab’

If you would like to have the default sizes displayed again, you can view what they are in the image below.

 

 


  6. Adding Product Categories

To make it easier to manage products we use categories. This lets you group similar products together

You can do this in the admin area by going to admin > product > categories

 

Click here to view more details about adding a category

 

 


  7. Add a Product

Now your shop has at least one category, you can now start to add your products to sell.

You can do this in the admin area by going to admin > product > Your Products

 

Click here to view more details about adding a product

 


  8. Update Your Shipping Options

Your shop comes setup with a few different shipping modules pre-installed

These are available by going to admin > extensions > shipping options

 

Click here to view more details about the different shipping modules

 


  9. Add Shop Information

The Internet is all about Information so now is the time to add in some content to your site.

You can do this in the admin area by going to admin > information > Information Pages

 

Click here to view more details about adding Information Pages

 

 


 10. Other Modules of interest

 

Featured

Image Setting

Click here to view more details about the Featured Module

 

 Home Page Manufacture Images

The home page manufacturer images can be modified in the Banners Area

 The manufacture images are being displayed by using the Carousel Module

 

Add News / A Blog / Articles

You can add news to your site via the Blog Manager 

 

Was this article helpful?

Related Articles

Leave A Comment?