How to Edit General Theme Settings

On This Page

TABLE OF CONTENTS

• About Theme Settings
• Editing Theme Settings
  • Finding Theme Settings
  • Customizing Theme Settings Sections
    • Theme Configuration & Images
    • Sidebar
    • Colors
    • Typography
    • Social Media
    • Product/Cart Reassurance
    • Grading Guide
    • Pre-Order App by Amai
    • Zippay Setup
    • Checkout

 

About Theme Settings

 

Your Theme Settings are a collection of miscellaneous, useful settings that you can browse through when searching for minute details to edit your store's webpage. The sections you can edit under this heading are:

• Theme Configuration & Images
• Colors
• Typography
• Social Media
• Product/Cart Reassurance
• Grading Guide
• Pre-Order App by Amai
• Zippay Setup
• Checkout

 

Editing Theme Settings

 

Finding Theme Settings

Before you begin your customization, follow these steps to find the Theme settings section:

1. From your myShopify homepage, go to Online Store > Themes
2. Find and click Customize
3. You will see the customization menu on the left of your screen. Scroll to the bottom and click  Theme settings
4. From here you can either click on and edit your desired section

 

Customizing Theme Settings Sections

Theme Configuration & Images

This section is dedicated to customizing several small features across your website. You can customize and edit each of the following:

• Separator Image
• Pre Loader
• Sidebar Settings
• Show Description
• Breadcrumb Setting
• Password Page Settings
• Favicon

 

Separator Image

The Separator Image is an aesthetic addition you can place along the titles of your Home Page section blocks. These images are wide and not very tall, so complex designs do not fit too well. In order to add your image, please click Theme Settings > Theme Configuration & Images > Separator Image > Image > Select Image. We recommend that you experiment in order to find small images that accentuate your store's culture and atmosphere.

 

Please notice the recommended image size in this section. If you choose an image that is too small or too large, the quality will suffer. The recommended image size will look something like this:

 

Pre Loader

The Pre Loader serves as a loading animation. When your customers switch between pages, they will see a loading animation. From this section, you can choose from up to ten animations. We recommend experimenting to find the animation that best fits your site's image.

 

Sidebar Settings

When browsing your website's product or collection pages, you have the option to add an addition menu bar to your pages. This Sidebar is an excellent tool for highlighting premade menus and events or banners. If you have not already, consider visiting How to Customize the Sidebar. With your sidebar already customized and set up, you can find a few more options here. These include:

• Enabled? - This section is for toggling the sidebar On/Off. You can choose to include or remove the sidebar by selecting or deselecting Enabled?
• Select Layout For Collection Page - Here you can choose whether the sidebar menu will be on the left side, the right side, or span the width of the page page. This feature only affects the sidebar menus present on your collection pages.
• Select Layout For Product Page - Here you can choose whether the sidebar menu will be on the left side, the right side, or span the width of the page page. This feature only affects the sidebar menus present on your product pages.

 

Show Description

This section includes a single text box. Above the text box, you will see a short description of this feature: "Length of Characters for Short Product Description in the entire Theme." You can input a numerical value into the text box and that number is the maximum number of character you can use to describe a product on your page. This change affects all descriptions across your website.

 

If you plan to include some products that will require longer, more detailed descriptions, your store will benefit from setting a higher maximum character limit. This is advisable even if most of your products can be described more briefly

 

Breadcrumb Settings

Your Breadcrumb serves as a kind of banner that stretches across the top of your non-home page pages. For example, your customers can see this on collection, product, and blog pages. In this section you are able to customize the following areas:

• Enable Breadcrumb? - This section is for toggling the breadcrumb banner On/Off. You can choose to include or remove it by selecting or deselecting Enable Breadcrumb? If you choose to remove your breadcrumb, both the banner and the page's title will be removed together.
• Background Image - If your store opts for using a Background Image in the breadcrumb banner, you can select it by clicking Theme Settings > Theme Configuration & Images > Breadcrumb Settings > Background Image > Select Image. We recommend choosing an image that best fits your store's culture and image. Please notice the recommended image size in this section. If you choose an image that is too small or too large, the quality will suffer. The recommended image size will look something like this:
  

 

When choosing an image, remember to consider how readable text will or will not be when layered over the Background Image

 

• Background Color - If your store opts not to use a Background Image, the breadcrumb banner can be more simply customized by selecting a color through the color selector.

 

If your store has specific colors or tones that match your themes, there is a text box where a HEX code can be input for quick and easy selection

 

• Text Color - Whether a Background Image or Background Color is chosen, the Text Color is completely customizable. We recommend selecting a color that best matches your store's image and culture; that being said, there may be some difficulty with choosing a readable text color if complex images are chosen. 

 

