Streaming live at 10am (PST)

Can you build separate product pages?

Hello! I am building am E-Commerce website for custom dog gear. Right now my client is selling collars and towels. Basically, all I want to do is have a separate product page layout for the collars, and a different one for towels.

The reason is simple; Below all the item images, variants, and Add to Cart button, I want to have information about the product, features, and specifications. This would be different from the Collars to Towels.

What is the best way to do this?
I’m in the early stages of the website so no need to share my link. Thanks!


Do you simply need different information (with the same layout), or will the layout/structure of the page vary between product type? e.g. different positions of elements for your collars.

Hi Andy, thanks for your reply. I could try and force the different products to have the same information fields and layouts, however that wouldn’t be ideal.

Is it possible to have different layouts per category?
Like all products part of the Collar category have X layout, and all products in the Towel category have Y layout.

You could use conditional visibility as one potential solution to this problem.

So in the single template page, you could design two separate layouts. Let’s call the parent elements of these designs layout__x and layout__y.

In your product settings (where you add the fields etc), you could add a toggle or dropdown selector (let’s call this Type Of Layout, for this example). Let’s say you go with a dropdown - give it two options, “X” and “Y”.

Then, on the elements layout__x and layout__y, in the element settings, apply a conditional visibility. For layout__x for example, this conditional visibility rule would be "display when Type Of Layout equals X. Likewise for Y, and any other designs you may need - my personal opinion is this isn’t best design practice though, so try and limit usage of this where possible.

Does that make sense?

1 Like

Ah okay! Yes this all makes sense. Let me repeat back to you in other words to make sure I’m following:

On the same product page template, I could potentially create two different sections (layout X and layout Y), and once setup in the product field settings, I can go back to the product template page, go to the Section element for Layout Y, click settings, and put the conditional visibility to “display when type of layout equals Y” and vice versa for layout X?

Basically I will only need to do this for the features, specifications, and materials of the product – which I imagine I can do in all one section element, reducing the amount of conditional visibility.

Correct!

Spot on - if you apply the conditional visibility to the overall parent element, you only need to set a single condidional visibility rule as it will hide/show all of the children elements within it.

Perfect thank you very much Andy! That seems like the most efficient work-around available right now. I could try to build it all with CMS but that sounds like a very mapped out nightmare.

Isn’t it a little bit silly there aren’t separate product template pages per category? Don’t almost all companies like to explain the benefits of their products on the product page? Hopefully this is a feature in development to easily vary the product page!

You’re very welcome!

1 Like