Skip to main content

Set up a WordPress shop with the Vessel theme

Details
Category: Templates
Hits: 32

This guide takes a WordPress website from nothing to a complete shop with HikaShop and the Vessel template, here in its WordPress edition, a block theme: installing both, choosing a style in the Site Editor, creating the menu, building the home page with Vessel's blocks, and adjusting the HikaShop settings that matter for the look of the shop. Every screenshot was taken on a real site while following these steps. You can see Vessel on the Vessel demo.

The top of the home page built in this guide

 

Before you start

  • WordPress 6.7 or later and PHP 8.1 or later. Vessel for WordPress is a block theme: you set it up in Appearance > Editor (the Site Editor), not in the Customizer.
  • HikaShop for WordPress, in its latest version. Vessel works with the Starter, Essential and Business editions; the product filters of the Shop page (step 7) only exist in HikaShop Business.
  • The two packages, from your downloads on our website: the HikaShop zip and vessel.zip (the WordPress theme of Vessel; tpl_vessel.zip is the Joomla template).
  • If you are changing the theme of a site that is already online, make a backup first, and do the work on a copy of the site if you can.

In this guide the shop is called Atelier Lumen. The screenshots show the products of our demo shop: yours will show your own categories and products.

 

1. Install HikaShop

  1. In the WordPress administration, open Plugins > Add Plugin, click Upload Plugin, choose the HikaShop zip and click Install Now.
  2. Click Activate Plugin. A HikaShop menu appears in the administration.

Upload the HikaShop zip

HikaShop is installed and active

On activation HikaShop creates the pages of the shop: Shop (your categories and products, at /shop/), Checkout, My Account and Register, and a Cart page left as a draft. You will use them in the menu and the footer. Add your categories and products in HikaShop > Products and HikaShop > Categories (see Create your first product), with a picture each: the home page and the listings of Vessel are built around pictures.

 

2. Install and activate Vessel

  1. Open Appearance > Themes, click Add New Theme, then Upload Theme, choose vessel.zip and click Install Now.
  2. Click Activate (or, in Appearance > Themes, hover the Vessel card and click Activate).

Vessel in Appearance > Themes

Your site now has Vessel's header (menu on the left, your shop's name in the middle, search, account and cart icons on the right) and its dark footer. Until you do steps 5 and 6 it looks like this: the menu lists every page of the site in alphabetical order, the "Sample Page" of WordPress included, and the home page shows your latest posts. Both are normal on a new site.

Vessel just activated, before the menu and the home page

 

3. Your shop's name and logo

Open Appearance > Editor and click Identity:

  • Site title: your shop's name. Vessel writes it in the header and the footer, in the headline font, when there is no logo. The copyright line at the bottom of the footer also uses it, with the current year.
  • Site tagline: shown under the name in the footer.
  • Site logo: your logo picture. Once you choose one, Vessel shows it instead of the site title, in the header and the footer.
  • Site icon: the icon of the browser tab, square, at least 512 x 512 pixels.

The Identity panel of the Site Editor

The same settings are in Settings > General (title and tagline).

 

4. Choose a style: colours and fonts

In Appearance > Editor, click Styles, then Browse styles. Vessel has 15 styles, the same presets as the Joomla template (Luxury, Editorial, Wellness, Nature, Coastal, Vintage, Real estate, Horizon, Corporate, Foody, Streetwear, Roadwork, Futuristic, Nordic, Computer): each one sets the colours and the two fonts together. Click one to see your site with it on the right, then click Save at the top. You can compare them on the Vessel demo with its "Use your own style" button.

