We’ll start by showing how to create a stand-alone page (not part of the built-in manager), in CSS. Building with CSS components Using the text editor of your choice. Create an ‘index.html’ file and enter the boilerplate responsive HTML. Including a line to make the viewport wider and a title for the application. To create a style sheet, you’ll need to take the link tag in the Installation. And Deployment section in the Components collection and paste it into the header of your HTML document. Use Polaris to Create Application UI – Create a Style Sheet Copy the highlighted link tag and paste it into the text editor. With this template in place, you’ll just have an empty page, so you’ll need to add structure. From the component’s menu under Structure , select Page.
In this section, you will be able to use one of the most practical features of Polaris: the interactive playgrounds. Use Polaris to Create an Application UI – Interactive Playground An example of an interactive playground within Polaris. Within these playgrounds, you can select sample code from the dropdown menu under Examples and Indonesia B2B List remove any code that is not necessary for your design. For our sample app layout, you’ll just proceed with the code necessary to place a title on the page. Since you’re building in HTML/CSS, in the top right of the playground you’d select HTML before Copy Code to copy this markup into your text editor. This will give you a page with margins in place, a background color, and the proper font for the title.
Just Scratching the Surface
Use Polaris to create an app UI – output after adding page markup Output after adding Polaris page marks. To build the rest of the page, you can use Polaris layout components. Based on the example layout above, you’re working to create a layout called Annotated Style , where the headers are on the left and the content is on the right, with annotations below the headers. To find the necessary component markings, you will need to visit the Design section , under Structure. In the playground section, you can select the annotated style example and adjust the copy to match what’s on your mockup. After updating the copy, select the HTML markup and add it to the ‘page content’ section of your code, replacing this line: Page content And voila, you now have some page structure.
Use Polaris to create an app UI – output after adding structure markup Output after adding Polaris frame marks. The next step is to replace the empty card with a component in Polaris called Account Connection , which is used to connect or disconnect a merchant’s Shopify account to a third-party service, in this case, an imaginary dropshipping account. You can find this playground by looking in the Component Actions section. In the sample code provided, you’ll need to update the “title”, “terms of service”, app name, and app URL. If you don’t already have an app URL, you can enter placeholders. Once you’re up to date, go back to HTML mode and copy the code. In your text editor, paste the code where the empty card is currently located, replacing this code.
Build Your Components