How to customize your product details page

‍

Summary:

This video explains how to connect custom design pages in Webflow with your Tangram application for listing details, allowing you to override the default design. The process involves designing the listing details page in Webflow, adding the required attributes (such as tg-section-idand tg-import-type), and connecting specific fields (like title, price, and description) to dynamically pull data from Tangram. You need to define field groups and map them to the correct elements in Webflow. User data, such as the seller's avatar, should be placed within a tg-import-type="user" container. Once all the attributes are set up, the custom page URL is added to Tangram, and the final step is to link the listing type page to the custom design by adjusting the settings in the Tangram backend. Following these steps ensures that all listings will load the custom-designed details page.

‍
Video Transcript:

" In this video, we'll be covering how to connect product or service or other listing details pages within your Tangram application using custom design pages in Webflow.  If you don't want to use the default designs, which is generally best practice on Tangram, if you want to have the ability to customize the layout and design of these pages as you scale, it would be to first design these details pages within Webflow.

And then hook them up to Tangram, and I'm going to show you how to do that.  I'm quickly going to take you through what different front ends might look like for different listing types in Webflow.  Usually different listing types might be services, products, both physical or digital, classes, rentals, or job posts.

And for services, the important information to usually show on a listing details page for services would be maybe some tags, a description, the duration of the service, the price of the service, this could be a fixed price or you could convert it to price per hour, the description. Maybe some custom text fields about what's included or anything like that.

If there's a location tied to the service indicating that are showing a map of the location or indicating that the virtual meeting link would be shared after booking, maybe a cancellation policy and maybe some information about the seller at the bottom. . In our template, we cover all of these and make all of it condensable in accordion, but you can design these pages however you see fit, add or remove anything.

I'm going to cover what attributes need to be present on the page in Webflow for it to work, and where you would paste the corresponding Webflow. Link to the service page in Tangram to make it replace the default design that we have for listing details pages in Tangram.  Starting from the top, the first attribute that you will need on your listing details page will be a section ID.

At the outermost layer of your page wrapped around everything, you'll need an attribute, tg-section-id = {section_id}. That's misspelled right there, section id. And you want to place the value or the section id in the value field there. And I'll show you where to grab that in just a second. Inside of that, you'll need one more attribute.

You'll need the import type defined directly inside of that tg-section-id = {section_id} attribute. And because this is a listings page, the import type will be listing on the wrapped around everything. And what this allows for is it allows us to get listing data inside of that container if we have tginporttype equals listing defined.

Now that we have that there, any element inside that I'm highlighting right now, any of these elements that is inside of tg-import-type = "listing", We can pull in listing attributes from Tangram.  Data, like the title, or price, or duration about this listing, we can dynamically pull onto the page using Tangram attributes.

And the format you would do is you'd select the element, whether it's a text element, or whatever on the page, or a photo element, and you'd type in tg-attribute = {field_id} underneath the settings panel in Webflow under the custom attributes section, and put the field ID for Whatever field you want rendered there for photos that's generally like photos underscore one to indicate the first photo We would do photos underscore two photos underscore three, etc, etc and for the title if we wanted the title we'd go to the fields table to find the ID for title click copy And usually we'll start with like TG, give the name of the field, and then underscore the field type for readability in Webflow.

You paste it in there. And when we publish this, if we have all those attributes connected, it will dynamically pull in the correct information for the service. , let's hypothetically say we hooked up all these fields, we grabbed all the attributes, like price, and clicked copy, and pasted them in for all the data we want rendered on the page, we connected the section ID, we connected the tg-import-type = "listing" attribute, and just to Let you know where to get the {section_ID}.

That would be done underneath the pages tab in Webflow. You'd create the search, the service details page. You'd click manage and you'd find the section on the page. Usually there's just one section on the page. I'm going to delete all of these because it's confusing right now.  You define one section on a details page usually.

And name it something like service details section or service details. And the section, what the section does in Tangram is it defines what information, what data we're pushing to that section, which is this, everything inside of this highlighted section. What type of information needs to get rendered in there and from what field groups.

We're first going to define the field groups. What type of data is getting sent to that page? It's data about services, one on one services. We also have some data about the seller or provider.  We need to connect that as a field group as well on this page.  We connect providers. And next up, we would define the exact fields we want sent to the page, which would be the title, the photos, the seller name, like display name, all photos, the user photo, description.

You'd keep going and select all of the fields from the dropdown that you want rendered on this page to use as attributes, and then you'd hit, oops, you'd hit connect field, and it would show all of the field IDs again that you could copy. And if we wanted to connect the avatar here, we would do tg-attribute = "avatar" and paste in that avatar ID that we just copied from the fields table there.

Please keep in mind that if you are pulling on, pulling in user data on a product details page, you must put the user data inside Of a tg-import-type = "user" container.  You can see in the navigator here, this accordion that's highlighted right now. This is all seller info, and that needs to be inside of a div with the attribute tg-import-type = "user" because we want the fields, the TG attributes inside of it to be associated with the user information, the provider information for that listing.

Just to restate the structure of the attributes, we have the tangram section. ID, which we can grab here, and sections are tied to pages in the back end of Tangram.  If we're on the surface details page here, there's a tab for sections, we can copy the section ID there. and paste it. Immediately inside of the section id, we would put the, define the import type for this page, and the import type for a listing details page would be a listing.

We'd do tg-import-type = "listing". We want listing data primarily on the page. Now we can define all of the listing attributes by connecting tg attribute and pasting in the field value on the corresponding element. And inside of the tg-import-type = "listing" container, we have some user info. And all the user info needs to be inside of tg-import-type = "user" another div.

That when we hook up tg-attribute = "avatar" it knows that it's supposed to pull in data associated with the user, not the listing. Or when we do tg-attribute = {description_field_id} here, it means the seller description, not the product description. And that's how Tangram would know that.  Let's pretend this page is fully connected now.

We have all the attributes, all the sections, all the import types defined, and we have the corresponding page in the backend defined in Tangram, and the sections and the fields defined such that The correct fields are pushing to the section that's tied to the Webflow page. How do we, how do we get the, the actual design hooked up?

We would grab the URL for that page, copy it, and paste it in this HTML template URL field, and hit save. Now, we would take the friendly route, servicexclone. tangram. co slash service details. If we hit save here, we can go to slash service details. And it will show us the I mean, I didn't hook it up fully, so it's not rendering anything.

But if I did hook it up fully, it would render the details page, and we could use that slash service tack details page under the listing types tab here. You have to change a link in one more spot, it would be this override listing page visits tab. You would want to set that to serviceclone. Tanagram.

co slash service details question mark listing underscore ID equals the listing ID.  That's the last step you have to do and what this is doing is it's saying any time I visit The service details page, I want it to go to the custom design version of the page, which is the page we just connected in the pages tab of Tangram, and you would hit save.

And if you follow all those steps, anytime you go to, let's say, a listings table and click view a specific listing or navigate to the view page for any listing in any manner, it'll always take you to the custom designed version if you follow those steps."

‍