Browse styles: the 15 styles of Vessel

  • Your own colours: in Styles > Colors > Edit palette, the Theme colours are the ones Vessel draws with: Ink for the text, the footer and the buttons, Paper for the page, Bone for the alternate sections, Gold for the stars, prices and highlights, Line for the dividers, Mute for the secondary text, Ok and Danger for the messages. Click a colour to change it. Start from the style closest to what you want, then adjust. A dark Paper works too: the HikaShop boxes (cart, checkout, account) follow it.
  • The fonts: Vessel uses two, Serif (headings) for the titles and Sans (body) for the text, listed in Styles > Typography. They change with the style you pick: to get other fonts, pick the style that has them.
  • Vessel downloads the two fonts once to your site (in wp-content/uploads/vessel-fonts/), so your visitors' browsers never contact Google Fonts.

Edit palette: the colours of Vessel

Typography: the two fonts of the style

The settings of the Joomla template's Layout and Home page effects tabs have no equivalent here: in WordPress, Vessel always has the sticky header, the small pictures of a product's gallery under its main picture, and the short animation of each home page section as the visitor scrolls to it.

 

5. Create the menu

The header menu is a WordPress navigation menu. Open Appearance > Editor > Navigation. On a new site there is a menu listing all your pages: click it, then Edit (or the three dots, then Edit), and in the editor:

  • remove the pages a visitor does not need in the header (Sample Page, Register, My Account: the account has its icon on the right of the header);
  • with the + button, add the Shop page and links to your main categories: open a category on your site and paste its address (for example /shop/category/12-coffee-tea/) in the link;
  • drag the items in the order you want, then Save.

The main menu of the shop

On phones Vessel folds the menu behind a menu button, at the top right:

The menu on a phone

 

6. Build the home page

The home page of Vessel is a page made of blocks, which Vessel gives you ready as a block pattern called Home: a hero banner, category tiles, a product grid, an editorial split, a materials row and a journal row.

  1. Open Pages > Add Page and give it the title Home (the title is not shown on the home page).
  2. Click the + at the top left (Block Inserter), the Patterns tab, then Vessel, and click the Home pattern. Its blocks are added to the page.
  3. Click Publish.
  4. Open Settings > Reading, choose Your homepage displays: A static page, Homepage: Home, and if you write posts, a Posts page (for example a page called Journal). Click Save Changes.

The Home pattern of Vessel in the Block Inserter

The Home page as the homepage

The pattern shows the pictures and the categories of Vessel's own demo, which your site does not have: the pictures appear broken and the category links lead nowhere until you replace them. Go through each section as below. Every block can be changed by clicking it; a section you do not want is removed by selecting it (the Group around it, with the breadcrumb at the bottom of the editor) and pressing the Delete key.

Just inserted: the pictures of the demo are missing

The code of each section is given below, with addresses of our demo for the pictures and the links. To paste one: in the editor, open the three dots at the top right, Code editor, paste the code where you want it, then Exit code editor, and replace the pictures and the links as said for that section. Upload your pictures in Media > Add Media File.

The hero banner

A small line above the title, a large title, a sentence and a button. Click each text to write yours. Click the button, then the link icon of its toolbar, to point it to your Shop page.

<!-- wp:group {"tagName":"section","className":"vessel-banner full-width vessel-reveal vessel-reveal--up"} -->
<section class="wp-block-group vessel-banner full-width vessel-reveal vessel-reveal--up">
  <!-- wp:group {"className":"container"} -->
  <div class="wp-block-group container">
    <!-- wp:paragraph {"className":"vessel-eyebrow"} --><p class="vessel-eyebrow">Spring · 1974</p><!-- /wp:paragraph -->
    <!-- wp:heading {"level":1,"className":"vessel-display"} --><h1 class="vessel-display">Quiet things,<br>made to last.</h1><!-- /wp:heading -->
    <!-- wp:paragraph --><p>Our spring collection is cut from undyed wool, washed cashmere, and Belgian linen, pieces that read softer with every season they are worn.</p><!-- /wp:paragraph -->
    <!-- wp:buttons --><div class="wp-block-buttons"><!-- wp:button {"className":"is-style-fill"} --><div class="wp-block-button is-style-fill"><a class="wp-block-button__link wp-element-button" href="/shop/">Discover the collection</a></div><!-- /wp:button --></div><!-- /wp:buttons -->
  </div>
  <!-- /wp:group -->
