What Shopify is and what you build with it

Shopify is a hosted platform where you rent space to build and run an online store. You do not install software on your own server or manage the underlying infrastructure — Shopify handles the hosting, security updates, and payment processing. What you build is a storefront: product pages, a shopping cart, checkout, and an order management system. You own the content and data, but Shopify owns the platform itself.

The platform sits between you and your customers. When someone buys from your store, Shopify processes the payment, stores the order, and sends you the money (minus their fee). You can connect your own domain name so customers see yourstore.com instead of yourstore.myshopify.com, but the underlying system is always Shopify's.

This matters for your choice of tools. If you are building a Shopify store, you are not writing HTML and CSS from scratch. You are working inside Shopify's editor, choosing from templates, and customizing through their interface or by editing Liquid (Shopify's templating language). Browser developer tools help you inspect and debug that customization, not build the whole thing.

Key Takeaways

  • Shopify charges a monthly fee (starting around $29) plus a percentage of each sale, so you need to know the full cost before you start.
  • You can build a working store using only Shopify's drag-and-drop editor without writing any code.
  • Browser developer tools let you inspect how your store looks on different devices and debug custom code if you add it.
  • Your first real task is choosing a template, adding products, and setting up payment methods — not learning to code.
  • Shopify's own documentation and template code are your primary resources; third-party tutorials often teach outdated versions.

The cost and what it covers

Shopify charges two things: a monthly subscription and a percentage of sales. The monthly fee varies by plan. The Basic plan costs around $29 per month and includes hosting, SSL security, and up to 2 staff accounts. Shopify Plus (their enterprise plan) costs thousands per month. Between those are Standard ($79/month) and Advanced ($299/month), each adding more staff accounts and lower transaction fees.

On top of the monthly fee, Shopify takes a cut of each sale. On the Basic plan, that is 2.9% plus 30 cents per transaction if you use Shopify Payments (their built-in processor). If you use a third-party processor like Stripe or PayPal, Shopify takes 2.2% instead. These percentages drop on higher-tier plans.