Text Colors really stand out when they are drastically different from their Background. For example, setting the Background Color (or Background Image) to blue and the Text Color to orange will create a noticeable pop

 

Password Page Settings

When your customers are signing into their store accounts, they will encounter the Password Page. This page has two categories for customization: 

• Background Image -  If your store opts for using a Background Image, you can select it by clicking Theme Settings > Theme Configuration & Images > Password Page Settings > Background Image > Select Image. We recommend choosing an image that best fits your store's culture and image. Please notice the recommended image size in this section. If you choose an image that is too small or too large, the quality will suffer. The recommended image size will look something like this:

 

 

• Background Color -  If your store opts not to use a Background Image, the background can be more simply customized by selecting a color through the color selector.

 

If your store has specific colors or tones that match your themes, there is a text box where a HEX code can be input for quick and easy selection

 

Favicon

The Favicon is the small icon/image that is shown in the tab name of your internet browser. You can customize the icon on your website by clicking Theme Settings > Theme Configuration & Images > Favicon > Favicon Image > Select Image. We recommend choosing an image that best fits your store's culture and image. Please notice the image size warning in this section. If you choose an image that is too small or too large, it will be scaled down. The notification will look something like this: 

 

 

Sidebar

This section allows for quicker and more efficient edits to be made concerning the location of the Sidebar Menus. Here you will find boxes that allow you to toggle on/off this menu across several pages. Here, you can choose to enable or disable the Sidebar Menu on:

• Product Page
• Collection Page
• Blog Page
• Search Page

 

Colors

This section deals with the thematic colors for your store's webpage. You have the ability to customize the following sections of your page:

• Main Color
• Header Color
• Button Color
• Product Color
• Footer Color

 

In each of these sections, you can read about their specific locations and play around to find the colors and combinations that best fit your store's site. Within each of these sections, you will also find further customizable sections. These sections can be divided into two main categories: Color and Hover Color.

 

The Color of each section is customizable; this is the color of that section normally. Some items, like Buttons, change color when you hover your mouse icon over them. You can customize how these colors change in the Hover Color section. 

 

Hover Colors really stand out from their standard Color counterparts when they are drastically different. For example, setting the standard Color to blue and the Hover Color to orange will create a noticeable pop

 

You can fully customize the colors you choose by inputting a HEX code. This is ideal if your store has a set color preference

 

Typography

This section is dedicated to customizing the fonts used on your store's webpage. This theme only has two categories: Primary Font and Title Font.

 

The Primary Font is the font used across all sections of your webpage. It does not include titles or section titles. You can play around with the multiple font choices and find one that best fits your store's image.

 

In contrast, the Title Font is the font used for the titles of your pages and sections. It only includes titles or section titles.

 

Social Media

In this section, you will see short text boxes for inputting your store's social media page links. You can find boxes for each of the following social media platforms:

• Twitter
• Facebook
• Pinterest
• Instagram
• Tumblr
• Snapchat
• YouTube
• Vimeo
• Discord

 

Input the appropriate links into each of these text boxes in order to link your store's social media sites to your store's webpage.

 

If you do not input any text into the text boxes, then the social media icon will not appear on your home page's banner. Clicking these icons will link directly to your social media pages

 

Product/Cart Reassurance

This section is dedicated to adding guarantees and reassurances for your customers for when they are browsing your store's products. Some examples may include: free delivery, customer support, big savings, gift voucher, or the like. This section is divided into the following categories:

• Enabled Product Page? - This section is for toggling the Product Reassurance On/Off. You can choose to include or remove it by selecting or deselecting Enable Product Page? If you choose to remove your reassurance, there is still an option to enable it for your website's cart page.
• Enabled Cart Page? - This section is for toggling the Cart Reassurance On/Off. You can choose to include or remove it by selecting or deselecting Enable Cart Page? If you choose to remove your reassurance, there is still an option to enable it for your website's product page.
• Reassurance Items - If you have decided to include the reassurances on your cart page, product page, or both, you have the option to include up to four. Under each Reassurance Item, Image, Title, and Sub Title are customizable.
  • Image: You can customize the image in your reassurance by clicking Theme Settings > Product/Cart Reassurance > Reassurance Item # > Image > Select Image. We recommend choosing an image that best fits your store's culture and image.
  • Title: You can customize the Title of each reassurance by inputting it within its respective text box
    
  • Sub Title: You can customize the Sub Title, or description/explanation, of each reassurance by inputting it within its respective text box

 

Grading Guide

Your grading guide is a detailed explanation of how trading cards conditions are graded. You can find this guide located on a card's product page. In this section, you will see:

