Prestashop 1.7 Installation for Swank

Thank you for purchasing Swank 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.


As I mentioned above, you need to clear your cache after makin 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.

During the theme installation, the image size will be set up. But they’ll be setup as square and this needs to be switched to your product image size.

  • cart_default: 125px by 125px – This is the small product image customers see in the shopping cart
  • small_default: 350px by 350px – This is used for all small images for products, brands, categories, suppliers
  • medium_default: 550px by 550px – This is use for product categories on the category page, suppliers & brands
  • home_default: 550px by 550px – This is used on the product pages on the homepage. You can make this the same size as the medium_default unless you want this section to be smaller or bigger
  • large_default: 800px by 800px – This is use for product images on the product page as well as suppliers & brand images. You will want this image to be much larger than the medium.
  • category_default: 1400px by 550px – This is the size of the category image. This is setup to be rectangular so you will want to make your category image if you upload one to this size. If you want it a different size, then also change the image size you upload and change it in the prestashop images section.
  • stores_default: 170px by 115px – This is the image size for the store page. If you have physical locations you will want to have a page here and upload images. You can make these images larger here.

You might have product images with different image sizes. All your images will stay the same size because Prestashop crops them. But you can set them to auto height or auto width.

Scroll down till you see “Generate images based on one side of the source image”. Here you can geneate the sizse based on heigh or width.

After any changes, make sure you scroll down the page and regenerate images. If your server times out, then you can regereate by category first, then products, etc.


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 homepage parallax slider

By default, Prestashop switches off the slider on mobile. If you want the slider shown on mobile views follow these directions

Enable on mobile

  • Click on “modules > modules & services” in left side menu
  • Scroll down to “Image Slider”
  • Next to “configure” click the down arrow
  • Then click “enable mobile”.
  • Now you will see the slider on mobile

Make images

Create several images using to the size of 1700px wide by 1153px tall. Keep all your slider images the same size!

In our demo the height is: 1700px wide by 1153px tall but you can increase this size but make sure it’s in the same ratio.

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

  • 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 not be shown
  • Add description: make sure not to add too much text. In our demo we haven’t added a description but we have added a video in this section. See below on how ot add a video. If your confused on how to do this, contact us and we’ll help.

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 > 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


Setting up columns

You can setup your pages to have 1 or 3 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 except for the category product list page. You can change this to 1 column easily.

  • 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 1 column, find “category” and next to it select “Full Width – No side columns, ideal for distraction-free pages such as product pages.”
  • Then save at the bottom.

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.


Contact us

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

Translate »