Start chat

Shopify Documentation

Documentation for Shopify themes

Theme Configuration

With multiple options you are able to modify the template to your needs. You can edit font family, font color and size, theme color scheme, banner and slider images, etc.

Navigate to the Online Store > Themes section.

Select the theme you want to modify.

Click on the Customize theme button to open the settings editor page where you can change the appearance and content of the theme.

Go to the General settings tab.

This is Live editor, you can track changes in the appearance of your store without reloading the page.

In your installed theme you will see the following options:

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:

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.
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:    
Background image - set a background image. You can upload image from your computer or select image from your library. Image repeats vertically and horizontally.
Background color - set a background image (in case Background image is disabled). You can select a color from the Color Palette.
Form fields - use this field if you want to have Form fields white or transparent.
Order summary:    
Background image -
set a background image. You can upload image from your computer or select image from your library. Image repeats vertically and horizontally.
Background color -
set a background color (in case Background image is disabled). You can select a color from the Color Palette.
Typography:    
Headings - choose a font family for headings from the dropdown.
Body - choose a font family for the checkout main text from the dropdown.
Colors:    
Accents - choose a color for links, highlights, and checkmarks. You can select a color from the Color Palette.
Buttons - choose a color for gift card/discount and next step buttons. You can select a color from the Color Palette.
Errors - choose a color for messages and invalid fields. You can select a color from the Color Palette.

Colors

Theme color scheme settings. The colors must be specified in hexadecimal format (for example, #aabbcc). Also, it is possible to select a color from a palette provided.

In this section, you choose the colors for your site. The section includes two subsections: Page colors and Color theme.

The Page colors option controls the Page background color and Border color.

The Color theme is used for alternate button styles, some text and icon hover states, and other places. In this section you can adjust links, top bar, header, navigation and footer colors.

Favicon

You can change the default site favicon (small icon that appears in browser tab) with the png image of your choice.

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

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

You are able to edit an image. Select Edit image from the Update dropdown.

Write a brief description of this image to improve search engine optimization (SEO) and accessibility for visually impaired customers.

Newsletter Popup

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 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. Background image — download the background image for the newsletter. The image should not exceed 700x400px size.

Remember to Save the settings.

 

Products Badge

Product tab is used for enabling and configuring product badges. In order to enable the ‘new’ products badge, you need to specify the number of days after the publishing for the product to be marked as ‘new’. The sales badge has to be set as the percent of the full price or the "Sale" text marker.

You must specify the name of the color option of the product in your language to use color option for products.

There is also an option to enable the border on the product image.

Add "New" and "Sale" badges to product images for the collection page.

Let's review the options available:
  1. To show the labels, you should first enable the Show badge on product option.
  2. 'New' products marker — enter the number of days the product is considered as "New" (the time period starts from the date the product was added).
  3. 'Sale' marker type — set the "Sale" label type (Text or Percent). The "Sale" label appears automatically after the Compare at price is set under the Products > All products section, in case the Show badge on product option is activated.

Remember to Save the settings.

Social Sharing Buttons

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.

Result:

Typography

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

The main font style of your store pages (base font)
  1. Font family — choose a font family from the dropdown;

  2. Font size — set a font size (14 - 16px);

  3. Color — choose a color for the main font. You can select a color from the Color Palette.

    You can use Hex Color Code to find a desired color. E.g. #58d68d.

  1. Font Family — Roboto Slab;
  2. Font Size — 14px;
  3. Color — #7777777.

  1. Font Family — Ubuntu;
  2. Font Size — 16px;
  3. Color — #4b0404.
The titles' font style (heading font)
  1. Font family — choose a font family from the dropdown;

  2. Font size — set a font size (20 - 40px);

  3. Color — choose a color for the Titles. You can select a color from the Color Palette.

    You can use Hex Color Code to find a desired color. E.g. #58d68d.

  1. Font Family — Arial;
  2. Font Size — 30px;
  3. Color — #000000.

  1. Font Family — Ubuntu;
  2. Font Size — 20px;
  3. Color — #f70013.
Links' text color (links)
  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.

  1. Links color — #000000;
  2. Links hover color — #d10546;

  1. Links color — #000000;
  2. Links hover color — #706f70;
Product names
  1. Font size — set a font size (14 - 20px);

  2. Color — choose a color for the product name. You can select a color from the Color Palette.

  3. Hover color — choose the product name color when the mouse is moved over the name.

  4. You can use Hex Color Code to find a desired color. E.g. #58d68d.

  1. Font Size — 18px;
  2. Color — #000000;
  3. Hover color — #d10546.

  1. Font Size — 20px;
  2. Color — #000000;
  3. Hover color — #d10546.
Product price
  1. Color — choose a color for the product price. You can select a color from the Color Palette.

    You can use Hex Color Code to find a desired color. E.g. #58d68d.

  1. Color — #000000;

  1. Color — #ff0000;

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

Login to you Shopify store Admin Panel and go to Online Store, then tap Pages.

Click the Add page button.

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 (4).

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