Prestashop 1.7 Installation for Snazzy

Thank you for purchasing Snazzy Prestashop theme for version 1.7.

PLEASE READ:

Clear your cache! (admin > advanced parameters > performance)

It’s recommended that you turn off all your caching & minify till your done working on your site. If you keep it on… clear your cache often to see the updates you make.
Please not that this theme will automatically be configured with the same settings as our demo. Of course without our demo images and products… but with Prestashop demo products.

So don’t be alarmed if the homepage slider doesn’t look like our demo. Follow the instructions and it will!

Follow our steps and it will. And contact us if you have any questions.


Installing your template

To install the template using your admin, please do the following

  1. log into you admin
  2. Go to “design > themes & logo”
  3. At the top right of the page, click on “add new theme”.
  4. Click on “Add file”under “import from your computer”
  5. Fine the downloaded zip file that you purchased and downloaded
  6. Click Save
  7. Now you will see the theme listed below, hover over the theme you want to use for your shop and click on “use this theme”.

If you purchased via Prestashop Addons, your theme will automatically be installed if you have your shop connected to your addons account.


Clear Prestashop’s cache

As I mentioned above, you need to clear your cache after making changes like installing the template.go to: (admin > advanced parameters > performance)

Click the “clear cache” button on the top right of the page.

If you scroll down you will see other options like compression.

Read this page for information on how to control the cache and mimify:
http://doc.prestashop.com/display/PS17/Performance


Image Sizes

In your admin, go to design > image settings

Here you will see a list of all the image size types.

Everything upon the theme installation should be set up for you, but you may need to regenerate your product images to reflect a different size.
Also, if you have different size product image, you might want to play around with “Generate images based on one side of the source image”. This allows different sized images and allows for an automatic width or height.


Adding your logo

To add your logo to Prestashop 1.7, in your admin

  1. go to “design > theme & logo

On this page is where you add your logo. Make sure your logo width is no more than 500px wide. It doesn’t need to be larger than this. You may want to use a different logo for emails and invoices. Something that will print well.

You also upload favicons in this section as well.


Changing the theme color

When you install the theme, a theme color configurator will also be installed. This gives you control over the color scheme of your website.
In your admin go to “Modules > Module Manager” then click on “installed modules”.

  • Scroll till you see “eShopalot Configurator”
  • Click “enable” if not already enabled. If already enabled then click “configure”
  • Next to ” Show Theme configurator” click “yes”. This should already be set to yes.
  • Now go to your store (www.???.com) and you’ll see color changer tab open.
  • This is used as a guide so you can see what your color selection will look like. Make your color selections here
  • Now back in the module configuration you add those color numbers here.
  • When your done adding your colors into the module via the admin, switch off where it says “show theme configurator”. This will turn off the color selection on the front of your website.
  • Now click “save”

Theme color changer configuration Prestashop 1.7

Now go to your Prestashop storefront and click refresh in your browser. If you have cache turn on in prestashop, you have to clear it first.


Configure the top accordian homepage slider

Since this is an accordian, you need to have exactly 4 images. If you have too many or too few… it won’t look right.

So create 4 images to the following sizes: (use large or low resolution sizes)

  • High resolution size 1920px wide by 1200px tall
  • Low resultion size: 1700px wide by 1063px tall

Then open the slider module

  • Click on “modules > modules & services” in left side menu
  • Click on “installed modules”
  • Search for “image slider”.
  • Click “configure”.
  • Speed: 5000 (keep default)
  • Pause & loop you can ignore

Add image to the slider

  • Click the circle plus icon to the right of the page.
  • Select the image from your hard drive
  • Add title: make sure not to add too much text.
  • Add url: This is where the link to your slide will link to.
  • Add caption: This will show when you open the slide and hover on the link. You can leave this blank or add a call to action.
  • Add description: make sure not to add too much text. You can also add images or videos to this section.

Adding the homepage masonry banner grid

The banners come installed with a few demo images to give you an idea of how it looks. You can add as many as you want.

Follow these instructions:

  • Click on “modules > modules & services” in left side menu
  • Click on “installed modules”
  • Search for “Homepage Banners”.
  • Click “configure”
  • Remove the demo images by clicking “delete”

Add your images

  • Make a minimum of 4 images. Think about how you want the grid to look. Since this is a masonry grid… it will automatically fit the images like a puzzle. But it’s a good idea to think about how the images will fit. See below:
  • Click the circle plus icon to the right of the page.
  • Select the image from your hard drive
  • Add title: make sure not to add too much text.
  • Add url: This is where the link to your slide will link to.
  • Then click “save”.

Add video to content

IMPORTANT

  • First you need to go to preferences > general
  • And make sure “Allow iframes on HTML fields” is set to yes.
  • Then go back into your slider module (go to modules and search for “slider” and click “configure” next to “Image slider for your homepage”.

Adding a Vimeo or YouTube Video

  • Find a video on vimeo or youtube
  • Select on the video icon
  • A popup will appear
  • Source: Youtube or vimeo video link
  • Alternative Source: Alternative video source – Leave blank if using vimeo or youtube
  • Poster: Cover of the video. You can leave this blank unless you want a specific graphic to show first
  • Dimensions: Select the sizes of the video (remember it not to make it bigger than the slide dimensions
  • You can also add a video to category, product and CMS pages.


Add featured products to home page

By default, the featured products module is transplanted to the home page and set in a carousal. You can add products to this by selecting “home” as one of the categories when making the product.


Creating banners

Unlike Prestashop 1.6, Prestashop 1.7’s internal banner module will only allow one banner.

You can hook the banner module into one of the columns, or leave it as it is by default hooked onto the home page.

Then follow these instructions:

  • Click on “modules > modules & services” in left side menu
  • Click on “installed modules” » Search for “banner”.
  • Click “configure” » Then you add your information

Top banner image: how you upload an image from your hard drive

Banner link: the url that the banner will link to

Banner description: Add a description of your banner


Add social media icons

  • Click on “modules > modules & services” in left side menu
  • Click on “installed modules”
  • Search for “social media follow links”.
  • Click “configure”
  • Add your social media links and save.

Configure the top menu

Of course, the first step is login to admin panel and then navigate in Sell section to:

Catalog -> Categories

And as you can notice we have 2 categories here: “Women” and “New Category”, but only “Women” category is displayed on the frontend.

Let’s add “New Category”, which contains subcategory, to our drop down menu. All the actions will be performed in default Prestashop Main Menu module. So we have to find it in Improvesection:

Modules -> Modules & Services -> Installed Modules

It’s much easier to find it using search.

Then choose the Configure option to set up your menu module:

That’s what you should see on the screen.

So here we can find Selected Items (that are already displayed in your menu) and Available Items(here are listed all items that you can add). Just select in this list our New Category and click Add button. This item will be added into the left field. To specify the position (the order of displaying in a row) just select required item and use Change position buttons.

In case you want to delete unnecessary item from the menu, just use Remove button (the item will be removed from the list only, i.e. will not be displayed in the menu).

And don’t forget to save all changes.


Setting up columns

You can setup your pages to have 1 or 2 columns. You can set 3 columns but I don’t recomend this as it won’t look very nice. 1 or 2 is best.

Our demo has 1 column on all pages. You can change this to 2 column easily on any page.

  • Go under “design > theme & logo.
  • Scrol all the way to the botton till you see on the right “Choose layouts” and click that button.
  • Now you’ll have a list of all the pages where you can change the number of columns.
  • Example, if you want to change the category page to 2 column, find “category” and next to it select “Two Columns, small left column – Two columns with a small left column”
  • Then save at the bottom.
Translate »