Streaming live at 10am (PST)

Is this product page layout possible without making unique pages?

Hi everyone!

This is my first time using webflow and I’m kind of stuck with it. I have a Figma layout I created but I’m confused how I could recreate it in webflow even after watching a bunch of videos.

I understand the bases of how to create the commerce part of the website with simple collection items and adding images, descriptions and checkout button. However I’m stuck how I can add under all this part where I can add more pictures and something like behind the scenes information of the product. And at the end of the day I don’t want to create unique pages for each product if I want to add the extra information.

Also some products would have more than one extra text block and picture.

(The grey squares are the spot for the pictures.)

Here is my site Read-Only: LINK
Here is my Figma Read-Only: LINK

Hey, your design looks pretty sleek!

The design you want is certainly possible in Webflow. Did you get the eCommerce plan?

For a client, I also made a product page with extra information. You can see it here: Deens ovale eikenhouten eettafel Reykjavík - eiken tafel op maat gemaakt | Meubelmakerij Binnendijk.

:anchor: Read-only link of the product page: Webflow - Meubelmakerij Binnendijk

The design you created is pretty complex, but it boils down to these four things: grid design, custom fields, Dynamic Style and Conditional Visibility.

Grid design
First, you can make the design by adding grids. There’s many resources on Webflow for that. Basically, you make a grid with two columns to show the extra text with the image to the side, then a grid with three columns to show the three images at the end.

Simply put some random texts and empty images in your design. You will link those texts and images later on.

Custom fields
In Webflow eCommerce, you can create custom fields for your products. To do this: select the shopping cart icon in the designer, then hover over you product category and click on the gear wheel to adjust the settings.

For my client, I made many custom fields:

You can add images, text, you can add on/off switches. What you basically need to do is to add these:

    1. One (or more) extra Text field for each extra column below the basic product information. So in this design, you have two extra columns with text below the basic product image. So you should two custom text fields.
    1. For every extra column text, create one extra Image field for the picture that you put next to it. Give your fields logical names. For example: Extra Text 1, Extra Image 1, Extra Text 2, Extra Image 2
    1. Create one Multi-image Field for the gallery at the end (with the three pictures). There you can add your three images.

Dynamic style
Then, in your premade design you simply click on your text fields and image fields and link those to your custom fields. For example, when you click on an image, you can connect the image to your custom field by going to ‘Dynamic Style’ on the right of your page:

Schermafbeelding 2021-12-06 om 21.33.17

Also, when you click on a random text field on a product page, you can connect it to one your custom text fields that you made:

You simply click on ‘Get text from…’ and then you are able to select the custom field that you just made.

Conditional visibility
The last thing you might wanna do, is use Conditional Visibility:

Schermafbeelding 2021-12-06 om 21.37.05

For example, you only wanna show the second column when your custom field ‘Extra Info 2’ has text in it. Then you go to Conditional Visibility on the right (click on your text first) and select Element is visible when… ‘Extra Info 2 is set’. Then the text column will only show up if you really put a text in the custom field. The same can be done for images et cetera.

You can also show a certain text based on the product category. Simply choose: Element is visible when ‘Categories contains Leather Bags’. There are many possibilities.

So in short:

  • Create a grid design with random text and empty images.
  • Create custom fields in the Webflow eCommerce CMS.
  • Link the text and images to these custom fields using Dynamic Style and Inner Text settings.
  • Set Conditional Visibility if you only wanna show texts or images under certain conditions.

Please let me know if you need any further help!