You also pay for apps (Shopify's term for add-ons). Many are free, but popular ones like email marketing integrations or inventory management tools charge $10 to $100+ per month. Before you commit, calculate what a month of sales would actually cost you. A store doing $5,000 in monthly sales on the Basic plan with Shopify Payments costs roughly $29 + (5,000 × 0.029) + (number of transactions × 0.30) + any app fees.

Starting a store without writing code

Shopify's default editor is visual. You log in, choose a template (Shopify calls these "themes"), and customize it by dragging sections around, changing colors, and uploading images. You do not need to touch code. The editor shows you a preview of how your store looks on desktop, tablet, and mobile as you work.

To add products, you go to the Products section, click Add Product, and fill in a form: product name, description, price, images, and variants (sizes, colors, etc.). Shopify stores all of this in a database and generates a product page automatically. You can reorder products, organize them into collections, and set up filters so customers can browse by category.

Payment setup happens in Settings > Payment Methods. Shopify Payments is the simplest option — it connects directly to your bank account and deposits sales daily or weekly. If you want to use Stripe, PayPal, or another processor, you add them as an app and configure the connection. Shopify handles the security (PCI compliance) so you never touch raw payment data.

For most stores, this is enough. You can launch with a working checkout, order notifications, and a basic inventory system without ever opening a code editor.

When and how to use browser developer tools

Browser developer tools become useful when you want to customize how your store looks or behaves beyond what the visual editor allows. Open the developer tools in Chrome, Firefox, or Safari by pressing F12 (or right-click and select Inspect). The Elements tab shows you the HTML structure of your store pages, and the Styles panel shows the CSS that controls how they look.

Shopify themes are built in Liquid, a templating language that mixes HTML with variables and logic. When you inspect a product page, you see the rendered HTML, not the Liquid code. But you can use the inspector to understand the structure: which div holds the product image, which class controls the price styling, where the Add to Cart button lives. This information helps you write custom CSS or JavaScript to change how things look.

The Console tab is where you test JavaScript. If you want to add custom behavior — like hiding a button until a customer enters a discount code, or logging data about which products people view — you can write and test the code in the console before adding it to your theme. The Network tab shows you what requests your store makes (to Shopify's servers, to payment processors, to analytics tools) and how long they take, which helps you spot slow integrations.

The Responsive Design Mode (Ctrl+Shift+M in Chrome) lets you see your store on different screen sizes without owning those devices. This is critical because most Shopify stores get 40% to 60% of traffic from mobile. You can test your checkout, product pages, and navigation on iPhone, iPad, and Android sizes right in your browser.

Editing theme code and using Liquid

If you want to change how your theme works, you edit its Liquid files directly. In Shopify, go to Sales Channels > Online Store > Themes, find your active theme, and click Edit Code. This opens a file browser on the left showing all the template files, CSS, and JavaScript that make up your theme.

The main files you will edit are in the templates folder: product.liquid (controls how product pages look), collection.liquid (controls category pages), and index.liquid (your homepage). Each file mixes HTML with Liquid tags like {{ product.title }} (which inserts the product name) and {% if product.available %} (which shows content only if the product is in stock).

Shopify's Liquid documentation is thorough and searchable. When you want to add a feature — like showing customer reviews, or a countdown timer, or a custom discount message — you search the docs for the relevant object (like product or cart) and see what data is available. You then write the Liquid code to display or manipulate that data.

After you edit a file, Shopify saves it when ready and your live store updates. This means you can break your store by accident. Most developers create a duplicate theme to test in before pushing changes to the live version. In the Themes section, click the three dots next to your theme and select Duplicate.

Testing your store on different devices and browsers

Your store needs to work on Chrome, Firefox, Safari, and Edge, and on phones, tablets, and desktops. Browser developer tools help you test without owning every device. The Responsive Design Mode shows your store at different widths, but it is not a perfect substitute for a real phone — touch interactions, network speed, and rendering can differ.

For real device testing, use your own phone or ask friends to test on theirs. Take screenshots of any problems and note which browser and device they happen on. Then use the inspector to find the HTML or CSS causing the issue. Common problems include text that overflows its container on small screens, buttons that are too small to tap, and images that load slowly on mobile networks.

The Performance tab in developer tools shows you how fast your store loads. Shopify handles a lot of optimization automatically, but if you add custom code or large images, you can slow things down. The Lighthouse tool (built into Chrome's developer tools) audits your store for performance, accessibility, and SEO and gives you specific recommendations.

Common mistakes and how to avoid them

The biggest mistake is choosing a theme and then when ready customizing it heavily without understanding how it works. Themes are complex — they have dozens of settings, many apps that hook into them, and custom code that can conflict. Before you edit code, spend time in the theme settings and read the theme's documentation. Most theme creators publish a guide that explains what each setting does.

Another common mistake is adding too many apps. Each app adds code to your store, and that code runs on every page load. Ten apps can slow your store noticeably. Before you install an app, ask: do I really need this, or is there a built-in Shopify feature that does the same thing? Shopify's native features (like email notifications, basic SEO, and inventory management) are usually faster and more reliable than third-party apps.

A third mistake is not testing on mobile. You build on a desktop, everything looks good, and then you check your phone and the checkout is broken. Use the Responsive Design Mode constantly as you build. Test on an actual phone before you launch.

Finally, do not edit your live theme directly if you are new to Liquid. Duplicate your theme, make changes in the copy, test them, and then publish the copy as your live theme. This way, if something breaks, you can switch back to the old version in seconds.

Frequently Asked Questions

Do I need to know how to code to build a Shopify store?

No. You can build a complete, working store using only the visual editor and Shopify's built-in features. You need code only if you want to customize the look or behavior beyond what the theme and settings allow. Most stores start without code and add it later if they need it.

Can I move my store away from Shopify later?

Yes, but it takes work. You can export your products, customers, and orders from Shopify, but you will need to import them into another platform (like WooCommerce or BigCommerce) and rebuild your store design. Your domain name can move with you. Shopify does not lock you in, but switching platforms is not trivial.

What is the difference between Shopify and WooCommerce?

Shopify is hosted (Shopify runs the servers) and charges monthly. WooCommerce is a plugin for WordPress that you install on your own server, so you pay for hosting separately and have more control over the code. Shopify is easier to start with; WooCommerce is cheaper long-term if you are comfortable managing servers.

How long does it take to launch a store?

If you use a template and add 20 to 50 products, you can launch in a few days. If you want a custom design or hundreds of products, it takes weeks. The actual Shopify setup (account, domain, payment) takes an hour.

What should I do if my store is slow?

Use Lighthouse (in Chrome developer tools) to identify the slowest parts. Usually it is large images, too many apps, or third-party scripts. Compress images before uploading, remove apps you do not use, and check the Network tab to see which requests take the longest. Shopify's support team can also help diagnose performance issues.