August 23, 2019
How To Set Up An Online Store On WordPress: Step by Step Tutorial

How To Set Up An Online Store On WordPress: Step by Step Tutorial


Hi, my name is Robert from ThemeIsle.com and
in this tutorial I will show you how to setup ShopIsle PRO WordPress theme so that you “Sell
your products wisely” with your online store.. INTRO Until the end of this video, you’ll know how
to create every section, step by step, starting with the modern and responsive full-screen
slider, and continuing with the main menu then scrolling down through every section
to the footer area. You’ll see how I create the Blog section with
some demo content with images and text. Use this for your content marketing strategy
and write compelling articles about your products, Google will love that. Moreover, you will discover how easy it is
to activate this helpful Quick View Button, that appears below the add to cart button
on hovering over the image. This button will open the product details
in a lightbox without leaving the current page. Notice that you can jump right to your preferred
section of this video using the carefully created timestamps in the description below. INSTALL SHOPISLE PRO Let’s start with the theme installation. Head to the Appearance / Themes in your WordPress
dashboard then click Add New. Upload the Theme archive then click Install
Now. After the installation is complete, enter
your license key in the settings section. You’ll find it in the purchase history from
your themeisle.com account. THE ONLINE SHOP The next step is about WooCommerce, the most
popular eCommerce platform on the web. If you want to watch a step by step tutorial
about WooCommerce, click on the suggested video in the right top corner. After you install WooCommerce, follow the
instructions to publish more products then go back to the theme customizer. I have four published products that we will
use in this tutorial, complete, with a short and full description, price and discount,
category, tags, product image and a gallery with more images. THE FRONT PAGE If the home page does not display anything
like the demo, don’t worry! I’ll show you how to do it immediately. Add a new page with a title like home or front,
leave it empty and select the front page template from the drop-down list, then hit publish. Now, go to Static Front Page section in your
customizer then tick a static page to be your front page, select the name of your new page
from the drop-down list then click to Save & Publish your settings. SITE IDENTITY Let’s continue this tutorial with an important
step, the Site Identity. It’s actually very easy to do it using a 300px
wide and 90 px tall custom logo, a compelling title and subtitle then finish by uploading
a custom Site Icon. Save & Publish COLORS The colors section is where you can change
the default color scheme to your preferred one using the options from the drop down,
or by selecting the colors through the color picker for the header, background, navbar
background, menu items, menu items on hover and footer background. If you wish to revert the color back to its
original state just hit the clear button near the hex value! HEADER The image uploaded here will be displayed
on every single page, including the blog page. Set a custom image here according to your
field of activity and the suggested dimensions. FRONT PAGE SECTIONS Let’s start customizing the Frontpage Sections. I would like to mention that you can change
the position of a section anytime, with drag and drop. This is how you’ll move the services section
under the slider section, as in the demo. F.P. SECTIONS/SLIDER Here is the full-screen Image Slider Section
and we can change everything with our own content. Click on the existing slide to reveal options
that are inside, then upload a new full hd image. Change the title and subtitle using the text
fields, set a button link and type a button label then open the next slide and do the
same. If you plan to display more three slides,
just click on the Add New Field button below. Notice that you can replace the homepage slider
with any plugin you like, just copy the shortcode generated and paste it here. Remember to hit Save & Publish when you’re
done. F.P. SECTIONS/BANNER Here are three active banners for this section
and you can change the images within by uploading a new one. Type a custom link in the button link field,
do the same for every banner you use, add a new field if you wish and move to the next
step. F.P. SECTIONS/PRODUCTS Now click on Products Section. Here is the section that helps you display
some published products on the front page. Be sure that the “hide products section” is
unchecked, type a title then choose the category of products to be displayed. You may notice one more field named WooCommerce
shortcode; paste your WooCommerce shortcode here to display a custom selection of your
products. Save & Publish! F.P. SECTIONS/VIDEO Use a video from your youtube channel to promote
a new product in this section as background. Type a title then paste your youtube video
link here and set a custom video thumbnail if needed. Choose the padding of this section from 130
to 400 pixels, save the settings then move to the next section. F.P. SECTIONS/RIBBON The Ribbon Section is where you can add a
full-width background image under a custom text and call to action button. Set the link for the button and you are done
with this section. F.P. SECTIONS/SERVICES This is actually the first section in our
demo when you start scrolling down, and you can drag it there like this. Now click to edit the section, set a title,
a subtitle then edit the content from every service box. Add a new Service Box if needed then save
your work. F.P. SECTIONS/PRODUCT SLIDER A second section that can display some products
on the front page as a slider is this. Tick if you wish to hide this section, and
do the same to hide it on a single product page. F.P. SECTIONS/ MAP SECTION In order to have a usable shortcode for this
section, you need to install and activate the Intergeo WordPress Google Maps Plugin. After the installation is complete, go to
Intergeo Maps options in your WordPress dashboard settings. Click to add a new map then drag and zoom
the center of the map to your location. Click to create the map then copy the generated
shortcode and paste it in the map section of your theme customizer. You have a full-screen map that shows the
location of your business on the front page now. F.P. SECTIONS/ CATEGORIES SECTION This is a special section that can help you
promote Popular Categories of your products, but you need some time to see your products
here. F.P SECTIONS/ SHORTCODES SECTION Use this section to display an email signup
form, for example, or use it for any other shortcode that can display content in a custom
style. FOOTER The footer section of your website will be
visible on every page or post so keep in mind to populate it with the copyright information
and some social media links. ADVANCED OPTIONS In the Advanced Options section, you can set
a custom content for your 404 error page with a custom background image, title, text and
button. Select the font size from the drop-down menu
then hit to save your work. BACKGROUND IMAGE If you wish to set a custom background image
for all of your pages and posts, this section is for you. Upload your image then set the de default
preset, image position, size and tick to repeat and scroll with a page if needed, then move
to the next section. CONTACT AND ABOUT US PAGE Please click to another suggested video in
the right top corner of this screen to watch how easy it is to create those pages. THE BLOG PAGE In order to have a blog page you need to do
two things: 1. Create and publish some blog posts. 2. Create a new page named blog then select Blog
Template from the drop-down list and publish it. The blog page is ready now and you can place
it in your header menu as in our demo. MENU Finishing touches comes last and one more
step is to create the menu. Head to Menus Section then click to add a
menu. Name it as you wish and click Create Menu. Tick the display location and menu options
then hit save and publish. Now click to add items in that menu then click
to add as many items you want. You can use any element to create sub-menus
by dragging it under an item, to the right. WIDGETS Choose your preferred widgets for the footer
area that will display useful information about your business, links to Therms and Services
pages, top rated products and more. These widgets are displayed in the footer
area of your website on any page or post. QUICK VIEW BUTTON Now, are you ready for the promised step? Here is how you can activate the Quick View
Button when hovering over the product image in your online shop. It’s easy, just install the WooCommerce Quick
View plugin then activate it! Everything looks great and works as in the
demo, and your online shop is ready for more content but more importantly, for new clients.

