{"id":6042,"date":"2024-04-14T19:43:29","date_gmt":"2024-04-14T11:43:29","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6042"},"modified":"2024-04-14T19:43:29","modified_gmt":"2024-04-14T11:43:29","slug":"selective-display","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/selective-display\/","title":{"rendered":"Selective display"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>Selective display allows you to exhibit or conceal elements and craft distinctive layouts based on various conditions. Unlike <a href=\"https:\/\/help.webflow.com\/article\/filtering-collection-lists\">filters<\/a> \u2014 which clarify which Collection items are visible in a Collection list \u2014 requirements specify when <em>any <\/em>element (static or dynamic) will be visible.\u00a0<\/p>\n<p>This teaching session will cover the following:<\/p>\n<ol role=\"list\">\n<li>Definition of selective display\u00a0<\/li>\n<li>How to establish selective display<\/li>\n<li>Criterion guidelines<\/li>\n<li>Requirements compared to filters<\/li>\n<li>Scenarios for selective display<\/li>\n<\/ol>\n<h2>Definition of selective display<\/h2>\n<p>Selective display determines when an element is viewable on your site based on specific conditions.\u00a0<\/p>\n<p>As an illustration, you can utilize selective display to:<\/p>\n<ul role=\"list\">\n<li>Reveal or conceal an element in a Collection list based on a Collection item field or value (e.g., show an element depending on the value of a Collection field, or hide an element tied to a Collection field when that Collection field is empty)\u00a0<\/li>\n<li>Present or hide a label or accentuate an item based on a Collection item field or value (e.g., add a \u201cfeatured\u201d label to a featured blog post)<\/li>\n<li>Display or conceal a section on a Collection page<\/li>\n<li>Highlight the current Collection item<\/li>\n<li>Display or hide an element if a user isn\u2019t logged in on your site<\/li>\n<\/ul>\n<p>Each Collection field type presents diverse conditions for selection.\u00a0<\/p>\n<h2>How to establish selective display<\/h2>\n<p>To produce a condition that reveals or hides an element based on a user\u2019s login status:\u00a0<\/p>\n<ol role=\"list\">\n<li>Pick an element on the canvas<\/li>\n<li>Proceed to <strong>Element settings panel<\/strong> &gt; <strong>Visibility &amp; user access<\/strong><\/li>\n<li>Click the \u201c<strong>plus<\/strong>\u201d symbol\u00a0<\/li>\n<li>Choose the field you wish to ascertain visibility from the dropdown (e.g., User state)<\/li>\n<li>Select a value from the following dropdown (e.g., is Logged In)<\/li>\n<li>Click <strong>Save<\/strong><\/li>\n<\/ol>\n<p>You can replicate the same procedure to incorporate field- and item-based requirements in <strong>Element settings panel <\/strong>&gt;\u00a0<strong>Selective display<\/strong>. <\/p>\n<p>You can include as many conditions as necessary. When multiple conditions are enforced, all criteria must be satisfied for the element to appear (or remain hidden). To remove a condition, click the \u201c<strong>trash<\/strong>\u201d symbol adjacent to the requirement.<\/p>\n<h5>Criterion guidelines<\/h5>\n<p>Criterion guidelines, similar to filter rules, are either field-based or item-based.\u00a0<\/p>\n<p>Field-based conditions take effect when a specified field:\u00a0<\/p>\n<ul role=\"list\">\n<li><strong>Is set<\/strong> or <strong>is not set<\/strong><\/li>\n<li><strong>Equals<\/strong> or <strong>doesn\u2019t equal<\/strong> a particular value<\/li>\n<li><strong>Is greater than<\/strong>, <strong>less than<\/strong>, or <strong>is<\/strong> a number <strong>between<\/strong> two numeric values<\/li>\n<li><strong>Is<\/strong><strong>ON<\/strong> or <strong>OFF<\/strong><\/li>\n<li>Belongs to a certain date range<\/li>\n<\/ul>\n<p>Item-based requirements apply when a Collection item <strong>is<\/strong> or <strong>is not<\/strong> the current item.\u00a0<\/p>\n<h2>Requirements compared to filters<\/h2>\n<p>Collection list filters permit you to display or conceal Collection items in a Collection list based on a guideline, while selective display utilizes the same guidelines to exhibit or hide elements within Collection lists, on Collection pages, or on static pages.<\/p>\n<p>For instance, you can utilize the guideline \u201cFeatured (switch) is on\u201d to exhibit a \u201cFeatured\u201d text label for featured blog posts and obscure this label for elements that have the featured switch toggled off.<\/p>\n<p>Alternatively, if you desire to solely show featured posts in a list, you can establish this same guideline as a <a href=\"https:\/\/help.webflow.com\/article\/filtering-collection-lists\">filter<\/a> on the Collection list.\u00a0<\/p>\n<h2>Scenarios for selective display<\/h2>\n<h3>Within Collection lists and on Collection pages<\/h3>\n<p>You can apply guidelines and filters to emphasize or show or hide specified content within your Collection lists or on Collection pages. Suppose you possess a Collection list of blog posts, and you intend to display a \u201cFeatured\u201d label on featured posts. You can apply selective display based on a switch field to conceal the label for items that have the \u201cFeatured\u201d switch off.\u00a0<\/p>\n<p>To administer the subsequent guideline, you\u2019ll need to append a switch field to your Collection and concoct an element to function as the \u201cFeatured\u201d label. Then:\u00a0<\/p>\n<ol role=\"list\">\n<li>Select the \u201cFeatured\u201d label on the canvas<\/li>\n<li>Head to <strong>Element settings panel<\/strong> &gt; <strong>Selective display<\/strong><\/li>\n<li>Click the \u201c<strong>plus<\/strong>\u201d symbol\u00a0<\/li>\n<li>Pick the email field from the dropdown<\/li>\n<li>Choose <strong>Is set <\/strong>from the subsequent dropdown<\/li>\n<li>Click <strong>Save<\/strong><\/li>\n<\/ol>\n<h3>On Ecommerce sites<\/h3>\n<p>You can employ selective display to link distinct designs to unique product variations by setting selective display on variant fields like the main image, compare-at-price, SKU, etc. Or, you can insert banners or callouts depending on checkout information. For instance, you can exhibit a \u201cfree shipping\u201d badge on the checkout page based on the cart total, subtotal, or shipping information.<\/p>\n<p>To implement selective display on the checkout page:<\/p>\n<ol role=\"list\">\n<li>Select the element you wish to reveal when a particular guideline is met<\/li>\n<li>Visit <strong>Element settings panel<\/strong> &gt; <strong>Selective display<\/strong><\/li>\n<li>Click the \u201c<strong>plus<\/strong>\u201d symbol\u00a0<\/li>\n<li>Pick one of the shipping fields (e.g., Subtotal) from the dropdown<\/li>\n<li>Choose the guideline (e.g., <strong>Equals <\/strong>or <strong>Is greater than<\/strong> a specific value)\u00a0<\/li>\n<li>Insert the value for the guideline in the input field\u00a0<\/li>\n<li>Click <strong>Save<\/strong><\/li>\n<\/ol>\n<p>Other example scenarios:\u00a0<\/p>\n<ul role=\"list\">\n<li>Add a \u201cpick up in store\u201d badge if an Ecommerce product isn\u2019t shippable<\/li>\n<li>Show or obscure a sales badge based on whether the Compare-at-price field is set\u00a0<\/li>\n<li>Display or hide specific messaging when shipping to certain countries\u00a0<\/li>\n<\/ul>\n<blockquote><p><strong>Important: <\/strong>When setting a guideline based on price, the amounts should be formatted using a period as the decimal (e.g., 1000.00) regardless of the price formatting settings for your store. For instance, 100,50 \u20ac should be entered as 100.50.\u00a0<\/p><\/blockquote>\n<h6><strong>Note: <\/strong>When setting selective display based on country or billing address, the country must be entered as a <a href=\"https:\/\/en.wikipedia.org\/wiki\/ISO_3166-1_alpha-2\">2-letter abbreviation<\/a>. For instance, the United States should be entered as \u201cUS\u201d.<\/h6>\n<h3>On User Accounts sites<\/h3>\n<p>You can establish selective display on any element (e.g., buttons, sections, etc.) on a User Accounts-enabled site to tailor experiences for your users based on whether they\u2019re logged in. Learn more about setting element visibility based on site visitors\u2019 logged-in status.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use conditional visibility to show or hide elements and create unique designs.","protected":false},"author":2,"featured_media":6043,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[300],"tags":[],"class_list":{"0":"post-6042","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-cms-dynamic-content","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6042","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6042"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6042\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6043"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6042"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6042"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}