1) Changing the Shoppica Theme Colors

Change colors at: Appearance > Shoppica > Settings

This theme has infinite theme colors available. You can use one of the preset theme colors -- Blue, Green, Orange, and Tan. Or, you can choose "Custom" and then select the theme colors of your choice for certain parts of the theme's layout or text. A flyout color wheel is included for all color input fields. The fields you can change include:

• Main Color
• Secondary color
• Intro color
• Intro text color
• Intro title color
• Price color
• Price text color
• Promo price color
• Promo price text color
• Background color

The theme even comes with 3 background textures that change color with the background color chosen within the custom color settings. Backgrounds include Rough, Noise, and Squares. This theme can be adapted to include ANY color variations you need to match your brand or product line.

Screenshot from the "Appearance > Shoppica > Settings" page:

2) Shoppica Blocks Configurations

The Shoppica theme makes heavy use of Drupal's core blocks functionality. You can go to Structure > Blocks to see the blocks in use in the theme after purchasing. The blocks in use and in the demo are named in a way to help you find them in the theme, such as the ones shown in the example screenshot below. After you've set up the theme, go through the blocks there and get familiar with where they are placed within the theme.

Note: The Facebook and Twitter regions in the Shoppica theme (footer region on every page) are hard coded in the theme's page.tpl and front--page.tpl files. This is because they have a very specific look and feel to them that matches the theme's design.

You can set the Twitter username and Facebook ID (name) on the Appearance > Shoppica > Settings page. Just scroll to the bottom of the page just below the color options to insert your usernames for those two services.

Screenshot from the Structure > Blocks page:

3) Getting Familiar with Product Settings

As noted above, Commerce is the module used in this theme. There are tons of options and configurations that can be made using Commerce -- way too many to go into here. We would recommend clicking on the Content link in the admin menu and then click on "edit" beside a few of the products under the "Product" content types. You can then get familiar with the products there in the demo and what fields are included in the theme's product pages.

Product fields/attributes included by default in the demo theme:

• Product images  - sortable so you can always make sure your "lead" image is first and prominent for customers.
• Availability - In stock, 1 Day, 2 -3 Days, 3 - 6 Days, etc. - all adjustable within Commerce.
• Model, Catalog, and Manufacturer fields - all adjustable within the Commerce module.
• "Old Price" field - This allows you to set a sale price and the "Old Price" has a strick through (line) to show the Sale price below the strick through price.
• Slide show check box - Please be aware that adding a product to the slide show may not display correctly because the slide show image size fits a wide, rectangular picture. Therefore, we have set up a custom content type to add slide show images to the theme. Click "Add content" then "Slideshow" and add the slider image and link to the page you'd like to point the slide to within your website. Slide image must be 920px × 320px.
• Product description - Add a description to your product within this field.
• Dropdown attributes - If you have products like clothing which require different styles or sizes, the attributes functionality from Commerce allows you to set these up easily to include in the theme. Attributes can use different prices depending on what's selected from the dropdown. Select boxes, Radio buttons, and Check boxes can all be used in product attributes.
• Add more options depending on your ecommerce/store needs!

4) Adding Images to the Front Page Slide Show

Adding images to the front page slide show is easy. We've set up a content type called "Slide Show." This allows you to add slide show images - preferably a PNG image with transparent background as this allows the slider background to display well.

To add a slide show image, click Add content > Slide Show, then upload an image that's 920px height / 320px width. Then, you can simply link the slide show image to the product, product category, or article page you to feature from the slide show on the front page.

Note: Adding normal products to the slide show may not display as you'd like them to. This is beacuse the product images height and width is far different than the height and width used in the slide show. It's best if you use the slide show content type and link to the product, category, or article page from the slide show area.

5) Category Slide Show Configurations

This theme comes with category slide shows which is pretty sweet looking! To manage the number and order of products shown in the category slider, go to Structure > Views > Category Slide Shows to make the appropriate settings. By default it is set to show 10 products in the category slider.

