🛍 Bootstrap Shopify Theme
These are my experience when I have been working on this theme:
- Designing & Building Shopify Themes from Scratch.
- Using Bootstrap@5 to Create a Nice User Interface.
- Using BEM Methodology to Create Minimal, Reusable Source Code.
- Using Liquid, SASS, ESNext to Develop the Theme Fashionably.
- Using CSS Media Queries to Create a Mobile-First and Responsive Design.
- Using PostCSS to Make CSS Code Compatible with Old Browsers.
- Using Swiper to Create Beautiful, Touchable, Responsive Sliders.
- Using Shopify Theme Scripts to Solve Theme Problems Faster.
- Using Shopify Theme Kit to Develop and Deploy the Theme.
- Using Shopify Theme Check, ESlint to Follow Theme Best Practices.
- Using Gulp to Automate & Enhance the Development Workflow.
- Using BrowserSync to Reload the Browser Automatically When Saving the Files.
- Using Liquid & Prettier Visual Studio Code Extensions to Format the Source Code.
If you like the project, please hit the STAR button to support my work.
- Store Link: https://maxvien-bootstrap.myshopify.com
Clone the source code into your computer.
git clone https://github.com/Maxvien/bootstrap-shopify-theme.git
Install the project's dependencies.
To config the project, you need to copy and rename the
config.yml.example file to the
config.yml file. Then update the
There are two sections in the
developmentsection is for your development store.
productionsection is for your production store.
development: store: store-name.myshopify.com password: store-admin-api-password theme_id: store-theme-id production: store: store-name.myshopify.com password: store-admin-api-password theme_id: store-theme-id
To fill the
store property, you copy your store's hostname and paste it to the
To fill the
password property, please follow these steps:
- From your Shopify admin, click Apps.
- Near the bottom of the page, click Manage private apps.
- If private app development is disabled, then click Enable private app development. Only the store owner can enable private app development.
- Click Create new private app.
- In the App details section, fill out the app name and your email address.
- In the Admin API section, click Show inactive Admin API permissions.
- Scroll to the Themes section and select Read and write from the dropdown.
- Click Save.
- Read the private app confirmation dialog, then click Create app.
- In the Admin API section of the App, copy the password and paste it into the
Theme ID Property
To fill the
theme_id property, please follow these steps:
- From your Shopify admin, click Online Store.
- At the top of the Online Store menu, click Themes.
- In the Current theme section, click Actions and select Duplicate to backup your current theme.
- Next, click the Customize button.
- There is a link like this
https://store-name.myshopify.com/admin/themes/[theme_id]/editoron your browser's address bar. Copy the theme_id and paste it into the
To develop the theme, you need to follow the Configuration to config the
development section in the
Next, run this command to run the development server.
https://localhost:8080/?preview_theme_id=[theme_id] with your browser to see the result.
Shopify Theme Check
To follow Shopify Theme best practices, you need to install Shopify Theme Check.
Visual Studio Code Extensions
To speed up your productivity, you can install these extensions:
To deploy the theme, you need to follow the Configuration to config the
production section in the
Next, run this command to deploy the theme to your production store.
- Next Shopify Storefront • A real-world Shopping Cart built with TypeScript, NextJS, React, Redux, Apollo Client, Shopify Storefront GraphQL API, ... and Material UI.
- Shopify Theme Customizer • An effective development tool for customizing existing Shopify themes. It's built with Gulp, Theme Kit, Theme Check, BrowserSync, ... and Passion.
- Shopify Data Faker • A Shopify development tool for generating dummy store data.