Prestashop 1.7 Installation for Grid Contempo

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.

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.
In your admin go to “modules > module manager”.

• Scroll till you see “eShopalot Configurator”
• Click “enable” not done already, or click “configure”
• Next to ” Show Theme configurator” click “yes”.
  What is this is show the module on the store front so you can select your colors
• Now click “save”

Now go to your Prestashop storefront
If it’s not already open, click on the gears icon.

Here you can see where to change the color options.

When your finished, click “apply” or clilck “reset” to reset the options.

Now when your done, go back into the admin and find the module.

• Make sure the web color numbers from the front end match where in the admin. If they don’t, make the adjustments here. If you change the colors here, it will override.
• Next to ” Show Theme configurator” click “no”. This wil turn off the color switcher on your store front.

Creating your top area home page grid

This is a masonry grid which means you can make images any size and it will fit into place. But you might end up with strange gaps unless you following the sizing below.

See the grid below (click the image to enlarge)

Create several images to the size of:

• 700 pixels wide x 350pixels  tall (rectangle sized image)

Then create several images to the size of

• 500 pixels wide x 500 pixels  tall (square sized image)

Then create several images to the size of

• 380 pixels wide x 760 pixels  tall (Portrait sized image)

When you have made your images to the correct size, follow these instructions:

• Click on “modules > module manager” in left side menu
• 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 not be shown
• Add description: make sure not to add too much text.

Adding the homepage bottom 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.

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 > module manager” in left side menu
• Search for “Homepage Banners”.
• Click “configure”
• Remove the demo images by clicking “delete”

Add your images

• Make a minimum of 4 images to the same size. In our example we have used the size 500px wide by 300px tall. But you can use any size. Try to use around 500 x 600 pixels wide and not too tall.
• 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 carasoul. 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 > module manager” in left side menu
• 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
• 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.

Contact us

If you have any questions or need help configuring your theme, contact us by clicking here