6) Views Configurations for certain Blocks/Regions

This theme makes heavy use of the Views core module, as you can see when you go Structure > Views. The blocks or regions using Views currently are:

• Bestsellers
• Brands
• Catalog
• Catalog Terms
• Category Slide Shows
• Customer Profiles
• Latest Products
• Line Items
• Order Payments
• Orders (Commerce order info)
• Products (for products pages)
• Related Products (for related products block below products)
• and more...

7) Commerce Module Configuration

Store configuration is found by simply clicking "Store" in the top admin menu. As noted above, there are tons of ecommerce options available from Commerce like payment gateways, checkout settings, order settings, and so on. You can click through each of these to get familiar with what you need to set up to get your store selling in no time! Read more information and the user guides over at http://www.drupalcommerce.org/.

8) Commenting out Fonts

Some people may want or choose to comment out the fonts that load into the theme in order to speed it up. This really depends on your hosting and traffic. It's necessary to make chages to this file noted below to disable the loadable fonts for the Shoppica theme.

Location: /sites/all/themes/shoppica/css/screen.css

Comment out or remove the style strings #20 - 41

@font-face {
    font-family: 'Ubuntu Regular';
    src: url('../fonts/Ubuntu/Ubuntu-R-webfont.eot');
    src: local('Ubuntu Regular'),
         url('../fonts/Ubuntu/Ubuntu-R-webfont.eot?iefix') format('eot'),
         url('../fonts/Ubuntu/Ubuntu-R-webfont.woff') format('woff'),
         url('../fonts/Ubuntu/Ubuntu-R-webfont.ttf') format('truetype'),
         url('../fonts/Ubuntu/Ubuntu-R-webfont.svg#webfontGZB3fjCF') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Babel Sans';
    src: url('../fonts/Babel/BabelSans.eot');
    src: local('Babel Sans'),
         url('../fonts/Babel/BabelSans.eot?iefix') format('eot'),
         url('../fonts/Babel/BabelSans.woff') format('woff'),
         url('../fonts/Babel/BabelSans.ttf') format('truetype'),
         url('../fonts/Babel/BabelSans.svg#BabelSans') format('svg');
    font-weight: normal;
    font-style: normal;
}

9) Adjusting the Slide Show Speeds

If you'd like to adjust the slide show speeds for the front page or category sliders, the corresponding JS files to modify are located here:

1. Files for the slideshow located in: /sites/all/themes/shoppica/js
2. Homepage Slide show: /sites/all/themes/shoppica/js/shoppica.images_slide.js (used with jquery.cycle.all.min.js)
3. Product catalog Slide show: /sites/all/themes/shoppica/js/shoppica.products_slide.js (used with jquery.slides.js)

10) TWEAKS: Adding product image thumbnails to the "View cart" page

1. Logged in as admin, add a couple of products to your shopping cart and click "View Cart"
2. Hover over the "View cart" line items on this next page and you'll notice the small "cog wheel" for editing this cart's View. Click this "Edit view" link.
3. On the resulting 'Shopping cart form' View you'll see the right column in this View has listed what's called "Relationships." Click "Add" then add "Commerce Line item: Product." Click Save.
4. Now, go over to the left column within the main 'Shopping cart form" View under the "Fields" section. Click "Add"
5. Scroll down to the "Commerce Product: Image" and select it. Then, make sure you select "thumbnail" when adding the image type from the dropdown within that field addition.
6. Click "Save" and then Save again the View changes. This should reload the View cart's page with the new thumbnails attached.

11) Adjusting the "Featured Products"  block for more than 6 products (not within the original package download)

.s_item {

position: relative;

} 

.s_item {

position: relative;

height: 230px;

}

.s_box .s_item {

height: auto;

}

Need more Help?

Read the easy setup instructions for the Shoppica theme using the included profile installer or post in the forums under the Shoppica forum section.