On This Page

TABLE OF CONTENTS


Getting Started


There are many areas for customization concerning the overall Theme Settings of your store's webpage. This article will focus on working through each of the parts of your webpage's Theme Settings. Because of this, this webpage will be on the longer side; with this in mind, please utilize the On This Page section above to find the specific settings you are looking to work with.


Finding the Theme Settings


In order to utilize the Theme Settings to customize your theme settings, please follow these steps:

  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. To the left of this sidebar, you will notice three icons. Please click the middle icon that looks like a paint brush.
  4. From here, you will find the Theme Settings.



Utilizing the Theme Settings


Once you have found and opened the Theme Settings menu, you will notice several sections for customization. These include:

  • Theme Selector
  • Typography
  • Animation
  • Search
  • Products Grid
  • Global Colors
  • Global Gradients
  • Global Style Settings
  • Global Images
  • Social Media
  • Events
  • Add Ons
  • Checkout
  • Theme Style


Theme Selector

One of the biggest benefits of utilizing Premium Theme Multi is the ability to switch between one of the three themes and overridden theme settings available in Premium Theme Multi through use of the Theme Selector.


Typography

Typography deals specifically with the way that typefaces and fonts are presented generally across the entirety of your theme. You will notice a few areas for customization here. These are:

  • Headings and Buttons Font
  • Heading Base Size
  • Body Text Font
  • Body Text Base Size


Headings and Buttons Font

This section features a button allowing for the general customization of the font used in all of the Headings and Buttons used across your chosen theme. In order to customize this font, please select Change. From here, you can choose the font that best fits your store. It should look something like this:


Headings Base Size

This section features a scrolling cline allowing for the customization of the general size of your Heading text and font. You can choose a number representing a text size between 20px and 36px. We recommend playing around with this feature to find the size that best fits your webpage.


Body Text Font

This section features a button allowing for the general customization of the font used in the Body Text used across your chosen theme. In order to customize this font, please select Change. From here, you can choose the font that best fits your store. It should look something like this:



Body Text Base Size

This section features a scrolling cline allowing for the customization of the general size of your Body text and font. You can choose a number representing a text size between 14px and 20px. We recommend playing around with this feature to find the size that best fits your webpage.


Animation

Animation deals specifically with animated effects present across your store's chosen theme. In this section, you'll notice only one section for customization: Enable Image Zoom


Enable Image Zoom

This section features a check box allowing for Image Zoom to be enabled or disabled. Image Zoom is an animated effect where an image is magnified when customers let their mouse hover over the image.


The Search section deals specifically with how searches function on your chosen setting. In this section, you'll notice several areas for customization. These are:

  • Search Only
  • Show Prices
  • Show Range
  • Show Out of Stock


Search Only

This section features a drop-down menu allowing for customization of how the search bar functions and how results will be filtered. The options are: Products Only; Products and Pages; Products and Blog Posts; Products, Blog Posts and Pages.


Show Prices

This section features a tick box allowing for prices to be shown in the search bar preview. If this is not selected, customers will not see a price until opening the product page.


Show Range

This section features a tick box allowing for the overall range of prices the products and product variants have to be seen in the search preview. If this is not selected, customers will not see a price until opening the product page. 


Show Out of Stock

This section features a tick box allowing for out of stock products to be displayed alongside in stock products in the search preview. If this is not selected, customers will not see any of the out of stock products.


Products Grid

The Products Grid focuses on how products are displayed on their respective product page. These settings will alter all of the product pages across your store's theme. You will notice several areas for customization. These are:

  • Show Vendor
  • Show Secondary Image on Hover
  • Show Discount Label
  • Show Discount As
  • Price Position
  • Product Image Size
  • Show Color Swatch
  • Show Inventory
  • Low Inventory Threshold
  • Show Reviews Badge


Show Vendor

This section includes a tick box allowing for the display of the product's vendor to be enabled or disabled. Vendor customization is possible in your MyShopify's Products tab. 


Show Secondary Image On Hover

