ShopFlow e-commerce theme documentation

What you get

Everything below is controlled from Appearance → Customize. No code is needed.

Requirements

Check these with your hosting provider before installing.

Installation

Upload the theme zip file, then activate it. Use the zip named shopflow-ecommerce.zip, not the folder inside it.

License activation

ShopFlow needs an active license. Without one the storefront shows a maintenance page to visitors, while the admin area stays open for you.

1. After activation you land on the license screen. If you do not, open Appearance → Theme License.
2. Enter your license key and the email used for purchase, then press Activate.
3. When the status turns to Active the storefront opens again and demo import unlocks.

Import demo content

Loads 39 sample products in 10 categories, pages, menus and the default contact details so you can edit instead of starting empty. The product pictures are original illustrations bundled with the theme.

1. Activate your license first.
2. Open Appearance → Demo Content and press Import.
3. Wait until the progress bar finishes. Do not close the tab.

Demo templates

Apply a complete homepage layout and style in one click from Appearance → Demo Content → Demo Templates. A template changes the look only. Your products, pages, menus, logo and contact details are not touched, and you can fine-tune everything in the Customizer afterwards.

1. Install the demo content first so the pages show real products and categories.
2. Press Preview to see a template on your own site. A bar at the bottom shows Apply this template and Exit preview. Nothing is saved while you preview, and only administrators see the preview.
3. Press Apply template on the one you like. The active template shows an Active label.
4. Open your homepage. Change anything you want in Appearance → Customize.

WooCommerce setup

Run the WooCommerce wizard first, then create the standard pages.

• Set your currency, shipping and payment methods in WooCommerce → Settings.
• Make sure Shop, Cart, Checkout and My Account pages exist under WooCommerce → Settings → Advanced.
• Set Settings → Reading → Your homepage displays → A static page and choose the demo Home page. ShopFlow draws the homepage from front-page.php.
• Set permalinks to Post name in Settings → Permalinks.

Menus & widget areas

Create menus in Appearance → Menus and assign a location.

Widget areas in Appearance → Widgets: Blog Sidebar and Footer Column 1 – 4.

Customizer map

Open Appearance → Customize. All theme options sit in panels that start with “ShopFlow”.

Header & top bar

Logo, search, account, cart and optional language and theme switches.

• Logo: Site Identity → Logo. If none is set, the bundled ShopFlow logo shows.
• Dark mode logo: upload a light-colored version in ShopFlow Layout → Logo for dark mode. It replaces the normal logo when a visitor switches to dark mode.
• Top bar: toggle it under ShopFlow Header. The message defaults to “Free shipping on orders over $50”.
• Brand fill on the top bar: enable “Use the brand fill for the top bar and the newsletter band” under ShopFlow Colors.

Homepage style

Choose how the homepage is arranged in ShopFlow Homepage → Sections & Titles → Homepage style.

Every section keeps its own on/off switch and text fields, so you can still hide or rename anything.

Hero banner

Pick one of five layouts in ShopFlow Homepage → Hero Layout & Banners.

Video banner

1. Set Hero layout to Video banner (play video).
2. Upload an MP4, or paste a YouTube / Vimeo / MP4 link.
3. Add a poster image.
4. Choose how it plays: poster with a Play button (plays on click), or plays by itself, muted and looping, like a moving background.
5. Heading, text and overlay use the banner settings in the same section.

Features strip

The row of short promises under the hero (shipping, payment, returns, support). Edit icon, title and text for each item.

Open ShopFlow Homepage → Features Strip.

Categories grid

Shows product categories as tiles. Choose how many appear first and let visitors reveal the rest.

• Columns: tiles per row on desktop.
• Show first: how many tiles are visible at start.
• Show more button: when the category count is higher than “Show first”, a button reveals the others without reloading the page.
• Category images come from Products → Categories → Thumbnail.

Extra promo banner sections

Add banner rows between homepage sections. Each row has its own images, links and number of columns.

Positions available:

For each section: switch it on, add up to the allowed number of banners (image, link, alt text) and choose 1, 2 or 3 columns. Empty banners are skipped.

Product cards

Compact cards with a framed “Quick order” area under the price.

Card options sit under ShopFlow Product Cards: the Buy now button text, pre-order for out-of-stock items, and the pre-order button text.

Quick order & Buy now

On a single product page the Quick order frame sits below Add to cart and Buy now. A customer enters name, phone and address and places the order on the spot.

Category banners

Give each product category its own banner image on its archive page.

1. Go to Products → Categories and edit a category.
2. Find Category banner, press Select image and pick a wide image (about 1600×400).
3. Optional: add a banner link. Press Update.

Categories without a banner show the default shop heading.

My Account & registration

The account page shows Login and Register side by side on desktop and as tabs on mobile.

Registration is switched on by the theme through ShopFlow Checkout → Show “Create an account” on My Account. The WooCommerce setting is overridden for you.

Google & Facebook login

Add the sign-in buttons under ShopFlow Social Login. You need app credentials from each provider.

Mobile bottom bar

An app-style tab bar fixed to the bottom of phone screens. You choose which buttons show.

PWA & install pop-up

Visitors can add your store to their home screen as an app. ShopFlow serves the web app manifest and service worker for you.

Setup

1. Make sure the site runs on HTTPS.
2. Open ShopFlow Footer and tick Installable web app (PWA). Set the app text.
3. Upload a square 512×512 PNG app icon, or keep the bundled one.
4. Tick Show an “Install our app” pop-up and choose its position (header, footer or center), delay, and how many days to wait after it is closed.

Footer

Logo with a text about your business, About and Help columns, a Get in Touch column, a download column, and a bottom bar with the copyright and payment methods. Edit the text and titles in ShopFlow Footer.

SMTP mail setup

Send order emails, password resets and contact form messages through your own mail server. Open Appearance → SMTP Mail.

1. Press a quick-fill button (Gmail, Outlook, SendGrid, Mailgun or Brevo), or type your host and port.
2. Choose encryption: TLS with port 587, or SSL with port 465.
3. Enter the username and password. For Gmail or Microsoft with 2-step verification, create an App Password.
4. Set From email to an address on the same account or domain, tick Enable and save.
5. Enter your address under Send a test email and press Send test. If it fails, the server conversation is shown.

WhatsApp chat button

Tick Show a floating WhatsApp chat button in ShopFlow Header, enter the number with the country code (for example 8801821124025) and set the button text. On phones it becomes a round icon above the bottom bar.

Language switcher

Enable under ShopFlow Language. Theme texts are translated automatically. For text you typed yourself, write both languages in the same field, separated by ||:

Free shipping over $50 || ৫০ ডলারের উপরে ফ্রি ডেলিভারি

Place the switcher in the header, top bar, or both. First-time visitors can start in English, Bengali or the WordPress site language.

Dark mode

Tick Show a light/dark toggle in the header under ShopFlow Layout. The visitor’s choice is remembered in their browser.

Troubleshooting

Changelog

Support

When you write to support, include your WordPress and PHP version, theme version and a screenshot of the problem.