</section>
<!-- /wp:group -->

The category tiles

Three tiles, each a picture, a name and a small line, with a link to a category. For each tile:

  • click the picture, then Replace in its toolbar, and choose your picture in the Media Library (a tall picture, 3 by 4, fits best; the tile crops it);
  • click the link icon of the picture's toolbar and paste the address of your category (open the category on your site and copy its address);
  • click the name, write yours, select it and give it the same link with the link icon.

To get a fourth tile, select a tile (its Group) and duplicate it with Ctrl+Shift+D (Cmd+Shift+D on a Mac): the row shows three tiles per line.

<!-- wp:group {"tagName":"section","className":"vessel-section vessel-section-categories vessel-reveal vessel-reveal--up"} -->
<section class="wp-block-group vessel-section vessel-section-categories vessel-reveal vessel-reveal--up">
  <!-- wp:group {"className":"container"} -->
  <div class="wp-block-group container">
    <!-- wp:heading {"level":2,"className":"vessel-section-title"} --><h2 class="wp-block-heading vessel-section-title">Shop the categories</h2><!-- /wp:heading -->
    <!-- wp:group {"className":"vessel-home-tiles","layout":{"type":"default"}} -->
    <div class="wp-block-group vessel-home-tiles">
      <!-- wp:group {"className":"vessel-home-tile","layout":{"type":"default"}} -->
      <div class="wp-block-group vessel-home-tile">
        <!-- wp:image {"className":"vessel-home-tile-media","linkDestination":"custom","sizeSlug":"large"} -->
        <figure class="wp-block-image size-large vessel-home-tile-media"><a href="/shop/category/12-coffee-tea/"><img src="/wp-content/uploads/2026/11/coffee-tea.jpg" alt="Coffee and tea"/></a></figure>
        <!-- /wp:image -->
        <!-- wp:heading {"level":3,"className":"vessel-home-tile-name"} --><h3 class="wp-block-heading vessel-home-tile-name"><a href="/shop/category/12-coffee-tea/">Coffee &amp; tea</a></h3><!-- /wp:heading -->
        <!-- wp:paragraph {"className":"vessel-home-tile-meta"} --><p class="vessel-home-tile-meta">Shop the collection</p><!-- /wp:paragraph -->
      </div>
      <!-- /wp:group -->
      <!-- wp:group {"className":"vessel-home-tile","layout":{"type":"default"}} -->
      <div class="wp-block-group vessel-home-tile">
        <!-- wp:image {"className":"vessel-home-tile-media","linkDestination":"custom","sizeSlug":"large"} -->
        <figure class="wp-block-image size-large vessel-home-tile-media"><a href="/shop/category/14-home/"><img src="/wp-content/uploads/2026/11/home.jpg" alt="Home"/></a></figure>
        <!-- /wp:image -->
        <!-- wp:heading {"level":3,"className":"vessel-home-tile-name"} --><h3 class="wp-block-heading vessel-home-tile-name"><a href="/shop/category/14-home/">Home</a></h3><!-- /wp:heading -->
        <!-- wp:paragraph {"className":"vessel-home-tile-meta"} --><p class="vessel-home-tile-meta">Shop the collection</p><!-- /wp:paragraph -->
      </div>
      <!-- /wp:group -->
      <!-- wp:group {"className":"vessel-home-tile","layout":{"type":"default"}} -->
      <div class="wp-block-group vessel-home-tile">
        <!-- wp:image {"className":"vessel-home-tile-media","linkDestination":"custom","sizeSlug":"large"} -->
        <figure class="wp-block-image size-large vessel-home-tile-media"><a href="/shop/category/16-jewellery/"><img src="/wp-content/uploads/2026/11/jewellery.jpg" alt="Jewellery"/></a></figure>
        <!-- /wp:image -->
        <!-- wp:heading {"level":3,"className":"vessel-home-tile-name"} --><h3 class="wp-block-heading vessel-home-tile-name"><a href="/shop/category/16-jewellery/">Jewellery</a></h3><!-- /wp:heading -->
        <!-- wp:paragraph {"className":"vessel-home-tile-meta"} --><p class="vessel-home-tile-meta">Shop the collection</p><!-- /wp:paragraph -->
      </div>
      <!-- /wp:group -->
    </div>
    <!-- /wp:group -->
  </div>
  <!-- /wp:group -->
