How can I conditionally show or hide elements on a CMS Template page in Webflow, depending on whether the page was accessed from the search result page or the catalog page?

To conditionally show or hide elements on a CMS Template page in Webflow, depending on whether the page was accessed from the search result page or the catalog page, you can follow these steps:

1. Identify the source of the page: You need to first determine whether the page was accessed from the search result page or the catalog page. One way to achieve this is by using query parameters in the page URL.

2. Set up query parameters: Add query parameters to the URLs on the search result page and the catalog page. For example, you can add "?source=search" to the URLs on the search result page and "?source=catalog" to the URLs on the catalog page. This will help identify the source of the page when loaded.

3. Create custom code: To implement the conditional show/hide functionality, you'll need to add some custom code to your CMS Template page. Here's an example of how to achieve this using JavaScript:

<script>  // Read the query parameters from the URL  const urlParams = new URLSearchParams(window.location.search);  // Check if the 'source' query parameter exists and its value is 'search'  if (urlParams.has('source') && urlParams.get('source') === 'search') {    // Code to be executed if the page is accessed from the search result page    // Show or hide elements by adding/removing classes, manipulating styles, or changing display properties.    document.getElementById('element-id').style.display = 'none'; // example of hiding an element  } else if (urlParams.has('source') && urlParams.get('source') === 'catalog') {    // Code to be executed if the page is accessed from the catalog page    // Show or hide elements as necessary.    document.getElementById('element-id').style.display = 'block'; // example of showing an element  }</script>

1. Identify and target the elements: In the code above, you'll need to replace 'element-id' with the actual ID or class of the element you want to conditionally show or hide. You can target any element on the page, such as text blocks, images, buttons, etc.

2. Implement the code: Once you've customized the code based on your element IDs and classes, you'll need to add it to your CMS Template page in Webflow. Here's how:

• Open your Webflow project and go to the CMS Template page.
• Modify the page's code by either adding an Embed element or by accessing the Page Settings > Custom Code section.
• Paste the custom code into the appropriate location on the page.
• Publish your changes and test the functionality.

By following these steps, you will be able to conditionally show or hide elements on a CMS Template page in Webflow, depending on whether the page was accessed from the search result page or the catalog page.

Additional questions that users may use to search for this answer:

1. How do I conditionally hide elements in Webflow based on the page source?
2. Can I show or hide elements on a CMS Template page in Webflow depending on how the page was accessed?
3. What is the best way to implement conditional element visibility in Webflow CMS Template pages?