This section includes a tick box allowing for a secondary image to pop up to more clearly view the image being hovered over. If not selected, no animation will take place when hovering over an image.


Show Discount Label

This section includes a tick box allowing for a notification of the product discount. If left unchecked, then no discount notification will be displayed.


Show Discount As

This section includes a drop-down menu holding two options: Saving and Percentage. Saving will show the discount amount in the currency of your store, whereas the Percentage will display the discount amount difference as a percentage of the product's original price.


Price Position

This section features a drop-down menu allowing for the customization of the position of a product's price. The two options are: Before Product Title and After Product Title. We recommend choosing the feature that best fits your store's webpage.


Product Image Size

This section features a drop-down menu allowing for the customization of the size of the images on your product pages. The options for image sizes are: Natural, Short(4:3), Square(1:1), and Tall(2:3). We recommend choosing the image size that best fits your store's webpage.


Show Color Swatch

This section includes a tick box that allows for the display of the product's color swatch. If deselected, this swatch will not appear. We recommend playing around with this feature until your store finds the best fitting setting. 


Show Inventory

This section includes a tick box that allows for automatic stock updates if selected. Low stock will be displayed in red, abundant stock will be displayed in green, and no stock will be displayed in grey. If not selected, there will be no stock notifications displayed.


Low Inventory Threshold

This section includes a scrolling cline that allows for the threshold for low stock to be defined. If stock falls beneath the selected number, the stock notification will appear red. If this threshold is set to 0, green text will always appear so long as stock is available.


Show Reviews Badge

This section includes a tick box allowing for the display of badges specific to the reviews. If your product does not have any reviews available yet, then no badges will be present. Before customizing any settings, you need to install Shopify's free Product Reviews application. 


Global Colors

The Global Colors section focuses on customizing all of the colors across your webpage. We recommend playing around with these features in order to find the style that best fits your store. The areas that allow color customization are:

  • Dark Text Color
  • Page Background Color
  • Primary Theme Color
  • Secondary Theme Color
  • Product On Sale Accent Color
  • Product In Stock Color
  • Product Low Stock Color
  • Product Sold Out Color
  • Product Custom Label 1 Background Color
  • Product Custom Label 2 Background Color
  • Product Review Star Color


When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store


Global Gradients

The Global Gradients section focuses on customizing the color gradients used across your webpage. Generally there are two main customizable color gradients: Primary and Secondary Gradients. In this section, you will find several areas for customization. These are: 

  • Primary Gradient Degree
  • Primary Gradient Start Color
  • Primary Gradient End Color
  • Secondary Gradient Degree
  • Secondary Gradient Start Color
  • Secondary Gradient End Color


Primary Gradient Degree

This section features a text box allowing for a numerical input customizing the degree at which the Primary Gradient Start Color fades into the Secondary Gradient End Color. This Primary Gradient Color will appear more frequently than the Secondary Gradient Color; you can see examples of both on any product page with the Pre-Order Button using the Primary Gradient Color and the Buy It Now Button using the Secondary Gradient Color. We recommend playing around with this number to find the gradient that best fits your webpage.


Primary Gradient Start Color

This section allows for the customization of the color that will fade into the Primary Gradient End Color.


When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store


Primary Gradient End Color

This section allows for the customization of the color that will fade from the Primary Gradient Start Color.


When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store


Secondary Gradient Degree

This section features a text box allowing for a numerical input customizing the degree at which the Secondary Gradient Start Color fades from the Primary Gradient End Color. The Primary Gradient Color will appear more frequently than the Secondary Gradient Color; you can see examples of both on any product page with the Pre-Order Button using the Primary Gradient Color and the Buy It Now Button using the Secondary Gradient Color. We recommend playing around with this number to find the gradient that best fits your webpage.


Secondary Gradient Start Color

This section allows for the customization of the color that will fade into the Secondary Gradient End Color.


When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store


Secondary Gradient End Color

This section allows for the customization of the color that will fade from the Secondary Gradient Start Color.


