How to Configure Wide Theme

Aesthetically minimalist, Wide is a theme built around air! Focused on increased spacing and improved visibility of the elements. Equipped with plenty of theme customisation options to make the appearance of your store unique.

Theme Header

In the Wide theme you can have two types of headers.

Full Width Header Option: header stretches from one side of the screen to the other. You will set this type of Header if you check the option “Show full width header” in Theme Options > General.

Boxed Header: header keeps a padding space around. You will set this type of header if you uncheck the option “Show full width header” in Theme Options > General.

Additional Currencies and OpenExchangeRates App ID

You will use these fields if you want to show multiple currencies in your store. Learn how to have multiple currencies in your store.

Will appear if you have that information in your Admin Panel > Settings > General

Top Bar

The information that has to be shown in this section can be edited in Theme Options > General > Header > Top Bar text.

If you want your top bar to keep showing on top of the page when scrolling down, select “Top Bar” in the Fixed Header option:

Your top bar will look like this on scrolling down:

If you want your top bar to keep showing on top of the page when scrolling down, select “Menu” in the Fixed Header option:

Your menu will look like this on scrolling down:

Learn how to set up the navigation menu in your store.

Displaying Products in the Home Page

There are three main areas to display products in your home page: Featured Products, Popular categories and Latest Products.

You can add any of these as a section by going to Themes > Theme options > Add new section > Featured Products, Popular categories or Latest Products.

If your product has variants with multiple prices and you don’t want to show a fixed price on the home page, you can check “Show ‘from’ on prices of products with variants” option. Lowest price will be shown.

On the home page, your product prices will look like this:

Featured Products

To show a product in this section, first you have to be sure to set the product as “Featured” when you create it.

When it is saved, it will show up in the “Featured Products” section:

Number of products shown

You can personalise how many products are shown in any of the types of product sections, by going to Themes > Theme options > Featured Products, Popular categories or New Arrivals.

Store Info

Store info is shown in the footer under “Contact” and on the contact page of your store.

You can add a contact phone number and working hours on the footer by going to Theme Settings > Store info

The contact email is set on Admin Panel > Settings > Emails

Home Page Banners section

You can add banners by going to Add Section > Banners or Big Banner

You have the option to set up to 6 banners in your home page. These banners can be linked to a category page, a product page, a content page or any other content element that you have a URL for.

You need to have a picture for each banner. Suggested size is: 650x440px. Then you will need the link to that category page.

Go to your Admin Panel > Products > Categories, and select the category you want to link the banner to.

Once inside the category page, scroll down to the “Search Engine Optimization” where you can get the category’s permalink. Then, by typing that permalink in the theme option “Banner Link”, it will redirect the banner to the category page.

Setting Up your Instagram Feed section in Home Page

You can also add your Instagram Feed by going to Add Section > Instagram Feed and you can select the number of photos shown at the same time, 6 or 12.

Important: Your Instagram account should be set to “Public” in order to show your feed. If it is set to “Private” pictures will not be shown. The feed is updated monthly, so when you post a picture in Instagram it won’t show right away.

Blog Section

You can decide if you want to show your latest blog posts in your home page, by checking and unchecking this option.

You can also select how many posts you want to show.

Will show up like this:

Learn more on how to use your store’s blog.

Home Slider Section

The slider section has 4 options:

Activate Loop: Slides will change constantly.

Activate Autoplay: Slides will start changing automatically as soon as page loads.

Activate Pause on Hover: Animation will stop when the mouse is positioned over a slide.

Autoplay Time Out: Set the time (seconds) between slides when Activate Loop is checked.

You can also change the background color and opacity:

Then you have some options to set up each slide:

You need to upload an image recommended size 1905x800 pixels, write a title, a button text and have a URL to link the button.

You can link the button to a specific page, product page, category, etc. See example on how to get a specific link in Setting up Home Page Banners Section.

Testimonials

You can add testimonials from your clients, suppliers and others, by going to Add Section > Testimonials

You can and have up to 5 testimonials on a slider. You can also activate the automatic slider so that it changes the testimonial each x seconds. The author’s image should be 50x50px.

Product Page

Show miniatures of the product images - When there is more than one variation of the product (example: multiple types of colours), it shows miniature images of the product with other colours/variations of it.

Activate Zoom on Images - Shows a magnifying glass when the mouse is on top of the product image that zooms in.

Product Stock and SKU

If these options are checked, information will be shown on the product page.

If this option is selected, products related to the product that is being viewed, will show up in the lower section of the Product Page.

The relation is based on the first product category they share.

Social networks icons will show up on the product page in order to allow the product to be shared.

WhatsApp icon will only show on mobile devices or a Globe icon on the PC version.

Cart and Checkout Pages

Disable Cart and Hide Prices

You can either hide your icon cart or hide products prices (or both at the same time). This feature is useful when you want to use your store as an online catalogue or as a normal web site (not an e-commerce type web site).

Add to Cart notifications

In this option is selected, a PopUp message will show in the upper right corner of your store, every time a product is added to the cart.

Estimated Shipping on Cart Page

If this option is selected, the shipping cost estimator will show up in the cart page.

Product Table at Success Page

If this option is selected, a table will appear in the success page showing every product bought by the customer.

New Customer message

You can go Theme options > Other options to set the New Customer Message, which will appear as a visitor clicks to enter his account

It will show up as this:

How to change the Favicon Icon

The favicon is the little icon that shows on the navigation tab when someone visits your store.

By default, Jumpseller icon is shown. You can set your own favicon under Theme Settings > General. Recommended Size: 32x32px. PNG Format and transparent background are also recommended.

Fonts and Titles

You can easily customize fonts and sizes on Theme Settings > Fonts

When no store logo is used, Store Name will be shown. You can customize its font and size too.

You can personalize the color of the text of all kinds of buttons.

Custom pop-ups

After clicking on “Activate Pop Up” you can customize where the popup will show up, the delay it takes to show itself after you load a page on the website, its size and color, alignment, title and description.

It will show up as this:

How to set up the subscription form

Go to Footer and click on “Show subscription form” to display it.

To make it work you need to paste the URL of a subscription form created on Mailchimp into the “Mailchimp Newsletter Form Url” field. Learn how to create a subscription form using Mailchimp.

The pages shown in each of the menus in the Footer can be customized in the Admin Panel > Themes > Navigation under the “Footer Menu” Tab.

To change the name of each of the menus on the footer section, go to “Footer”

Display Payment methods

You can choose which payment methods icons to show in the bottom of your pages by going to “Theme options” > “Payment methods” and selecting them.

Reordering the sections

You can reorder the position of each section on your website’s pages by clicking in one section rectangle and dragging it upward or downward while keeping your mouse pressed.

Recommended Image Sizes

Homepage slider: 730x460
Homepage banners: 510x312
Homepage featured categories: 510x370
Homepage quick links: 250x250
Homepage brand slider: 130x130
Products: 1080x1080
Category image: 1100x500
Blog: 1100x500
Store Logo Header: Maximum with: 200px height: proportional to the width

How to Configure Wide Theme

Theme Header

Additional Currencies and OpenExchangeRates App ID

Top Bar

Main Menu