WeeklyHow - Blog

So you have been developing Shopify apps, but you're not creating the Shopify apps using React or Node.js. So in other words, you can NOT use Polaris. Now you're wondering... "How am I going to design this app? and I don't want to use Bootstrap anyway".Well, to be fair though, I've been in that very same spot and that's why I am writing this article to guide you on how to design Shopify apps without using or installing Polaris to your Shopify app projects.

Video Tutorial

If you prefer watching video tutorials, the here is the video version of this article.

https://www.youtube.com/watch?v=m2rqRknIsWA

Getting Started

To get started, I will assume that you have followed our Shopify app development series and you have your own undesigned Shopify app. However, if you have nothing but installed Shopify app in your development store, then feel free to copy the following code and paste it into your index.php file. That being said, for this article, we will be using PHP.

<?php require_once( "inc/functions.php" );

$shop_url = $_GET['shop']; $access_token = "ENTER YOUR SHOPIFY STORE ACCESS TOKEN";

/** * Install Shopify App */ //header('Location: install.php?shop=' . $shop_url); //exit();

echo "Hello " . $shop_url . '

';

echo "The following table will list down all of your items from your store. You can delete an item using the action column";

$products = shopify_call( $access_token, $shop_url, "/admin/api/2021-01/products.json", array(), 'GET'); $products = json_decode( $products['response'], true );

foreach( $products as $product ) { foreach( $product as $key => $value ) { $image = ''; if( count( $value['images'] ) > 0 ) { $image = $value['images'][0]['src']; }

echo ' '; echo $value['title'] . ' '; } }

?>

The code above should give us the following output:

Design Shopify Apps without Polaris

If you're developing Shopify apps and you're not using React, then obviously, you won't be able to use Polaris. Luckily, there is a free CSS framework that you can use for designing Shopify apps and it's called Uptown CSS.Navigate to their official website and click the Download CSS button. We're going to import this into our project.

Once you have downloaded the css file, import it to your project. I will put it inside of my css folder like below:

Since we need to import the CSS, we'll have to create the skeleton for our HTML. Update your index.php to the following:

Once you saved your files and open your app, your app should update to something like below:

Awesome! That means we're making a progress and Uptown CSS is working! Let's continue and create the container and sections for our Shopify app.Open your index.php and copy the following code.

WeeklyHow body { padding-top: 30px; } Learn more about this app at WeeklyHow Help Center.

In the code above, we created the basic structure of our app. Now, if you're wondering what is the basic structure, you may use the following code as a reference:

... ... ...

As you can see in the code above, it consists of three parts: header, section, and footer.Now we never really used the header tag in our code so if you wish to add the header tag, feel free to do so. But, personally speaking, I never truly liked how it looks. (shrugs)Now noticed that we have created two files: header.php and product_table.php.For the header.php file, this is the code:

<?php echo "Hello " . $shop_url . '

'; ?>

Read me <?php echo "The following table will list down all of your items from your store. You can delete an item using the action column

";?>

And for the product_table.php, here is the code:

Product Status Action 4), 'GET'); $products = json_decode( $products['response'], true );

foreach( $products as $product ) { foreach( $product as $key => $value ) { $image = ''; if( count($value['images']) > 0 ) { $image = $value['images'][0]['src']; } ?> ">

So in the code above, we only retrieve the products through Product API and loop through each product, and render them using table rows. If you want an in-depth guide on how to get Shopify products using Shopify API, you may click the following button to learn more about it.

How To Get Shopify Products using Shopify API

By saving all of your files, you should have the following output:

Conclusion

There you have it! You have designed your Shopify app without Polaris. Now, what I really like about this CSS framework is that it doesn't need jQuery or other JavaScript framework. It's a very independent framework and can be easily customize especially if you are familiar with CSS or SASS. So, what do you think? Do you think this is a great CSS framework? Let us know in the comments below.