10 thoughts on “How To Set Up An Online Store On WordPress: Step by Step Tutorial

  1. Thanks for your honest interactions! I am happy to answer any questions you might have about ShopIsle WordPress Theme mentioned in this video

  2. Hi, Robert. Just want to know from where can I download the Shopisle latest version v 2.2.14 ?? I went to Themeisle.com and just could find the old version v1.1.20 which has problems with woocommerce 3.0. Thank you.

  3. No, I mean the free version. As I´m still starting to evaluate the theme. But I really doubt version 1.1.20 will help me because is full of bugs. I was seeing the change log and it lists a ton of changes after that version. I was looking for a more updated version but was unable to find one from your site. Could you please point out from where can I download a more updated version?

  4. I bought ShopIsle Pro a couple weeks ago and the e-commerce site I'm making is gorgeous! I have a question. Can I create two pages with the Contact Page template? Or will that blow up the site? I want to have two different pages (Contact Us and Hours and Directions) to both have the full map across the bottom, so I was hoping I could use the template twice.

  5. 13+ Free WooCommerce WordPress Themes: https://www.youtube.com/watch?v=NiGjh_-Lvdk

  6. Hello, how to display categories? It is quite confusing there is no option to drag the categories to display!

Leave a Reply

Your email address will not be published. Required fields are marked *