</section>
<!-- /wp:group -->

The product grid

A title and a HikaShop Products / Categories block, which shows your products and updates by itself. Vessel sets it up when it is activated: your eight latest products, from every category, four per row. To change what it shows:

  1. Click the block, open the settings sidebar (the square icon at the top right) and click Configure display options in its HikaShop Products panel.
  2. In the window that opens: Div / Grid, 4 columns and 2 rows; Image width and Image height 400; Margin 0, Border No, Rounded corners No.
  3. In Data display: Type of content Product; Ordering field product_created and Ordering direction Descending for your latest products (or product_sales for your best sellers, or Random items); Sub elements filter: All sub elements, so that the products of every category under the main category show.
  4. Click Save Options, then save the page.

The HikaShop Products block and its Configure display options button

Div / Grid: 4 columns, 2 rows

Data display: latest products of every sub-category

The same window has what each product box shows (price, add to cart button, quantity field, wishlist...): set them to No for a quieter grid. With a version of Vessel older than 1.0.18, the block may show nothing until you set its Sub elements filter to All sub elements: it then shows only the products placed directly in your root category. Pasting the code below adds a new HikaShop Products block, with settings of its own: set it up the same way.

<!-- wp:group {"tagName":"section","className":"vessel-section vessel-section-featured vessel-reveal vessel-reveal--up"} -->
<section class="wp-block-group vessel-section vessel-section-featured vessel-reveal vessel-reveal--up">
  <!-- wp:group {"className":"container"} -->
  <div class="wp-block-group container">
    <!-- wp:heading {"level":2,"className":"vessel-section-title"} --><h2 class="wp-block-heading vessel-section-title">New arrivals</h2><!-- /wp:heading -->
    <!-- wp:hikashop/products {"align":"wide"} /-->
  </div>
  <!-- /wp:group -->
</section>
<!-- /wp:group -->

The editorial split

A title and a text beside a picture, to tell the story of your shop, on the Bone colour. Write your text, and replace the picture (click it, Replace); it is cropped 4 by 5.

<!-- wp:group {"tagName":"section","className":"vessel-section vessel-section-editorial vessel-section-bone vessel-reveal vessel-reveal--up"} -->
<section class="wp-block-group vessel-section vessel-section-editorial vessel-section-bone vessel-reveal vessel-reveal--up">
  <!-- wp:group {"className":"container"} -->
  <div class="wp-block-group container">
    <!-- wp:columns {"verticalAlignment":"center"} -->
    <div class="wp-block-columns are-vertically-aligned-center">
      <!-- wp:column {"verticalAlignment":"center"} -->
      <div class="wp-block-column is-vertically-aligned-center">
        <!-- wp:heading {"level":2,"className":"vessel-display"} --><h2 class="wp-block-heading vessel-display">A house that stays small on purpose.</h2><!-- /wp:heading -->
        <!-- wp:paragraph --><p>We make a short collection each season, in small runs, from mills we have worked with for years. Nothing is rushed, and nothing is made to be replaced.</p><!-- /wp:paragraph -->
      </div>
      <!-- /wp:column -->
      <!-- wp:column {"verticalAlignment":"center"} -->
      <div class="wp-block-column is-vertically-aligned-center">
        <!-- wp:image {"aspectRatio":"4/5","scale":"cover","sizeSlug":"large","className":"vessel-editorial-image"} -->
        <figure class="wp-block-image size-large vessel-editorial-image"><img src="/wp-content/uploads/2026/11/workshop.jpg" alt="In the atelier"/></figure>
        <!-- /wp:image -->
      </div>
      <!-- /wp:column -->
    </div>
    <!-- /wp:columns -->
  </div>
  <!-- /wp:group -->
</section>
<!-- /wp:group -->

The materials row

A title and three columns, each a small title and a sentence: your materials, your values, your services. Click the texts to write yours.

<!-- wp:group {"tagName":"section","className":"vessel-section vessel-section-materials vessel-reveal vessel-reveal--up"} -->
<section class="wp-block-group vessel-section vessel-section-materials vessel-reveal vessel-reveal--up">
  <!-- wp:group {"className":"container"} -->
  <div class="wp-block-group container">
    <!-- wp:heading {"level":2,"className":"vessel-section-title"} --><h2 class="wp-block-heading vessel-section-title">Notes from the atelier</h2><!-- /wp:heading -->
    <!-- wp:columns -->
    <div class="wp-block-columns">
      <!-- wp:column --><div class="wp-block-column"><!-- wp:heading {"level":3} --><h3 class="wp-block-heading">Undyed cashmere</h3><!-- /wp:heading --><!-- wp:paragraph --><p>Two-ply, lightly brushed, left the colour of the goat.</p><!-- /wp:paragraph --></div><!-- /wp:column -->
      <!-- wp:column --><div class="wp-block-column"><!-- wp:heading {"level":3} --><h3 class="wp-block-heading">Belgian linen</h3><!-- /wp:heading --><!-- wp:paragraph --><p>Woven in Kortrijk, softened by wear rather than chemicals.</p><!-- /wp:paragraph --></div><!-- /wp:column -->
      <!-- wp:column --><div class="wp-block-column"><!-- wp:heading {"level":3} --><h3 class="wp-block-heading">Washed wool</h3><!-- /wp:heading --><!-- wp:paragraph --><p>Garment-washed for an aged hand from the first wear.</p><!-- /wp:paragraph --></div><!-- /wp:column -->
    </div>
    <!-- /wp:columns -->
  </div>
  <!-- /wp:group -->
</section>
<!-- /wp:group -->

The journal row

Your three latest posts, with their featured image, their title and their excerpt. It fills itself from Posts: give each post a Featured image (in the post's settings sidebar) and an excerpt. Without any post, the section shows only its title: write a post or remove the section.

<!-- wp:group {"tagName":"section","className":"vessel-section vessel-section-journal vessel-section-bone vessel-reveal vessel-reveal--up"} -->
<section class="wp-block-group vessel-section vessel-section-journal vessel-section-bone vessel-reveal vessel-reveal--up">
  <!-- wp:group {"className":"container"} -->
  <div class="wp-block-group container">
    <!-- wp:heading {"level":2,"className":"vessel-section-title"} --><h2 class="wp-block-heading vessel-section-title">Journal</h2><!-- /wp:heading -->
    <!-- wp:query {"queryId":1,"query":{"perPage":3,"postType":"post","inherit":false,"orderBy":"date","order":"desc"},"className":"vessel-journal-grid"} -->
    <div class="wp-block-query vessel-journal-grid">
      <!-- wp:post-template {"layout":{"type":"grid","columnCount":3}} -->
      <!-- wp:post-featured-image {"isLink":true} /-->
      <!-- wp:post-title {"isLink":true,"level":3} /-->
      <!-- wp:post-excerpt /-->
      <!-- /wp:post-template -->
    </div>
    <!-- /wp:query -->
  </div>
  <!-- /wp:group -->
</section>
<!-- /wp:group -->

The whole home page:

The whole home page

 

7. The Shop page and its filters

The Shop page shows your categories, then the products of the category the visitor opens; the product pages open under it (/shop/product/...). Vessel has a template for it with a filter column on the left: open Pages, edit Shop, and in the Page tab of the settings sidebar click Template, Change template, then Shop (with filters), and Save. The template also hides the page title "Shop" above your listings and products.

The Shop (with filters) template

The column shows the filters of HikaShop Business, made in HikaShop > Display > Filters (a price range, the categories, a brand, a characteristic...): see Filters and sorting of products on listings. Without any filter, it only shows the word "Filter": with the Starter and Essential editions, keep the page's default template.

HikaShop also shows the filters above the products of every listing. With this template they would appear twice: in HikaShop > Configuration > Features, section Filter, set Display filters on product listing to No.

The Shop page with a category filter

 

8. The header and the footer

The header and the footer are template parts: open Appearance > Editor > Patterns, and under Template parts click Header or Footer, then Edit.

  • The header holds the menu (step 5), your logo or name (step 3), the search icon, the account icon (to /account/) and the HikaShop cart.
  • The footer has your logo or name with the tagline, then two columns of links, Shop (All products, Checkout) and Your account (My account, Create an account), then the copyright line, written by Vessel with the year and your site title. Click a column's title or links to change them, add a link to your delivery, returns and terms pages, or duplicate a column for a third one.

If the pages of HikaShop are not at /shop/, /checkout/, /account/ and /register/ on your site (you renamed them), update the links of the footer and of the account icon to their addresses.

 

9. HikaShop settings for the look of the shop

Open HikaShop > Configuration.

  • Main > Images: Thumbnail (width x height) is the size of the pictures of the listings and blocks, 100 x 100 pixels by default. Vessel shows larger tiles, so set it to 400 x 400, or the pictures look blurred. Product page image, 300 x 300 by default: set 800 x 800 for a sharp picture on the product page. HikaShop makes the new sizes from your original pictures by itself. See Configuration: Images.
  • Display > Product options > Layout on product page: Vessel styles the layouts of HikaShop's product page: try them on one of your products and keep the one you like. See Configuration: Product options.
  • Display > Default parameters for products and for categories: what the listings show by default (add to cart button, quantity field, wishlist, price display...). See Configuration: Default parameters.

The image sizes of HikaShop

A category of the shop

A product page

 

10. Before you sell

 

11. Your own CSS

Most of the look is set by the style and its colours. For more, add your CSS rules in Appearance > Editor > Styles, the three dots at the top of the Styles panel, Additional CSS: they are kept when Vessel is updated. Do not edit the files of the theme: an update replaces them. For larger changes, use a child theme.

 

Questions

My menu lists every page, "Sample Page" included.
The menu still is the one WordPress makes from your pages. Edit it in Appearance > Editor > Navigation (step 5).

My home page shows my posts, or "Welcome to WordPress".
Set the Home page as your homepage in Settings > Reading (step 6).

The pictures of the home page are broken and the category tiles lead to a missing page.
They are those of Vessel's demo: replace each picture and each link with yours (step 6).

The "New arrivals" grid is empty.
Set the Sub elements filter of the HikaShop Products block to All sub elements in its display options (step 6). Vessel 1.0.18 and later set it for you.

The filters show twice on the listings.
Set Display filters on product listing to No in the HikaShop configuration (step 7).

The Shop page shows "Filter" and nothing under it.
Create your filters in HikaShop > Display > Filters (HikaShop Business), or give the Shop page its default template (step 7).

The pictures of my products and categories are blurred.
Raise the thumbnail size of HikaShop to 400 x 400 (step 9), or set the image size in the HikaShop Products block.

My colours changed when I picked another style.
A style sets all the colours and fonts. Pick the style first, then adjust its colours in Edit palette.

Is there a copy of the demo to install?
No, there is no package of the demo to download. The Home pattern and this guide build the same home page on your site, with your own products.

And on Joomla?
Vessel is also a Joomla template, tpl_vessel.zip, with its own set-up guide, linked from the Vessel page of our marketplace.