Streaming live at 10am (PST)

Two text elements on one line

Hello,

I am trying to replicate an eCommerce shop “specifications” section such as this example image which has a line for each spec & two text elements horizontally.

When on mobile, each line remains intact, example shown below. Meaning left & right text elements don’t unwantedly mix.

Spec Mobile

I want to replicate this on my Webflow eCommerce store linked which uses the CMS.

So far I’ve tried creating a rich text block for both the left and right side which has worked until mobile makes either side wrap as shown below

Spec B

Any ideas?


Here is my site Read-Only: [LINK]1
(how to share your site Read-Only link)

hi @GregDFE setting table like this is very simple and you do not need RTE for this. Read more about what RTE is for on Webflow University or here on this forum. Anyway I have created for you simple example to get an idea how to build this table.

Hey Stan. That looks good and thanks for the speedy reply!

The eCommerce store has multiple possible specifications. Some product categories may only need “height” & “width”. Some other categories may need “water flow”, “certifications”, “material” etc etc.

Do you have any idea how your example could link to the Webflow eCommerce CMS so I could make each product’s specifications unique to that products category?

This challenge is why I originally went with the two RTE’s as I could then just type down the unique specifications on the left hand side that may not be needed for another product elsewhere on the store.

hi @GregDFE yes there is simple way how to do that. You can add condition to each row to be displayed only if field in CSM is Set. This mean display row ONLY if field has some text inside, if field is empty do not display this row.

hi @ I have done another table that use and filter CMS items (see updated example). I have also add simple JS to change color for each even item. You need use JS as :nth-child(even) would not work as all items are in DOM and this will cause problems when any item will be hidden. I have left CSS in embed (commented out) you can try and see what I’m talking about.

javascript below is implemented in page setting

// get parent element childrens and create array
const itemOptions = [...document.querySelector(".item_c").children]

// filter out items that aren't hidden (doesn't have class `w-condition-invisible`) 
let visible = itemOptions.filter(opt => !opt.classList.contains("w-condition-invisible")) 

// loop over each item to find even and add style 
visible.forEach((item,idx) => {
// because Array index starts at 0 you need to increase index by 1 because 0 & 1 are odd 
// this mean that second item will have index 1 (odd num)
    if ((idx + 1) % 2 === 0){

        item.style.backgroundColor = "#FFF"

        // you can instead `style` add  `class`  
        //item.classList.add("YOUR CLASS WITH AWESOME STYLING")
    }
})

to see it in action here is LIVE preview

If this solve your problem feel free to close your request as solved

Hey Stan, looks great. That is a good solution.

The only drawback I can identify currently is the limit of CMS fields being 30.

A basic eCom store with several products won’t meet this issue but a large retailer store with many product categories will run into issues with that 30 CMS fields limit - I encourage anyone to find a solution to this 30 fields limit and a complicated eCom store for the specification page.

The original question however is now marked as solved. Thank you Stan.

1 Like

hi @GregDFE glad to hear this can be a solution for your cms logic design. When is come to 30 fields limit it depend on what plan you have for website as business has limit 60 fields. You can have closer look on limitation in project settingshosting where in lower part is button show full comparison.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.