Monstroid

  • Introduction
  • Theme installation
  • General Theme Settings
    • Typography
    • Color
    • Favicon
    • Sidebar
    • Wishlist
    • Pages and Layout
    • Security
    • Newsletter
    • Product
    • Social Sharing Buttons
    • Social Link
    • Contact Info Block
    • Checkout
  • Home Page Management
    • Header Area
    • Home Page Area
    • Footer Area
  • 'How to' Vendy Issues
    • How to edit Powered By Shopify link
    • How to manage the Product Image Size
    • How to manage a Delivery policy on the product page
    • How to edit the About us page
    • How to edit the Cart page
    • Google Map on the contact us page
    • How to manage Product Badges
    • Instagram Feed
    • How to install .fig file in theme
  • Helpfull Resources
  • Addendum

Theme Settings

In order to manage general theme setting, navigate to Online Store -> Themes and click Customize button at the top right corner.

On the Customizer page, scroll to the bottom of the screen, click on Theme settings.

Typography

The section where you can change the typography settings, such as font family, font size and color. You can modify the following settings:

Base Font

Here you can change the main font style of your store pages.

  1. Font family — choose a font family;
  2. Font size — set a font size (max 14px);
  3. Main Color — choose a color for the main font. You can select a color from the Color Palette.
Heading Font

Here you can manage the title font style.

  1. Heading Font Family — choose a font family for the heading;
  2. Font size (H1) — set a font size for H1 (max 72px);
  3. Font size (H2) — set a font size for H2;
  4. Font size (H3) — set a font size for H3;
  5. Font size (H4) — set a font size for H4;
  6. Font size (H5) — set a font size for H5;
  7. Font size (H6) — set a font size for H6;
  8. Heading Color — choose a color for the Titles. You can select a color from the Color Palette.
Links

Here you can set links text color.

  1. Links color — choose a color for the Links. You can select a color from the Color Palette;
  2. Links hover color — choose the link color when the mouse is moved over the link.
Product Name
  1. Color #1 — choose a color for the product name. You can select a color from the Color Palette;
  2. Hover Color #1 — choose the product name color when the mouse is moved over the name.
Product Price
  1. Price Color — choose a color for the product price;
  2. Regular Color — choose a color for the regular product price;
  3. Sale Color — choose a color for the product on sale.
Color

In this section, you choose the colors for your site. The colors must be specified in hexadecimal format (for example, #aabbcc). Also, it is possible to select a color from a palette provided.

The section includes such subsections: Page Colors, Main Colors, Adjective Colors, Alerts Colors, Default Button, Primary Button, Secondary Button.

  1. Page Colors — option controls the Page background color, Page Main Color, and Border color.
  2. Main Colors — option controls the Primary, and Secondary colors of the store.
  3. Additional Colors — set extra colors.
  4. Alerts Colors — highlight colors for the important texts of high value, or notifications as: info, success, warning, and danger.
  5. Default Button — is used for default button styles: button text, background, border color, and button hover states.
  6. Primary Button — use primary colors for primary actions like buttons, icons, and text on navigation and tabs, and for the background in navigation and tab interactive states.
  7. Secondary Button — use secondary colors for secondary and tertiary buttons and the background of form elements.

Favicon

Favicon is a small icon that serves as branding for your website.

Favicon image will be scaled down to 32 x 32px.

You can upload image from your computer or select image from your library.

Select Change to modify the favicon. Click Edit to make some changes, or click Remove to delete the icon.

Sidebar

The sidebar section allows you to define whether to show the sidebar or not on the collection page and the blog page. You can also choose the right or left position for the sidebar.

  1. Enable the Show sidebar option to display sidebar.
  2. Choose the sidebar position (Left or Right).
  3. Remember to Save the settings.

Wishlist

A wishlist is an eCommerce feature that allows shoppers to create personalized collections of products they want to buy.

Wishlist tab provides an option to enable wishlist functionality. You can also create a Wishlist page using the "page.wishlist" template, and select it here.

Create the new page

1. Login to you Shopify store Admin Panel and go to Online Store, then tap Pages. Click the Add page button.

2. Enter the Title for the page (1). Note, the title is visible on the frontend.

Set the page as Visible (2) and select the template for this page (3).

Save the page.

Let's review the options available:
  1. Activate the Enable wishlist option to use the "Wishlist" functionality for your store.
  2. Then choose the page for the wishlist.

Remember to Save the settings.

Settings for the Wishlist Page
  1. Product image size — set the products image size (Amall/Medium/Large)
  2. Product image alignment — choose the alignment type for the product images

Pages and Layout

This block allows setting the options for pages and Header and Footer layouts.

  1. Header Layout
  2. Footer Layout
  3. RTL Direction - Shopify supports Right-to-Left languages such as Arabic and Hebrew.
  4. Contact Page
  5. Password Page

Security

You can protect your store content from copywriting by checking the box.

Newsletter

Email newsletter has always been the important part of every marketing strategy. Displays the popup window with subscription form right after the client visits your site.

Newsletter tab allows you to access the subscription settings via Shopify native form or Mailchimp depending on your choice.

You may also enable and configure a pop-up window for the subscription, selecting its display frequency (in days) and adding text and the background image.

  1. To display the labels, you should first activate the Enable newsletter popup option.
  2. Pop-up disable expiration (in days) — set the number of days to show the pop-up again after the user clicks the 'Don't show this message again' button.
  3. Newsletter Popup Type - set the type of the newsletter.
  4. Newsletter Header - write down a newsletter popup title.
  5. Discount Percent - set a discount
  6. Newsletter Description - write down a newsletter popup message.
  7. Background image — download the background image for the newsletter. The image size should be 400x530px.

Product

Here you can manage the main Product settings.

  1. Product price - Show variants price.
  2. Show badge on product - you can set the following badges for your store:
    1. New
    2. Sale
    3. Percent sale
    4. Badge out of stock
  3. Custom badge - you can set specific badges for your products. Like: "Online online", "Best price", etc.
  4. Product reviews - to show the products review you need to install an official Shopify App Product Review.
  5. Product Color - specify the product color.
  6. Product Size - specify the size option for the product.

Social Sharing Buttons

You can show your social media icons on the Product Page.

Show/Hide product social sharing buttons. In order to hide the social share button, disable the Checkbox.

Social Link

You can display social links in Header and Footer areas like Facebook, Twitter, YouTube, Instagram, Pinterest, Linkedin in the footer area of your online store.

Contact Info Block

Contacts info block allows you to display the section with specified address, the office hours, phone number in the footer.

Checkout

This section presents the appearance settings for the order page. You can customize the banner, logo, page title, as well as the buttons color.

Let's review the Checkout configuration:

  1. Banner - set a background image. The recommended size is 1000 x 400px. You can upload image from your computer or select image from your library.
  2. Logo - set a custom image for Logo. You can upload image from your computer or select image from your library.
    • Position (Logo position) - select a suitable Logo position from the option dropdown (Left/Center/Right).
    • Logo size - select a suitable Logo size from the option dropdown (Small/Medium/Large).
Main content area:
  1. Background image - set a background image. You can upload image from your computer or select image from your library. Image repeats vertically and horizontally.
  2. Background color - set a background image (in case Background image is disabled). You can select a color from the Color Palette.
  3. Form fields - use this field if you want to have Form fields white or transparent.
Order summary:
  1. Background image - set a background image. You can upload image from your computer or select image from your library. Image repeats vertically and horizontally.
  2. Background color - set a background color (in case Background image is disabled). You can select a color from the Color Palette.
Typography:
  1. Headings - choose a font family for headings from the dropdown.
  2. Body - choose a font family for the checkout main text from the dropdown.
Colors:
  1. Accents - choose a color for links, highlights, and checkmarks. You can select a color from the Color Palette.
  2. Buttons - choose a color for gift card/discount and next step buttons. You can select a color from the Color Palette.
  3. Errors - choose a color for messages and invalid fields. You can select a color from the Color Palette.