How To Create An Online Clothing Store With WordPress [Tutorial]

Have you dwelled on how to create an online clothing store with WordPress theme? If you have your dream theme in mind, it’s great. In case, you’re all blank or confused then without a second thought go with Andrina WordPress Theme.

Get Free Version Of Andrina Buy Pro Version Of Andrina

A Step By Step Tutorial To Create An Online Store With WordPress Theme

Real-Time Preview of Andrina

How to create an online clothing store with Andrina WordPress theme

So, let’s take a drive on “How To Create An Online Clothing Store With Andrina WordPress Theme” without hiring and paying a hefty amount to the developer.

What to choose “Andrina Lite or Andrina Pro”?

You will definitely fall in love with Andrina Lite. But with Andrina Pro, it will a little more.

We have an answer to all your questions on “why to choose to Andrina Pro”

With Andrina Lite, you are served with the features that are giving you the best of both worlds. But there’s a lot more to explore like more colors, sliders, additional styling etc. And you get these with Andrina Pro.

There are a lot more differences which you might want to consider before making a final choice. Now have a glance at the table below which will give you the quick and complete insights.

Andrina Lite Vs Andrina Pro

Feature Free Version Pro Version

WooCommerce Compatibility
Build an online shop section with cart facility, check-out feature and more.

Advanced Typography
Change the styling of fonts, text, add colors, letter spacing, paragraph margins and more.

Price Plan Section
Compare price plans and features. This comparison table will make it easier for a customer to make a final choice.

Unlimited Featured Boxes
Add an unlimited number of featured boxed to the homepage to highlight the services and products.

Sliders on Homepage
You can add up sliders on the homepage to make it even more exciting.

2 Slides 6 Slides

Social Icons
Social icons help you in creating the social presence of your website.

4 Icons 10 Icons

Advanced Styling Options
Add up your colors, your transitions and a lot more to the webpage using this option.


Homepage Animations and Transitions
Add various transitions and animations on the home. You can also turn these effects on or off.


Live Customizer
This is a visual editing shortcut. You can edit the content directly by clicking the edit icon on the homepage.

Google Analytics Tracking Code
Google Analytics Code when integrated with the website helps in regularly tracking the website stats.


SEO Optimized
This will help in improving the website’s ranking and will definitely make a website a treat for search engines.


Homepage Blog Section
Homepage blog section can either be turned on or off as per your choice.


Dedicated Support
Get 24/7 support for all your queries.

1. Installation of WordPress Theme To Create A Clothing Store Website

For an online clothing store, we will be first installing a WordPress theme. This theme will act as a complete layout of our website. We are using Andrina here as it has got the famous 2 minutes installation.

Let us take you step by step from here :

  • Download the .zip file of the Andrina theme.
  • In the WordPress admin area, click on Appearance → Themes.
  • Under Themes option, you have to click on Add New Themes.
  • Then click on Choose File and upload the downloaded .zip file of Andrina
  • Finally, you will have to click on the button of Upload Theme to start the installation.

theme installation
Then you simply have to activate Andrina theme from the WordPress admin panel. And yes, installing a WordPress theme is that simple.

Appearance→Themes→Activate Andrina WordPress Theme

Theme Installation

2. Homepage Customization Of The Website Using WordPress Theme

Now when you have learned how to install a WordPress theme on WordPress server, we’ll start adding your customization to the homepage.

Under the admin Dashboard, you can find the option of Appearance. Once you click on it, then a drop-down sub-menu will have an option of Customize. From this real-time customizer, we’ll add the sliders, logos and all other elements to the homepage.

Admin Dashboard→Appearance→Customize (Refer the image below)

Configuring Homepage

So, the customization part is going to be more like a tutorial and an in-depth insight of Andrina WordPress Theme.

  • Start Customization on Customizer Panel

And yes, you have reached the Customize Panel. Here you are going to do all the customization.

Now we’ll be customizing Andrina to show you how to give an astonishing look to the e-commerce website.

Start Customization on Customizer Panel

This is how the entire customizing panel looks like.

Technically it is WordPress Customizer. But the latest one!

People often call it Front-End Customizer.

This is one single interface for the appearance of the website and a lot of functionalities like WooCommerce section, CSS etc.

We’ll dig this customizer panel for you in depth.

So, you’ll find the option for Custom Logo to add or modify logo of your clothing website.

Then there are also Home Page Setting and Home Page Loading Animations to create effects to welcome viewers.

Of course, you will find Slider Setting to add images and glitters on transitions on your eCommerce website.