• Grading Guide Image
• Grading Guide Title
• Grading Guide Table

 

Image

You can add an image to appear to the left of your grading guide. We recommend you choose an image that fits the style and culture of your shop.

 

Please note that there is a recommended image size here. If the image you attach here is smaller or larger than this image size, the quality may suffer. The size recommendation looks something like this:

 

The recommended image size is the optimum size for viewing across multiple devices, such as your smartphone, PC, tablet, or smart watch

 

Title

You can input the name you would like to call your Grading Guide in this text box. We recommend you input a name that is appropriate for your store's culture and atmosphere.

 

Table

This larger textbox is where you can input the table data for your grading guidelines. There is already text input here, but if you are interested in changing and editing the text shown, you can edit as your store sees fit.

 

Pre-Order App by Amai

If you have already installed the Pre-Order App from Amai, you can enable or disable it here by clicking Enable the App?

 

Zippay Setup

If you have a Public Key setup for Zippay, you can enable or disable it here by clicking Enabled Zippay?

 

Following this, you should insert the public key into the Public Key text box.

 

Checkout

The last step in your customers' shopping experience will be navigating the Checkout Page. This section of your website, because it is the last page customers will interact with, has the potential to be one of, if not the most, memorable pages on your store's website. As a result of this potential influence, we recommend that your store take full advantage of your capability to customize and personalize this page; create something memorable and visually attractive! This page can be customized in the following areas:

• Banner
• Logo
• Main Content Area
• Order Summary
• Typography
• Colors

 

Banner

Like with other pages, the Banner is a customizable section across the width of the top of your checkout page. You can customize the image by clicking Theme Settings > Checkout > Banner > Background Image > Select Image. We recommend choosing an image that best fits your store's culture and image.

 

If your store opts to not add a Background Image to your Banner, the Main Content Area and Order Summary Area will completely extend from the top to the bottom of your page

 

Logo

You have the option to add a custom Logo to your checkout page. There are several ways you can customize how your image is seen. These include:

• Custom Image - You can add your Logo by clicking Theme Settings > Checkout > Logo > Custom Image > Select Image. If your store opts to not include this custom image, there are no noticeable changes to the checkout page.
• Position - You can position your Logo in your Main Content Area to either the left, center, or right.
• Logo Size - Your store has the option to adjust the size of your Logo. It can be displayed as small, medium  or large.

 

Main Content Area

The Main Content Area in your store's checkout page is where the products that your customers are purchasing will be displayed. This area ought to be clear and understandable for your customers. In order to create an attractive, yet simple portion of your checkout page, the following areas can be customized:

• Background Image - You can customize the Background Image in your Main Content Area by clicking Theme Settings > Checkout > Main Content Area > Background Image > Select Image. We recommend choosing an image that best fits your store's culture and image, while also contrasting well with the overlaid text.
• Background Color -  If your store opts not to use a Background Image, the background can be more simply customized by selecting a Background Color through the color selector.

 

If your store has specific colors or tones that match your themes, there is a text box where a HEX code can be input for quick and easy selection

 

• Form Fields - Here, you have the option to adjust whether the text fields in your Main Content Area are Transparent or White. Here you can play around with these feature to find the setting that best fits your store's image.

 

Order Summary

The Order Summary section serves as a final overview of the products and their prices in your customers' carts. This section helps clearly state both the cost of individual products and a cart's total price. Your store is able to customize the following areas:

• Background Image - You can customize the Background Image in your Order Summary by clicking Theme Settings > Checkout > Order Summary > Background Image > Select Image. We recommend choosing an image that best fits your store's culture and image, while also contrasting well with the overlaid text.
• Background Color -  If your store opts not to use a Background Image, the background can be more simply customized by selecting a Background Color through the color selector.

 

If your store has specific colors or tones that match your themes, there is a text box where a HEX code can be input for quick and easy selection

 

Typography

In this section, you will find the ability to customize and alter the fonts that are used in Headings and Body. The Headings section includes any larger, title text, while the Body will include the smaller, more frequently used descriptive text. You have many, many option for possible fonts. We recommend carefully choosing a font that best fits your checkout page.

 

Colors

The last section for customization in your checkout page involves picking the Colors for different texts across your checkout page. The three areas you can customize colors in are: Accents, Buttons, and Errors. Under each section, there is a brief summary of which portions of the checkout page these three categories fall under. Colors can be quickly and easily chosen through the color selector.

 

If your store has specific colors or tones that match your themes, there is a text box where a HEX code can be input for quick and easy selection

 

Checkout Settings

For further checkout page customization options, you can visit the Admin Page