Hybrid is a powerful responsive Drupal eCommerce theme built with Zen Grids freamwork. It’s suitable for any kind of shop with modern and clean design. Hybrid provides most the tools needed to create robust eCommerce website that works great on any devices. It also comes with fully profile demo installation.
Setup and implementation
HYBRID is created over an installation profile, so you don't need to do much to get it working. Following steps will guide you through the installation process.
1. Extract the zip file on your web server. It includes all you need to get it working, so don't worry about any other files handle.
The location of your installation depends on the kind of server you're using. I mention some examples here you may be:
- In case you're using a local XAMP on Windows, the server root folder is C:\xampp\htdocs\
- In case you're using a local AppServ on Windows, the server root folder is C:\Appserv\www\
- In case you're using a local MAMP on OSX, the server root folder is Aplications/MAMP/htdocs/
- In case you're using a remote/local WebServer on Linux, the server root folder usually is /home/user/public_html/
Once you extract it, you can change the name of the folder.
2. Using a web browser, navigate to your folder/domain/subdomain where the extracted HYBRID's folder was created..
I'll use as example the name "hybrid" due to the default folder. It would be on
"http://localhost/hybrid" in case you installed it locally or
"http://yourdomain.com/ hybrid" in a remote installation.
3. Select HYBRID as your installation profile on the "Select an installation profile" page and then click "Save and Continue".
4. Select your language on the "Choose language" page and then click "Save and Continue" by default, the theme is English based.
5. Setup your database info on the "Database configuration" page and then click "Save and Continue". If you haven't created it yet, do it via phpMyAdmin or any other MySQL configuration app. Once you continue, the installation process will begin.
Please, be a little bit patient.
6. If you get this error message:
" Fatal error: Call to undefined function field_read_fields() ..."
Just reload the page (click F5) and the installation will continue just fine.
7. Configure your site basic info on the "Configure Site" page and then click "Save and Continue". Wait a little bit, until all HYBRID's features are configured.
8. HYBRID instalation was a Success!
For security purposes, it's recommended that you delete profiles/hybrid_profile/hybrid_base.sql, or move the hybrid_profile profile folder out of your webroot.
Now you can visit your new site.
To customize your website, you should visit the theme configuration page: admin/appearance/settings/hybrid
Change Site Logo
This is one of the first things you'll want to do when you have HYBRID installed. Here I show you how:
1. Browse to admin/appearance/settings/hybrid
Scroll down to the section named "Logo image settings".
2. Browse for your logo file locally. Once you find it, select it, and click “Save Configuration” at the bottom of the page. It will be uploaded to your webserver and will replace the default one.
Change theme style
HYBRID comes with 5 colors, 2 layouts and 20 background patterns. To define your preference:
1. Browse to admin/appearance/settings/hybrid
2. Scroll down to the section named "Hybrid style settings".
3. Define your preference and save.
Change theme appearance
If you want change the appearance of your website, you can use the file located in /sites/all/themes/hybrid/css/custom.css to add your custom css code.
Add a google font to your theme
You can add any of google fonts to your website, you just need to:
1. Browse to admin/appearance/fontyourface/browse/google_fonts_api
2. Search for your font and enable it.
3. Brows to admin/appearance/fontyourface, you will find your font ... click on edit.
4. Add your CSS selectors.
Drupal is a powerful cms, so Managing content must be very easy:
Add a new Category/Tag
HYBRID use Category/Tag as taxonomies, to add/edit/delete a Category or Tag:
1. Brows to admin/structure/taxonomy
2. Click on "list terms"
3. add/edit/delete a category or tag.
Add a new Product
1. Brows to node/add/product
2. Fill in the form by the product informations
3. Insert the Product SKU and price
4. If you want to add the product in the home page Featured products, select "yes" in "Featured" section.
Add a new Blog article
1. Brows to node/add/article
2. Fill in the form by the blog article informations.
Add a new Slideshow
1. Brows to node/add/slideshow
2. Fill in the form by the slideshow informations.
Add a new Testimonial
1. Brows to node/add/testimonial
2. Fill in the form by the testimonial informations.
Edit the filter in the catalogue page
1. Brows to admin/appearance/settings/hybrid
2. Scroll down to the section named "Hybrid settings", then select the Minimum/Maximum price and the step.
Edit the contact page
1. Brows to node/141/edit
2. Fill in the form by your contact informatione
3. Brows to node/141/webform/emails
4. Click on "edit" and set your email contact.
The SlideShow is a view block:
1. To change the number of content in Slide (default:5), brows to admin/structure/views/view/slideshow/edit
2. To change the animation effect or the time between two slides, brows to admin/appearance/settings/hybrid, scroll down to the section named "Hybrid settings", then select animation and set the timeout.
"Enquire Now" is a block generated by a custom module, to configure it:
1. Brows to admin/config/system/enquire_now
2. Set the "Recipient email" / "Custom email" / "Email subject"
3. Save your modification.
This module sent an email to "Recipient of email" with the information given by the visitor and a link to the visited product page.
Configure PayPal WPS
1. Brows to admin/commerce/config/payment-methods
2. Click on "edit"
3. Scroll down to the section named "Actions", then click on "edit Enable payment method: PayPal WPS" element
4. Scroll down to the section named "Payment settings", set your PayPal e-mail address and put the PayPal server "live"
5. Click on "save"
Best Photo Dimensions
The website will automatically try to resize specific images for you, however it’s always good to have the image the way you want it before uploading.
Slideshow: 1920px X 600px
Product images: 1050px X 700px
Blog image: 960px X 640px
Testimonial image : 250px X 250px