The next in the row is going to be Featured Area, here you can decide what are the services or sections to highlight.

As we move further, there’s a Home Page Blog Section to add the featured blogs on the homepage.

Next, in WooCommerce Product Section, you can simply create a store section. Here you can add images along with price tags and various offers.

Here you will find Social Icons to add to your e-store website.

There are going to Footer Settings from where you can design the footer with drag and drop of the element.

For added functionalities, this customizer has accommodated Google Analytics Tracking Code, Captcha Setting, SEO Options.

If you are good with the codes, then go for Additional CSS. And if you are not too techy, then Styling Options in the customizer is perfect for you.

  • Add Your Business Logo To Your Clothing Website

Under the Customizer Panel, Custom Logo is the first field to work on. So, you gotta click on Custom Logo and then enter the URL paths of your logo into the appropriate fields under “Custom Logo”.

Customizer Panel→Custom Logo→Enter Url to Add New Logo; Change or Remove Logo (Refer the images below)

Add Your Business LogoAdd Your Business Logo

  • Create Awesome Layout For The Homepage

Home Page section makes your homepage dynamic. Under Home Page Settings, you can choose what to display on the homepage like a static page or latest posts.

Customizer Panel→Home Page Settings→Homepage Display

 Homepage SettingHomepage Settings

  • Create Transitions And Animations On The Homepage

Under this setting, you can either turn the loading animation on or off, depending on your taste. So, it’s a matter of a click to add or remove animations on your clothing store website.

Customizer Panel→Home Page Loading Animations Settings→On/Off

HomePage Loading AnimationHomepage loading animation

  • Add An Image Slider Using Slider Settings

Just Upload the Images to the Slider from the Customizer Panel and the images would start to appear on the Homepage of the Website.

Customizer Panel→Slider Settings

Slider panelSlider Setting

Slider Settings → Slider Animation Section 

This section is to upgrade the slider to the next level with animations, speed, text area and more. Here, you can set the transition speed for the slider. Add up the animation effects. You can further add up headings, sub-headings and text description to the slider using Slider Animation Section.

Slider Animation

Slider Settings → First Slider

Here, you can add up the image, heading, sub-heading, text description, button link and slide link to the slider.

First Slider Settings

  • Highlight Services On The Homepage With Featured Section

In the featured section on the homepage, you get box type layout where you can add a captivating image, it’s heading, and description. Then, you can attach a URL to it so, whenever clicked, it will redirect to the attached URL or link.

Customizer Panel→Home Page Feature Section

Feature SectionHomepage Feature Section

Home Page Feature Section→Feature On/Off Section

This allows you to manually turn on or off the featured section as per the needs.

Feature On/Off Section

Home Page Feature Section→First Feature Area

You can add here the image which you want to display, then its heading and description along with the redirection link.

First Feature Area

Home Page Feature Section→Unlimited Feature Box

This feature of Andrina Theme lets you create an unlimited number of featured boxes on the homepage.

Add Unlimited Feature Box

  • Feature Blogs On The Homepage To Captivate Viewers

There are 3 types of blog section which has been included in the theme so that it can be exhibited in the different formats, which will be displayed on the front page of the theme.

Customizer Panel→Home Page Blog Section

BlogBlog Section

Customizer Panel→Home Page Blog Section→Blog Section Settings

This section of Home Page Blog Section lets you add the heading of the first blog to be displayed on the homepage. Moving further, you can add the blog category. You can do the same in the second blog section. Then there is also an option to on/off the display of blog section on the homepage.

First Blog Section

  • Set-up Your Clothing Store Using WooCommerce Shop Product Section

Finally, after a whole round-up of customization, you can now give space to your clothing store on the homepage Sp, the viewers can right away shop for their favorite products on the homepage.

WooCommerce Shop Product section is the key ingredient to create an online clothing store. Using this you can display products on the homepage, their categories and more.

Customizer Panel→Home Page WooCommerce Shop Section

Home Page WooCommerce

  • Add Your Contact Details To The Website

When you are done setting up your e-store with Home Page WooCommerce Product Section, the next in the row will be Contact Details Setting. This will enable the display of your contact details such as contact number, email address on the homepage.

Customizer Panel→Contact Details Bottom Stripe

Contact Details Bottom StripeContact Details Settings

  • Make Your Web Presence Stronger With Social Icons

By entering the social links you can easily add the social icons on the homepage.

Customizer Panel→Social Icons

Social IconsSocial Icons Settings

  • Add Widgets To The Bottom Footer Widget Setting

