Open Job Positions

Dynamic Pages

Back to Videos

WATCH

Studio data and dynamic pages with single slug

Step 1

WATCH

Dynamic pages with multiple slugs

Step 2

Steps

1. Open Studio app or open Studio via top menu insertion items in Builder
2. Click on the plus on the folders list in the Studio/Studio overlay to add folder
3. Type the folder name(e.g Dynamic) and save it
4. Add child folder into the folder from step 3 with some name(e.g Payments)
5. Add a few child pages into the folder from step 4 with some titles(e.g PayPal, Apple Pay, Zinia…)
6. Into the each child folder from step 5 add same content files but files across the folders should have same names(e.g logo of the Apple Pay inside Apple Pay folder with name ‘logo’, logo of the PaPal inside PayPal folder with name ‘logo’, logo of the Zinia inside Zinia folder with name ‘logo'. And also into same folders can add text with content “Apple Pay” inside ApplePay folder with name ‘title’, text with content “PayPal” inside PayPal folder with name ‘title’, text with content “Zinia” inside Zinia folder with name ‘title’)
7. Repeat steps 4-6 for creation anothr child folder of the folder from step 3(e.g Shopsystems) with own child folders(e.g Shopify, Magento, WooCommerce) which have same file names and same structure of the files but with own logos and titles.
8. Repeat steps 4-6 for creation anothr child folder of the folder from step 3(e.g Industries) with own child folders(e.g Mobility, Fashion, Technology) which have same titles and file names and same structure of the files but with own logos and titles.
9. Select any child folder of the folder from step 3 and for each child folder of the selected one add one more extra file which other folders will not have(e.g we select Industy folder and into the Mobility folder we add text file with content "Mobility Products" and title "Description", into the Fashion folder we add text file with content "Fashion Products" and title "Description", into the technology folder we add text file with content "Technology Products" and title "Description")
10. Close studio overlay or close studio app and open builder
11. Add new page to the theme
12. Open Page tab on the right side panel for the new page
13. Switch page link type to the Dynamic
14. Into the field for dynamic link start typing same text as was names of child Folders of the folder from step 3
15. Select matching name from suggestions(e.g you typed "Pay" and it suggested "Payments" and you selected it) and left it as the only slug in the dynamic link field
16. Add Shape into the page from step 11
17. Add Text near the shape from step 16 into the page from step 11
18. Open functions on the right side panel for the shape from step 16
19. Open context fields
20. Extend Slugs and then extend folder which was selected as slug in step 15
21. Extend image
22. Select some file name which you added for pictures in step 6(logo)
23. Open functions on the right side panel for the text from step 17
24. Open context fields
25. Extend Slugs and then extend folder which was selected as slug in step 15
26. Extend text
27. Select some file name which you added for text in step 6(title)
28. Publish
29. Open Homepage of the published website
30. Add name of the any child folders of the folder which was selected as slug in the step 15 into the link after / character after the link of the homepage of the website(e.g website.com/apple-pay)
31. Ensure that page link works and correct data disaplyed for the selected page(for example for website.com/apple-pay page there should be a logo of the apple pay and 'Apple Pay' text as title instead of the data placeholders which was added in steps 16 and 17 and for which was applied slugs with files names in steps 21 and 27, as this data was added to the Apple Pay Folder in the step 6)
32. Go to the Homepage
33. Create a grid for disaplying all dynmic pages using block and block inline elements with Data Source, List Items and Context Fields functions(Same as Product Grid)
34. For the outer element(Grid) open functions form the right side panel
35. Select Data Source
36. Extend payever Pages
37. Select Dynamic Pages function
38. For the block element which is child of the element from step 34 open functions
39. Select Context Fields
40. Select List Items function
41. Add child and not block element into the list items element and make it dimentions same as parent that anywhere you click on the list items element you alswasy click on this element as well
42. Open function for this element
43. Select Context Fields
44. Extent Value optin
45. Select Page Link Function
46. Change colot of the text for this elelemnt to anyone with opacity 0% that it is not visible in the grid
47. Also apply link to the Sub Page for this element
48. Add another shape into the list items element
49. Open Functions for this element 
50. Select Context Fields
51. Extend Value option
52. Extend slugs
53. Extend Folder which you added as slug in step 15
54. Extend images
55. Select the image name which you added for all images files in step 6(logo)
56. Add text element into the  list items element
57. Repet steps 49-53 for the text element
58. Extend Text
59. Select the text file name which you added for all text files in step 6(title)
60. Publish
61. Open homepage
62. Ensure that grid is displayed. Also grid should have same count of the cells as the folder which was selected as a slug in step 15(Payments) have child folders(1 - Apple Pay, 2 - Pay Pal, 3 - Zinia). Each cell should have datas from files of the each child folder(title and logo). When click on any of the grid cells it should open corresponding dynamic page with same data as was on the grid cell in which you clicked and with correct link(e.g I clicked on the grid cell with Zinia logo and "Zinia" title then I should be redirected to the page website.com/zinia with logo of the zinia and title 'Zinia')
63. Open dynamic page
64. Add some static slug to the dynamic link field which is added not as selection from suggestions of the studio slugs(e.g 'Page' that the dynmic link looks like Dynamic Slug - "Payments"; Static Slug - "Page")
65. Publish
66. Open homepage
67. Ensure that when click on the any of the grid cells it opens page with correct new link(e.g website.com/zinia-page) and when trying to reach page wth old link(website.com/zinia) it opens 404 page
68. Open the settings of the dynamic link again
69. Change the static slug and add one more dynamic(e.g page link now looks like this: Dynamic Slug - "Payments"; Static Slug - "With"; Dynamic Slug - "Shopsystems")
70. Into the dynmaic page add same shape and text as was added during steps  16-27 but for selecting of the files extend slug which was added as new dynamic slug in step 69(Shopsystems)
71. Open homepage again
72. Add same elements into the list items element of the grid as was added in the steps 48-59 but for selecting of the files extend slug which was added as new dynamic slug in step 69(Shopsystems)
73. Publish
74. Open Homepage
75. Ensure that count of the cells in the grid equals to the result of multiplication of the count of the child folders of the slug which was selected in step 15 (1 - Apple Pay, 2 - Pay Pal, 3 - Zinia) and count of the child folders of the slug which was added in step 69 (1 - Shopify, 2 - Magento, 3 - WooCommerce)(3*3=9pages/grid cells). Each cell should have datas from files of the each child folder(title and logo) for each slug which was added in steps 15 and 69. When click on any of the grid cells it should open corresponding dynamic page with same data as was on the grid cell in which you clicked and with correct link(e.g I clicked on the grid cell with Zinia and Magento logo and "Zinia" and "Magento" title then I should be redirected to the page website.com/zinia-with-magento with logo of the zinia and magento and title 'Zinia' and 'Magento')
76. Open the settings of the dynamic link again
77. Add one more static slug and add one more dynamic(e.g page link now looks like this: Dynamic Slug - "Payments"; Static Slug - "With"; Dynamic Slug - "Shopsystems"; Static Slug - "For"; Dynamic Slug - "Industry")
78. Into the dynmaic page add same shape and text as was added during steps  16-27 but for selecting of the files extend slug which was added as new dynamic slug in step 77(Industries)
79. Also to the dynamic page add a few few block inline text elements
80. Add text files functions from different slugs which was selected in steps 15, 69 and 77 with using files which was not used before and which was added only to the one slug in step 9(Description from Industry Slug) to a few block inline text elements and don't add to another part of them (e.g such text: No Function - 'Integrate'; With Function - 'Payments Slug and 'title' file'; No Function - 'with'; With Function - 'Shopsystems Slug and 'title' file'; No Function - 'to'; No Function - 'sell', No Function - 'more'; With Function - 'Industry Slug and 'description' file')
81. Open homepage again
82. Add same elements into the list items element of the grid as was added in the steps 48-59 but for selecting of the files extend slug which was added as new dynamic slug in step 77(Industries)
83. Also except text with files of the slugs functions inside grid add static texts and make all text as block inline that all text on the grid looks as one text(e.g such text: With Function - 'Payments Slug and 'title' file'; No Function - 'with'; With Function - 'Shopsystems Slug and 'title' file'; No Function - 'for'; With Function - 'Industry Slug and 'title' file')
84. Publish
85. Open Homepage
86. Ensure that count of the cells in the grid equals to the result of multiplication of the count of the child folders of the slug which was selected in step 15 (1 - Apple Pay, 2 - Pay Pal, 3 - Zinia) and count of the child folders of the slug which was added in step 69 (1 - Shopify, 2 - Magento, 3 - WooCommerce) and count of the child folders of the slug which was added in step 77 (1 - Mobility, 2 - Fashion, 3 - Technology)(3*3*3=27pages/grid cells). Each cell should have same count of icons as was added dynmic slugs to the dynamic page(1. Payments, 2. Shopsystems, 3. Industry) and with with text which looks as one but which is mixed with static texts and texts which is taken from studio(e.g for the page wich have logos of the Pay Pal, Shopify and Technology folders in the grid the text should looks like this: "Pay Pal with Shopify for Technology"). Datas from files of the each child folder(title and logo) for each slug which was added in steps 15, 69 and 77 should be displayed in the grid cells. When click on any of the grid cells it should open corresponding dynamic page with same data as was on the grid cell in which you clicked and with correct link(e.g I clicked on the grid cell with Zinia and Magento and Fashion logo and "Zinia" and "Magento" and "Fashion" title then I should be redirected to the page website.com/zinia-with-magento-for-Fashion with logo of the zinia and magento and fashion and title 'Zinia' and 'Magento' and 'Fashion') and with text which was added in step 83(e.g if I opened page website.com/zinia-with-magento-for-fashion then text from step 83 should looks like this there: "Integrate Zinia with Magento to sell more Fashion Products")

Hints

If you need to build a lot of simmilar pages where only a few images and texts are different or if you need a lot of pages which are just combinations of same data then you can simplify this process by building one template and dynamic functions and only upload content to the studio to generate a huge number of the pages automatically

© payever. All rights reserved.

English (United Kingdom)