Shopify themes, liquid, logos, and UX
Hello there,
I have just done my Shopify side project. My Bootstrap Shopify Theme built with Bootstrap, BEM, Theme Tools, Swiper, Gulp, Parcel, Liquid, SASS, PostCSS, ESNext, ... and Passion.
Looking forward to hearing from your comments!
A. Experience
These are my experience when I have been working on this theme:
If you like the project, please hit the STAR button to support my work.
B. Source Code
⭐
You can get the source code here: https://github.com/maxvien/bootstrap-shopify-theme
C. Demonstration
D. Installation
Clone the source code into your computer.
git clone https://github.com/Maxvien/bootstrap-shopify-theme.git
Install the project's dependencies.
yarn install
E. Configuration
To config the project, you need to copy and rename the config.yml.example file to the config.yml file. Then update the store, password, theme_id properties.
There are two sections in the config.yml file:
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
1. Store Property
To fill the store property, you copy your store's hostname and paste it to the config.yml file.
2. Password Property
To fill the password property, please follow these steps:
2. Theme ID Property
To fill the theme_id property, please follow these steps:
F. Development
To develop the theme, you need to follow the Configuration to config the development section in the config.yml file.
Next, run this command to run the development server.
yarn dev
Open https://localhost:8080/ with your browser to see the result.
1. Shopify Theme Check
To follow Shopify Theme best practices, you need to install Shopify Theme Check.
2. Visual Studio Code Extensions
To speed up your productivity, you can install these extensions:
G. Production
To deploy the theme, you need to follow the Configuration to config the production section in the config.yml file.
Next, run this command to deploy the theme to your production store.
yarn deploy
Great share, thank you!
The project worked, but I couldn't develop it. I don't understand the workflow、Webpack Encore
Hello, can you give a brief introduction to how to start your workflow、I'm not familiar with WebPack、 Parcel、Please tell me What do I need to learn
import { withElements } from 'with-elements' ;
"withElements" what's the meaning?
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024