Shopify Documentation

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:

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.

Sidebar

General settings

Sidebar section allows you to define whether to show the sidebar or not on the products listing 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.
3. Remember to Save the settings.

Sidebar widgets for the Collection and Blog page

Move to the Sections tab and click on the Sidebar tab.

Add Collections section

1. To add the Collections section to the sidebar, press on the Add content and select Collections from the dropdown.



2. The new tab will appear in the Content section.
3. Click on the Collections tab to configure the section.



4. Enter the title for the block. All in-store categories will be displayed in this section. You can add new Collections under the Products > Collections menu.
5. You can delete the section as well. Click Delete in order to remove the section.

Product types section

1. To add the Product types section to the sidebar, press on the Add content and select Product types from the dropdown.



2. The new tab will appear in the Content section.
3. Click on the Product types tab to configure the section.



4. Enter the title for the block.
5. Click Delete to remove the section.

Product vendors section

1. To add the Product vendors section to the sidebar, press on the Add content and select Product vendors from the dropdown.



2. The new tab will appear in the Content section.
3. Click on the Product vendors tab to configure the section.
4. Enter the title for the block.
5. Click Delete to remove the section.

Products section

1. To add the Product section to the sidebar, press on the Add content and select Products from the dropdown.



2. The new tab will appear in the Content section.
3. Click on the Products tab to configure the section.
4. Enter the title for the block and select the Collection.
5. The last added 3 products from the selected collection will be shown in the Products section.
6. Click Delete to remove the section.

Linklist section

1. To add the Linklist section to the sidebar, press on the Add content and select Linklist from the dropdown.



2. The new tab will appear in the Content section.
3. Click on the Linklist tab to configure the section.
4. Choose the linklist to display. Add new linklist under the Online store > Navigation menu.
5. Click Delete to remove the section.

1. To add the block with custom HTML to the sidebar, press on the Add content and select HTML code from the dropdown.



2. The new tab will appear in the Content section.
3. Click on the {/} HTML code tab to configure the section.
4. Enter the code in the Custom HTML option field.
5. Click Delete to remove the section.

Add Banner section

1. To add the Banner to the sidebar, press on the Add content and select Banner from the dropdown.



2. The new tab will appear in the Content section.
3. Click on the Banner (Title) tab to configure the section.
4. To chose the image for the banner, press the Select image button. To upload image, go to the Settings > Files menu and click Upload files button. Note, the image should be more than 270 px wide.
5. Set the banner height (Small/Medium/Large).
6. Specify the Heading for the banner and add some Text you want yo display on the banner.
7. You also can attach the link to the banner.
8. Click Delete to remove the section.

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.

   

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