Relume - Product Page Build

Setting up the product page template

Our installation is done and we are ready to build the product page. We are provided with multiple layouts in Shopyflow Relume Library to create our product page template. Follow the simple steps below to get ready to launch your product page.

Copy/Paste the Buy Module

1. Go to Shopyflow Relume Library and copy the product page component of your choice
2. In Webflow designer, open the Products CMS Template in the Pages Panel
3. Paste the copied Relume component inside of the Main Wrapper element

Set the Product ID on the Product Container

1. Open the Navigator panel and expand all the elements in
2. Select the --Product Container component and go to the Settings tab
3. In the Custom Attributes section, locate the sf-product attribute and set its value to the Product ID field from the CMS

Configure the Variant Option Selectors

In the Products CMS collection there are there are 3 Product Option Name fields(Plain Text Fields) and 3 Product Option Value fields(Multi-reference fields connected to Product Options collections). We are going to use each set to configure and populate our Variant Option Selectors.

1. Select the Collection List inside of the first Variant Option Selector block
2. Connect its source to the Product Option 1 Values field
3. Select the --Custom Option Wrapper component and go to element Settings
4. Set the sf-change-option attribute value to Product Option 1 Name
5. Select its direct child element, --Custom Option Value, and set its sf-option-value attribute to Displayed Name field from the CMS
6. Select the inner Text Block element and set its content to Displayed Name to display the option name
7. Select the label element and set its text source to Product Option 1 Name
8. Now select the outermost element of the Variant Option Selector block that has the class product_header1-option and make it conditionally visible. So it’s visible only if the Product Option 1 Values field is set
9. Repeat the above steps for the other two Variant Option Selector blocks

Connect Product Information

The rest of the elements in the Buy Module don't require any further configuration since all their attributes are set. Even though they will get populated automatically on the page load, the best practice is connecting them to their respective CMS fields. This way we will take advantage of the server-side rendering feature of Webflow. All the elements have a corresponding field in the CMS with the same name, all you need to do is binding their content to those fields.

1. Set the text source of --Product Title component from CMS
2. Set the text source of --Price and --Compare Price component from CMS
3. Set the text source of --Product Description component from CMS
4. Set the image source of --Main Image component from CMS
5. Set the thumbnail collection to Gallery Images field
6. Select the --Thumbnail element, and set its background image to Product Gallery Image

Publish and Test

1. Publish the site and verify the product page functionality.
2. Test the Add to Cart feature.
3. Proceed to Checkout to confirm the integration is working properly.