Use this option to add copyright text on the homepage. You can also set your first footer section from here and add text or image.

Customizer Panel→Bottom Footer Widget Section

Bottom Footer Widget SettingsBottom Footer Widget Settings

Bottom Footer Widget Section→Widget Area Setting

You can make your footer section interesting by placing widgets to it. Now when the complete layout is adorned with so many elements the bottom-most footer too needs attention. So, you can add Search Widget, Contact Details and a lot more to the footer using this panel. Moreover, this section also allows you to either turn on/off the widget display on the homepage.

Widget on/off Settings

Bottom Footer Widget Section→Copyright Text

This section in the footer will help people know about your authenticity. You simply have to input the text in the text area, save it, it’s done!

Copyright Text Settings

  • Add Google Analytics Tracking Code To Get The Real-time Stats Of Your Website

Add Google Analytics tracking code here from the Customize Panel to track your website statistics regularly.

Customizer Panel→Google Analytics Tracking Code

Google Analytics Tracking CodeGoogle Analytics Tracking Code

  • Use Captcha Settings On Contact Form For Anti-spamming

Set your Google reCaptcha Site key and Secret key for contact page Template. You can on or off your reCaptcha field with on/off options.

Customizer Panel→Captcha Setting For Contact Form

Captcha Setting for Contact FormCaptcha Settings

  • Styling Option And Custom CSS For Additional Styling Elements

You can change the style of your website with the “Styling Options”. We have provided eight color options with Andrina theme, you can change them according to your requirement. There is Custom CSS option where you can write HTML or CSS code and make small tweaks to the website.

Customizer Panel→Styling Options

Styling OptionsStyling Option Settings

  • SEO Settings To Make Your Clothing Website Search Engine Friendly

This section specifically makes your website search engine friendly. Here you can meta keywords, meta description, meta author name.

Customizer Panel→SEO Options

SEO OptionsSeo Settings

  • Site Identity To Globalize Your Brand With Unique Logo

Use this option to add Site Title, Tagline and Site Icon on your website tab. You can also upload a site icon by selecting an image.

Customizer Panel→Site Identity

Site Identity

  • Add A Background Color For A Wow Impact

This feature is to add your style taste to your website. It gives you a palette from where you can pick any color to fill the background of your clothing website’s homepage.

Customizer Panel→Colors

Add Background color

  • Add A Background Image For Better Appearance

So, in the above feature, we learned how to add background color and here we’ll learn how to add a custom background image to the homepage.

Customizer Panel→Background Image

Add Background Image

  • Build Menu For Your Online Clothing Store

Andrina Theme had a prebuilt feature of displaying all the pages and subpages in the menu.

However, you can also build a custom menu using the Menus option under the “Appearance” Section.

Menu Section→Create a New Menu→Type Menu Name→Check Mark the Desired Pages on Menu → Add to Menu

For making a menu, you need to get to the menu section first. Then, you have to click on create a new menu button. Second is naming your new menu in the Menu Name Tab. After this, on the left, a checkbox section will appear with the pages. So, you have to checklist the pages you would want in your menu. Finally, you have to click on Add New Menu Button. This is how you will create a new menu.

Building Dropdown Menus

For a drop-down menu, you have to either create a new menu following the above steps or can modify a menu. You simply have to look for the structure and then whatever you want it to drop down you can shift it to the right side.(Refer the image below)


  • Add Widgets To Your Clothing Website

In your clothing website, you can add widgets either in the sidebar or in the footer section. However, the path to widget section goes like:


Adding Widgets in Sidebar

For adding widgets in the sidebar all you have to do is select Widgets option from Appearance panel, then drag the widget you need & drop it in primary widgets area or in secondary widgets area according to your requirement, at the end click save button and your widgets are ready to use.

Dashboard➡Appearance➡Widgets➡Drag & Drop Widgets in Primary/Secondary Widget Area

(Refer the image below)

Sidebar widgets

Adding Widgets In Footer

For adding widgets in Footer you can follow the same steps of adding widgets to the sidebar. However, we’ll give you a quick glance of it.

Appearance PanelWidgetsDrag & Drop Widgets to the Footer AreaSave Button

(Refer the image below)

Footer Widget

We’ve come to the closing of our step by step tutorial on how to create an online clothing store with WordPress theme. Now, we’re sure that this DIY is going to give you an edge over your competitors with an online platform.

While creating a website with Andrina, if you need any kind help, you can contact us here:

Contact Us

Read More Articles

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.