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.

Velatheme

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.

Velatheme

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.

Velatheme
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.

Velatheme

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.

Velatheme

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.

Product reviews

Velatheme
3. Go to top

Enable/disable button Go to top.

Velatheme
4. Loading site

Enable/disable loading icon when access to website.

Quickview

1. Customize
Velatheme

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
Velatheme

Cart Page

1. Customize
Velatheme

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

Velatheme
Velatheme

- Drawer

Velatheme

- Page

Velatheme

Social media

Velatheme
1. Social accounts
Velatheme
2.Sharing option
Velatheme

Product Card

Velatheme
- Image ratio
Velatheme
- Display
Velatheme

Cookie Consent

1. Customize
Velatheme
1. Display
Velatheme

Newsletter Popup

1. Customize
Velatheme
1. Display
Velatheme

Favicon

Favicon image: Upload favicon image, and have a .png extension.

Velatheme

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.

Velatheme