Merge branch 'ADP-1626-View-more-plans'

* ADP-1626-View-more-plans:
  Minor rephrasing
  View plans for review

versioned_docs/version-3.0/paywall-product-block.md

@@ -31,7 +31,6 @@ Enhancing the visual appeal of specific products can significantly rebalance use
 
 A product badge is a small label that can be added to a product. This badge can provide additional promotional info  and direct users choice. The badge size automatically adjusts to fit the text, and its position is optimized for your paywall layout.
 
-
 <Zoom>
   <img src={require('./img/eedb135-PB_product_badge.webp').default}
   style={{
@@ -43,15 +42,10 @@ A product badge is a small label that can be added to a product. This badge can
 />
 </Zoom>
 
-
-
-
-
 To add a product badge:
 
 1. Turn on the **Product badge** toggle in the setting of a specific product.
 
-
 <Zoom>
   <img src={require('./img/2a5779d-PB_product_badge_config.webp').default}
   style={{
@@ -63,17 +57,12 @@ To add a product badge:
 />
 </Zoom>
 
-
-
-
-
 2. Customize the badge view and text to suit your design needs.
 
 ### Selected product
 
 For the **Products as list + purchase button** purchase flow, you can **preselect** a product to gently nudge users towards it. This can be especially effective in directing user choice.
 
-
 <Zoom>
   <img src={require('./img/3f37969-PB_preselected_product.webp').default}
   style={{
@@ -85,15 +74,10 @@ For the **Products as list + purchase button** purchase flow, you can **preselec
 />
 </Zoom>
 
-
-
-
-
 To preselect a product: 
 
 1. Open the **Products** element.
 
-
 <Zoom>
   <img src={require('./img/da4e4c4-PB_preselect_product.webp').default}
   style={{
@@ -105,14 +89,9 @@ To preselect a product:
 />
 </Zoom>
 
-
-
-
-
 2. In the **Content** tab, choose the product you want to preselect from the **Selected product** drop-down list.
 3. Adjust the view of the selected product as well as the default view of other products in the **Style** tab if necessary.
 
-
 <Zoom>
   <img src={require('./img/ac7411e-PB_setup_selected_default_button.webp').default}
   style={{
@@ -124,15 +103,10 @@ To preselect a product:
 />
 </Zoom>
 
-
-
-
-
 ### Highlighted product
 
 For the **Products as purchase buttons** purchase flow, you can **highlight** a preferred product to make it the primary choice, drawing immediate user attention..
 
-
 <Zoom>
   <img src={require('./img/afc2882-PB_highlighted_product.webp').default}
   style={{
@@ -144,15 +118,10 @@ For the **Products as purchase buttons** purchase flow, you can **highlight** a
 />
 </Zoom>
 
-
-
-
-
 To highlight a product:
 
 1. In the left pane, choose the product you want  to highlight.
 
-
 <Zoom>
   <img src={require('./img/a630507-PB_highlight_product.webp').default}
   style={{
@@ -164,17 +133,12 @@ To highlight a product:
 />
 </Zoom>
 
-
-
-
-
 2. In the **Style** subsection, adjust the design to make the product stand out more..
 
 ### Product offers
 
 Each product can feature different text for offers in the **Text** subsection. The **Default** tab contains the text displayed without an offer. This is the perfect place to use [tag variables](paywall-builder-tag-variables) or [custom tags](custom-tags-in-paywall-builder) for dynamic, localized content. Start typing with a triangle bracket, and Adapty will suggest available tag variables to insert localized data from the stores
 
-
 <Zoom>
   <img src={require('./img/0de6871-PB_text.webp').default}
   style={{
@@ -186,10 +150,6 @@ Each product can feature different text for offers in the **Text** subsection. T
 />
 </Zoom>
 
-
-
-
-
 ## Switching between 2 product sets by trial toggle
 
 For a versatile user experience, you can allow users to switch between two sets of products using a toggle. This is especially useful for differentiating between standard products and trials.
@@ -198,7 +158,6 @@ To add a toggle:
 
 1. In the **Products** element, change the **Products grouping** option to **Toggle (for free trials and other offers)**. This will add two subsections: **Toggle on** and **Toggle off**.
 
-
 <Zoom>
   <img src={require('./img/d859a58-PB_turn_on_toggle.webp').default}
   style={{
@@ -210,13 +169,8 @@ To add a toggle:
 />
 </Zoom>
 
-
-
-
-
 2. Add products to both subsections to create views for when the toggle is on or off.
-3. In the **Toggle** element, define whether the toggle should be on or off by default in the paywall by the **Default state** toggle.
-
+3. In the **Toggle** element, set the **Default state** to choose whether the toggle should start as on or off in the paywall.
 
 <Zoom>
   <img src={require('./img/4127a67-PB_toggle_default_state.webp').default}
@@ -229,8 +183,49 @@ To add a toggle:
 />
 </Zoom>
 
+## Showing extra plans under a button
 
+To keep things simple on your paywall, you can hide some products under a button (like "View more plans" or any label you prefer). This helps users focus on your top options first, while still allowing them to explore other plans if they want. It's a great way to make the paywall cleaner and improve conversions.
 
+Here’s how:
 
+1. In the **Products** element, set the **Products grouping** option to **Button (for more alternative plans)**. This will split your products into two groups: **Shown** and **More plans**.
+
+<Zoom>
+  <img src={require('./img/view-more-plans.webp').default}
+  style={{
+    border: '1px solid #727272', /* border width and color */
+    width: '700px', /* image width */
+    display: 'block', /* for alignment */
+    margin: '0 auto' /* center alignment */
+  }}
+/>
+</Zoom>
 
-By mastering these customization options, you can create a compelling, visually appealing product list that guides users towards making a purchase effortlessly
+2. Distribute your products between these groups. **Shown** is for products you want displayed right away. **More plans** is for products hidden behind the button, shown only when users click it.
+
+   <Zoom>
+     <img src={require('./img/divided-plans.webp').default}
+     style={{
+       border: '1px solid #727272', /* border width and color */
+       width: '700px', /* image width */
+       display: 'block', /* for alignment */
+       margin: '0 auto' /* center alignment */
+     }}
+   />
+   </Zoom>
+
+3. Customize the text and layout of the button in the **View more plans** element to suit your needs.
+
+   <Zoom>
+     <img src={require('./img/view-more-plans-button.webp').default}
+     style={{
+       border: '1px solid #727272', /* border width and color */
+       width: '700px', /* image width */
+       display: 'block', /* for alignment */
+       margin: '0 auto' /* center alignment */
+     }}
+   />
+   </Zoom>
+
+By mastering these customization options, you can create a compelling, visually appealing product list that guides users towards making a purchase effortlessly.