When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store


Global Style Settings

This section focuses on customization of the borders and border style of your webpage. Here you will notice only one section for customization. This section is: Border Radius.


Border Radius

This section includes a sliding cline allowing for the customization of the size of Border Radius. This size can range from 0 to 100 px.


Global Images

The Global Images section focuses on general images used across your webpage. This section includes three images for customization. These are:

  • Default Collection List Image
  • Site Background Image
  • Favicon Image


Default Collection List Image

This is the image used when there is none available for a collection within the collections list page. You can customize this image by clicking Select Image and selecting the chosen image.


Site Background Image

This is the image that will be used as the general background image across your store's webpage. You can customize this image by clicking Select Image and selecting the chosen image.


Favicon Image

This is the image that will be shown in your browser tabs. You can customize this image by clicking Select Image and selecting the chosen image.


Here you can see an example of a Favicon Image:


Social Media

This section focuses on linking your store's Social Media sites to their appropriate link images across your webpage. Each of the following sites will have a customizable text box allowing for input:

  • Facebook URL
  • Twitter URL
  • YouTube URL
  • Twitch URL
  • Discord Invite URL
  • Instagram URL
  • TikTok URL


It will appear something like this:


Events

The Events section focuses on the customization of how your customers will see and interact with your events and the events tab. You will notice several areas for customization. These are:

  • Default View
  • Add to Cart Action
  • Show Participants List
  • Show Grid Calendar
  • Remove HTML from Event Summary
  • Calendar Background Image
  • Google Maps API Key
  • Filter Colors


Default View

This section features a drop-down menu allowing for the customization of the way that customers will see the events displayed. The two options are: Grid and List. We recommend selecting the view that best fits your store's webpage.


Add to Cart Action

The Add to Cart Action focuses on the actions that follow adding an event ticket to a cart. The three options are as follows:


Go to Checkout

Following the action of a customer adding an event ticket to their cart, they will be directed to the checkout page.


Go to Cart

Following the action of a customer adding an event ticket to their cart, they will be directed to the cart page.


Do Nothing - No Redirection

Following the action of a customer adding an event ticket to their cart, nothing else will happen.


Show Participants List

This section features a drop-down menu allowing for participants lists to be visible on the event page. If Yes is selected, visitors viewing this event can see who has signed up for the event. If No is selected, no participants list will be visible.


Show Grid Calendar

This section features a drop-down menus allowing for the customization of how the calendar will be seen by customers visiting the webpage. There are three options to choose from: No Calendar, Default Calendar, and Big Calendar. We recommend choosing the calendar that best fits your webpage.


Remove HTML from Event Summary

This section features a drop-down menu allowing for the customization of how each event's Event Summary will be seen by your store's customers. If selecting Yes, then the Event Summary will hold an HTML link to the event's webpage. If No, no HTML will be linked.


Calendar Background Image

Within this section, you will further notice that you have the ability to add a Calendar Background Image. You can add this image by selecting Select image. After you have chosen your image, you will notice another customization option become available: Add alt text.


Adding alt text is a good way for your to include addition descriptions that will appear just beneath your logo. You can add up to 255 characters to this alt text feature


Google Maps API Key

This section includes a text box allowing for a registered Google API key to be linked. For more information on creating and linking this key, check out Register a Google Maps API Key.


Filter Colors

This section features eight different sections allowing for the full and total customization of colors and how they appear on your Events sections. We recommend playing around with each of these colors in order to customize this section in a way that best fits your store. 


When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store


Add Ons

The Add Ons section features a list of several tick boxes allowing for various Add Ons, whether externally downloaded or not, to be enabled or disabled. We recommend selecting the boxes that best fit your store's needs. The Add Ons boxes are as follows:

  • Allow Users to Add Products to Their Wishlist
  • Allow Users to Build a Decklist
  • Allow Users to Submit a Buylist
  • Have iWish App Installed?
  • Have BookThatApp Installed?
  • Enable Smile: Rewards and Loyalty?
  • Enable Flits - Customer Account Page
  • Enable Meteor Mega Menus
  • Enable Pre-Order App by Amai
  • Show AfterPay
  • Enable Manage Comics 2?


