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
- Top Bar
- Main Menu
- Displaying Products in the Home Page
- Store Info
- Home Page Banners section
- Setting Up your Instagram Feed section in Home Page
- Blog Section
- Home Slider Section
- Product Page
- Cart and Checkout Pages
- Estimated Shipping on Cart Page
- New Customer Message
- Top Bar Message
- How to Change the Favicon Icon
- Fonts and Titles
- Custom popups
- How to set up the subscription form
- Reordering the sections
- Recommended Image Sizes
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.
Icons for social networks, Youtube and Whatsapp
Will appear if you have that information in your Admin Panel > Settings > General
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:
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:
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 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.
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:
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.
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.
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 Share Buttons on Products
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.
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