If you are using the WordPress building a website and want to create a product showcase page that is both good looking and functional, but can't write code.Blocksy A theme is just the right tool for the job. This article will introduce the Blocksy theme step by step to help you quickly complete the creation of your product showcase page.
![图片[1]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620163853316-image.png)
Why Blocksy?
![图片[2]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620163716714-image.png)
Blocksy is a free, lightweight, customizable WordPress theme. It is similar to Gutenberg editors or page builders such as Elementor work well together. Using Blocksy, this is possible:
- Customize page structure and layout
![图片[3]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620185808948-image.png)
- Setting up full-width or cassette inner packagings
![图片[4]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620185850900-image.png)
- Add modules for product images, profiles, prices, etc.
![图片[5]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620191537899-image.png)
- Display multiple product information using card style
II. Preparatory work
Before you begin, complete the following:
1. Install and enable Blocksy theme
Go to Backend → Appearance → Themes → Add Theme → Search for "Blocksy", click Install and enable it.
![图片[6]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620190448661-image.png)
2. Install the Blocksy Companion plug-in
After installation you will be prompted to activate the Blocksy Companion plugin, click to confirm. This plugin provides additional modules and page templates.
![图片[7]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620190350499-image.png)
3. Preparation of product materials
beforehandProduct Pictures, title, price, features, etc. for quick subsequent editing.
Third, the new product display page
- Create new page
Backend → Pages → New → Enter a page name, such as "Product Showcase".
![图片[8]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620183618859-image.png)
- set upPage templatesFor full-width layouts
In the Settings column on the right side of the page, select the template as "Blocksy - Full Width Page".
![图片[9]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620184355420-image.png)
- Adding Display Content
The Gutenberg editor is recommended:
- Insertion of "column" modules, e.g., two- or three-column structures
![图片[10]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620185002779-image.png)
- Add an image, title, introductory text, and a button such as "Buy Now" in each column.
You can also use the "Media & Text" module to achieve a clear structure for side-by-side presentation of graphics and text.
![图片[11]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620185138833-image.png)
Or choose Blocksy's Starter Sites Template function:
- Go to Blocksy → Starter Sites
![图片[12]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620175334888-image.png)
- Choose a demo site template with a product showcase (e.g. "Shop" or "Business")
- Import with one click and then directly modify the content of the content
![图片[13]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620191953534-image.png)
IV. Adjusting style details
- Modify color scheme and fonts
Go to Appearance → Customize → Colors & Fonts to set the background color, button color, text style and other parameters.
![图片[14]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620185353246-image.png)
- Enable image rounded corners and shadow effects
The block's style settings allow you to enable rounded corners and card shadows for images to make the page more aesthetically pleasing.
![图片[15]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620185501721-image.png)
- Adaptation of pages to various devices
Blocksy hasresponsiveLayout features, no extra settings, the page can adapt to cell phones and tablets and other terminals.
V. Page publishing and menu management
Once the design is complete, click the Publish button in the upper right corner of the page. Then go to the Appearance → menu and add the page to the main sitenavigation menuIt is easy for visitors to browse product information.
![图片[16]-零代码打造产品展示页:Blocksy 使用指南](https://www.361sale.com/wp-content/uploads/2025/06/20250620190110615-image.png)
VI. Summary
Blocksy The theme makes it easy for every WordPress user to create a product showcase page. From template selection, content addition to style adjustment, do not need any development skills, just simple operation can be completed. Whether you are displaying a single product or multiple product information, you can achieve a professional level of visual effect.
Open the backend now and create your own product showcase page with Blocksy.
Link to this article:https://www.361sale.com/en/61508/The article is copyrighted and must be reproduced with attribution.






















![表情[wozuimei]-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/themes/zibll/img/smilies/wozuimei.gif)
![表情[baoquan]-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/themes/zibll/img/smilies/baoquan.gif)

No comments