> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://staging.chrisp.chat/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Displaying and Positioning Modules and Actions via Shortcodes

Action buttons, as well as modules, can be positioned freely on a product page through the use of shortcodes. An example of this can be seen in the [business card demo](http://fancyproductdesigner.com/product/businesscard/). The first step in adding the desired shortcodes is to open the Shortcode Builder. Find the Shortcode Builder in Fancy Product Designer → Utilities.

![](https://storage.crisp.chat/users/helpdesk/website/-/5/9/5/9/595910c5e9e1c400/31965fb1-b9de-4820-b34f-6727ab_1r5mnv8.png)

Click on the Shortcodes button to open the Shortcode Builder:

![](https://storage.crisp.chat/users/helpdesk/website/-/2/d/2/1/2d212bc8dc913400/91ef024c-e6da-44a6-bb21-41e7ba_v9tabb.png)

Via the dropdown menus on the right, you can now select the different actions and modules, the corresponding shortcode will be generated and displayed on the left. For actions, there are three different Layout options available ****i****con tooltip****, ****icon**** ****text,**** and ****text**** only:

![](https://storage.crisp.chat/users/helpdesk/website/-/6/5/6/f/656fb3ce37eddc00/9661a4f1-48fc-4688-ae6d-a528eb_yjcspj.png)

![](https://storage.crisp.chat/users/helpdesk/website/-/d/6/c/5/d6c52925c05e2800/671361ce-e2a7-4dff-adf0-d9ba51_yl6h96.jpg)

For Modules, CSS can be added to the wrapper by entering, for example, height and width.

To integrate an ****action**** or ****module**** into a product page via the shortcode, you simply need to copy the generated shortcode and paste it in the appropriate position on your page.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/e/e/c/8eec7a52486f3000/279dc0b2-9a79-4b58-a818-726474_yyhv7k.jpg)

To further customize the layout of a product page, for example, to move the summary to the left of the designer, please take a look at [Customizing the layout of WooCommerce product pages](http://support.fancyproductdesigner.com/solution/articles/5000583771-customizing-the-layout-of-woocommerce-product-pages)

### Default Shortcodes
### 
###