Checkout

This section focuses on customizing your store's checkout page. Because your store's checkout page can be divided into roughly three parts, Banner, Main Content Area, and Order Summary, you will notice that there are many areas for customization. These are:

  • Banner Background Image
  • Logo Custom Image
  • Logo Position
  • Logo Size
  • Main Content Area Background Image
  • Main Content Area Background Color
  • Main Content Area Form Fields
  • Order Summary Background Image
  • Order Summary Background Color
  • Typography Heading
  • Typography Body
  • Accent Color
  • Button Color
  • Error Color


Within this section, you will further notice that you have the ability to add a Banner Background Image. You can add this image by selecting Select image. Please also be aware of the size of the image that you choose. You will notice instructions and recommendations for image size in this section. It will look something like this:



If you choose an image that is larger than the recommended size, the quality and visibility is very likely to suffer as a result. Please understand that this size recommendation is based on optimization across all potential viewing platforms (computer, smartphone, tablet, etc.)


After you have chosen your image, you will notice another customization option become available: Add alt text.


Adding alt text is a good way for your to include addition descriptions that will appear just beneath your logo. You can add up to 255 characters to this alt text feature


Logo Custom Image

In this section, you can add a logo to your Checkout Page. You can add this image by selecting Select image.


After you have chosen your image, you will notice another customization option become available: Add alt text.


Adding alt text is a good way for your to include addition descriptions that will appear just beneath your logo. You can add up to 255 characters to this alt text feature


Logo Position

Once you have added a Logo Custom Image, you can further customize the Logo Position. In this section, you will find a drop-down menu focused on the location of the Logo Image. You will find that you have three options for logo placement: Left, Center, and Right. We recommend selecting the placement that best fits your webpage.


Logo Size

Once you have added a Logo Custom Image and adjusted the Logo Position, you can further customize the Logo Size. In this section, you will find a drop-down menu focused on the size of the Logo Image. You will find that you have three options for logo size: Small, Medium, and Large. We recommend selecting the size that best fits your webpage.


Main Content Area Background Image

Just like with the Banner section, you will notice that you have the ability to add a Main Content Area Background Image. You can add this image by selecting Select image. 


When adding a Background Image, any color chosen for the Background Color will be completely blocked

After you have chosen your image, you will notice another customization option become available: Add alt text.


Adding alt text is a good way for your to include addition descriptions that will appear just beneath your logo. You can add up to 255 characters to this alt text feature


Main Content Area Background Color

If you do not wish to add a Main Content Area Background Image, you will notice that his section allows for a Background Color to be used. 


When adding a Background Image, any color chosen for the Background Color will be completely blocked


When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store


Typography Heading

This section includes a drop-down menu allowing for the customization of the Heading Text used on your store's Checkout page. We recommend playing around with these fonts in order to find the style that best fits your store's page.


Typography Body

This section includes a drop-down menu allowing for the customization of the Body Text used on your store's Checkout page. We recommend playing around with these fonts in order to find the style that best fits your store's page.


Accent Color

This section allows for the customization of Accent Color on your store's Checkout page. Some examples of accents on this page include: Links, Highlights, and Check Marks.


When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store


Button Color

This section allows for the customization of Button Color on your store's Checkout page. Some examples of buttons on this page include: Gift Card, Discount, and Next Step.


When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store


Error Color

This section allows for the customization of Error Color on your store's Checkout page. Some examples of buttons on this page include: Messages and Invalid Fields.


When customizing a section of your webpage and given the option to choose a color, you will have the opportunity to drag the cursor over general colors or input a HEX code for specific shades. We recommend playing around with this feature to come up with what works best for your store


Theme Style

This section focuses on switching between the currently used Theme Style and other added styles. If you have different styles available, you can select the desired style and then select Change Style. Below you will find an image referencing how yours might look: