The shop section of Float is powered by the WooCommerce plugin. Make sure this plugin is installed and activated before attempting to configure your shop. See Plugins for more information.

Create a product

To create a product for your shop, navigate to Product ➝ Add Product within your WordPress admin dashboard. Since WooCommerce is a third-party plugin, please read through the official WooCommerce documentation for complete product setup instructions.

Below is a list of official WooCommerce guides that will help you create products:

Product page style 

Float has two product page styles to select from: Scroll (Default) and Slider. This can be selected within the Product Options section of a product page, from the Product page style dropdown.

If you select a Slider page style, you can also select how many thumbnail columns appear below the slider.

Extended product

An extended product is simple a product with an extended description. In the demo we have used shortcodes with the content area to extend the product description. You can also select to have the product description area full screen by checking the Extended product mode option within Product Options.

Product image size 

To set your image sizes in WooCommerce, navigate to WooCommerce ➝ Settings. Click on the Products tab at the top of the screen and click the Display link below. Scroll down to the Product Images section. Here you can set dimensions of your shop images. Below are a settings for the Float demo.

  • Catalog Images: 1200 x 1200px
  • Single Product Image: 1400 x 1400px
  • Product Thumbnails: 180 x 180px
After changing these settings, you'll need to use the Regenerate Thumbnails plugin to regenerate the thumbnails in your shop.

An image size of 1462 × 1462 pixels is sufficient to achieve retina product images, and is the size used for all product images in the Float demo. However, You can adjust the size of your banner according to your requirements.

Set color of product page

You can change the color of the single product page to suit your product images. To do so, navigate to the Shop tab in the customizer via Appearance ➝ Customize, scroll down to Product panel color and select a color. You can preview your changes before saving, within the preview screen on the right. Click Save & Publish when done.

Shop page

To setup your shop page, create a blank page in Pages ➝ Add New titled Shop. Then, navigate to WooCommerce ➝ Settings. Click on the Products tab at the top of the screen and click the Display link below. Scroll to the Shop & Product Pages section, and select your page in the Shop Page dropdown.

You can configure your shop page in the customizer via Appearance ➝ Customize. Again, the shop page is configured in exactly the same way as the blog and portfolio archive pages. Click the Shop tab in the customizer to configure the header, widgets, columns and pagination of your shop archive page. See Blog for more information.


To configure the widgets on your shop page, navigate to Appearance ➝ Widgets. There are two widget locations on the shop page: at the top and on the side. These locations are represented by the Shop Top Widgets and Shop Side Widgets tabs on the right, as highlighted below. 

For more information on shop-specific widgets, read the Widgets included with WooCommerce guide.

Powered by Pixelsmile