NOTE: This module is available separately within HubSpot Marketplace and does not come included within any of our themes.
The Redwood Product Details Module by Growth allows you to feature your products within your HubSpot website and connect to payment options. As it is available through the HubSpot Marketplace, it can not connect to HubDB or custom objects, but you can manually create product pages that are fully functional and allow you to build an online store type of setup that you can't do out of the box with Content Hub.
This module can be used with any current HubSpot theme that is available in the Marketplace. In our demo page and screenshots, you will see the module used within our Redwood Industrial theme. It certainly works great within our theme, but you can use it in other themes also.
Adding the Module to a Page
After installing this module, go to the page you would like to add the module to and get to the edit admin for the page. Click the "+" icon on the left toolbar to add a module. As the module is not part of your theme, you will not see it in the top "Theme modules" section. Use the search filter at the top and type "Redwood". This will quickly locate our module.
Click and drag "Redwood Product Details" to the right and place it where you want it on your page. Most likely, you'll want this module in a new section by itself. Set the section to be centered content (not full width).
When on the page, click on the module to start setting up your product.
Product Name
You can enter your product name, which will load as the H1 on your page. If you want to show the product name in a separate module (as we did on our demo page), just leave the Product Name field blank. On the Styles tab, you'll find a Product Name section where you can edit the color, font size and font weight of this product name H1 if you want to override whatever styling is applied by your theme.
Product Image Carousel
This module includes a great-looking image carousel to feature your product images! You'll see the field is a repeater, so you can add, edit, delete, re-order images within the carousel. It will default to having 5 images, although they are empty containers for images. Click on each one to edit and add your images.
The carousel displays the active image in a large main image box and the rest of the images are below in smaller thumbnails. There are arrows to the left to navigate and control the slider. You must have more than 4 images for the slider functionality to activate.
TIP: As you add images, make sure they are all 72dpi and are no larger than the biggest they will display on your page. For most sites, these images shouldn't be any wider than 800px, or you'll just be loading unnecessary extra weight (and load time) to your page. Also, load the image as a .webp file type if you're able to.
NOTE: On the styles tab, you'll find an "Images" section as where you can set styles related to the product images, and then a "Slider Arrows" section where you can style the arrows used in the carousel.
Product Specifications
This is a simple rich text field to enter some details about your product. This is NOT intended to be a long, detailed description. That should take place outside of this module, likely done underneath in a separate rich text module.
Use this built-in field for a bullet-list of product highlights or a quick overview. If you do not need this field, or do not have room for it due to the amount of other content you setup below it, you can simply leave this specifications field blank.
NOTE: If you want to change the heading "Specifications", scroll down on the module field options and you'll find a section "Labels". You can edit that text there.
Product SKU
This is a simple field to provide a product SKU or possibly something else like a Vendor name. If not needed, you can leave it blank.
NOTE: If you want to change the label "SKU", scroll down on the module field options and you'll find a section "Labels". You can edit that text there.
Price & Availability
This section allows you to set the price and availability for your product.
- Currency Symbol - This will default to "$" for USD, but you can change it to whatever currency symbol you need to use. It will be applied to all price displays in the module.
- Price Display Option - Choose if you want to display a single price for the product, or show variant option prices instead, or show NO pricing.
- Availability Display Option - Choose if you want to display a single product availability, or show variant option availablity instead, or show NO availability.
- Availability - Select (if you are displaying it) the availability of your product. Choices are: In Stock, Out of Stock, or On Order.
Style Tip: On the Styles tab, you can set the color for each of these availability options. Set "Out of Stock" as a color like RED so it is hard for users to miss.
NOTE: If you want to change the label "Availability", scroll down on the module field options and you'll find a section "Labels". You can edit that text there.
Product Links
Now, setup document and/or payment links for your product! If you have a spec sheet, white paper, manual or any other document that you'd like to provide a link to, select your file in the Product PDF field. This is connected to the Documents area of HubSpot. If you haven't loaded your doc there yet, you can do it here. If you have no document to link here, just leave it empty.
Then, for the quote or purchase option, you can link to a content page, an external link, a HubSpot Payment link, or a popup CTA... or you can leave it as-is if you do not need it.
NOTE: On the Styles tab, there is a "Buttons" section where you can style what both of these buttons look like.
Variant Options
Next, you'll see a section "Variants". This is for use if you need to showcase different variations available for your product, like different sizes, colors, materials, etc. This is similar to what you could do in a shopping cart solution like WooCommerce. If you do not need this, skip it.
Otherwise, you can add as many variants as you need. This is a repeater, so add variants as needed and then populate each one with your options. You can also re-order your variants.
In each variant, you'll find another repeater to establish the options (like size, color, etc). In our demo page, you can see we setup a variant "Materials" and then set options of: Steel, Aluminum, and Plastic. Within each option, you can set a price and availability. You only need to set these items if you are displaying them.
NOTE: On the Styles tab, you'll find a "Variant Box" section where you can set styles for this section of the module.
Labels
The last item of fields for the module is the "Labels" section. If you want to modify any of the default labels (like "Specifications", "Availability", etc), or button labels like "Purchase Now", you can make those change here. This make it possible to change these labels, and even the language, without having to modify any code!
Styles Tab
As noted throughout this doc, there is a Styles tab that contains a full set of styling options to make this module look exactly how you want it to!
Further Customization and Support
If you would like any customization work done with your implementation of this module or would like more hands-on support, we are here and available to help! Fill out the help form on THIS PAGE to initiate that request.