Vela Colors
Many color settings in Reach are customizable, with clear self-explanatory names in the settings. Click on a swatch to edit the colors. A popup with a color selector will appear, which allows you to adjust and experiment with custom colors.
Color select box
The label on the right signifies "transparent", while the box to the left represents the color you've selected. You can also enter a specific color hex code in the bottom right corner if you wish (e.g. #ff4000). This is handy for matching precise colors across your store. For instance, if you want to match your Text color primary, you could copy the hex code from the former and place it in the field for the latter. The below shows the list of colors you have recently used for your store.
Vela Typography
Our themes comes with a config of hand-picked fonts for your store. You can use google fonts or your custom fonts. Font size can be set for your store by using range slider.
Font Family Special (google font)
Google Fonts make it easy to bring quality typography to your online store. All Google Fonts are open source. This means that you are free to use them in your Shopify store.
a. Choose a font and copy the link code
Visit Google Fonts.
Use the search and filter functions to find a font you want to use in your Shopify online store.
Click the plus button for each font style that you want.
Click (x) Families Selected at the bottom of the page to view the fonts you have selected.
Copy the href url in the Standard area by highlighting it and pressing ctrl + C on a PC or command + C on a Mac.
b. Add the link code to your theme
In a new browser tab, open your Shopify admin.
From your Shopify admin, go to Online Store > Themes.
Choose tab Theme settings and open panel Vela Typography
Paste the code you copied from Google Fonts in input Google font URL
Enter the Google Fonts name in the textbox Fonts name
Vela Features
On the Vela Features, you can customize the main features of the theme. You can enable/disable and config for each features.
1. Font icon awesome
Enable/disable Font icon awesome. see guide
2. Product reviews
Enable/disable product review app. You need to install the app into your store to use.
4. Loading site
Enable/disable loading icon when access to website.
Quickview
1. Customize
Enable/disable and config product quickview on product box item.
+ Show product short description: Show/hide product short description on product quickview box.
+ Show product SKU: Show/hide product SKU on product quickview box.
+ Show availability: Show/hide product availability on product quickview box.
+ Show product type: Show/hide product type on product quickview box.
+ Show vendor: Show/hide product vendor on product quickview box.
+ Quantity type: Text/dropdown.
+ Product option picker type: Button/dropdown.
2. Display
Cart Page
1. Customize
Cart on your store's, when customer add to cart.
+ Cart type: Choose cart type displayed when add product to the cart
+ Show cart notes: Show/hide cart notes on cart.
2. Display
- Modal
- Drawer
- Page
Social media
1. Social accounts
2.Sharing option
Product Card
- Image ratio
- Display
Cookie Consent
1. Customize
1. Display
Newsletter Popup
1. Customize
1. Display
Favicon
Favicon image: Upload favicon image, and have a .png extension.
Checkout
Under the Checkout section of the theme editor, you can add custom banner images, logos, and backgrounds, as well as customize the fonts and colors used throughout the checkout process.
This is the default configuration of Shopify. You can read more here.