Shopify Documentation

Typography

Вкладка настройки типографики шаблона. С помощью представленных опций вы можете выбрать нужный шрифт, а также его цвет и размер. Вы можете изменять:

Основной шрифт страниц магазина (base font)

1. Font family — выберите нужный шрифт из выпадающего списка опции;

   

2. Font size — задайте размер шрифта основного текста (от 14 до 16px);

   

3. Color — задайте нужный цвет для основного шрифта. Вы можете выбрать цвет из цветовой палитры.

   

Используйте Hex Color Code, чтобы найти нужный цвет для основного текста сайта. Напр., #58d68d.

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

1. Font Famile — Ubuntu;
2. Font Size — 16px;
3. Color — #4b0404.

Стиль шрифта заголовков (heading font)

1. Font family — выберите нужный шрифт из выпадающего списка опции;

   

2. Font size — задайте размер шрифта основного текста (от 20 до 40px);

   

3. Color — задайте нужный цвет заголовков на вашем сайте. Вы можете выбрать цвет из цветовой палитры;

   

Используйте Hex Color Code, чтобы найти нужный цвет для основного текста сайта. Напр., #58d68d.

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

1. Font Famile — Ubuntu;
2. Font Size — 20px;
3. Color — #f70013.

Цвет текста ссылок (links)

1. Links color — задайте нужный цвет для неактивных ссылок. Вы можете выбрать цвет из цветовой палитры;

   

2. Links hover color — выберите цвет ссылки при наведении (для активной ссылки).

   

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

1. Links color — #000000;
2. Links hover color — #706f70;

Стиль шрифта для заголовков (названий) продуктов (product name)

1. Font size — задайте размер шрифта основного текста (от 14 до 20px);

   

2. Color — задайте нужный цвет заголовков (названий) продуктов на вашем сайте. Вы можете выбрать цвет из цветовой палитры;

   

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

   

Используйте Hex Color Code, чтобы найти нужный цвет для основного текста сайта. Напр., #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 — задайте нужный цвет для цены продуктов на вашем сайте. Вы можете выбрать цвет из цветовой палитры;

   

   Используйте Hex Color Code, чтобы найти нужный цвет для основного текста сайта. Напр., #58d68d.

1. Color — #000000;

1. Color — #ff0000;

Colours

В этом разделе вы можете настравать цвета шаблона. Вы можете выбрать цвет из цветовой палитры. Используйте Hex Color Code, чтобы найти нужный цвет. Напр., #58d68d.

Секция имеет два подраздела: Page colors и Color theme.

Более подробно рассмотрим возможности настройки цветов сайта:

Опции подраздела Page colors помогают изменить фоновые цвета страницы и цвета границ блоков.

Опции подраздела Color theme служат для изменения цвета кнопок, некоторого текста и активных иконок (при наведении или нажатии). В этом подразделе вы можете настроить цвет ссылок, верхней панели, верхней части страницы (header), панели навигации и цвет нижней части страницы (footer).

Настройка иконки сайта (Favicon)

С помощью этой опции вы сможете менять иконку вашего сайта (маленькая иконка, которая отображается на вкладке страницы вашего сайта в браузере). Для иконки используйте любое изображение формата .png (является наиболее подходящим форматом).

Изображение иконки будет сжато до размеров 32 x 32px.

У вас есть возможность загрузить изображение для иконки с вашего компьютера, либо выбрать изображение из библиотеки.

Редактируйте изображение. Для этого выберите Edit image из раскрывающегося списка опции Update.

Напишите краткое описание изображения, что бы улучшить поисковую оптимизации (SEO) и повысить уровень доступности изображения для людей со сниженной остротой зрения.

Sidebar

General settings

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.

Настройка кнопок "Поделиться"

Отображайте на странице описания товара кнопки "Поделиться" самых известных социальных сетей, таких как Facebook, Twitter, Google+, Pinterest.

Отображайте/Скрывайте кнопки "Поделиться". Для этого, уберите галочки напротив той социальной сети, кнопку которой хотите скрыть.

Результат:

Products Badge

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 automaticaly 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.

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.

Let's review the options available:

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.

Страница оплаты (Checkout)

В этом разделе представлены настройки внешнего вида страницы оформления заказа. Вы можете настроить баннер, логотип, заголовок страницы, а также цвета кнопок.

Более подробно рассмотрим параметры настройки страницы оплаты:

Wishlist

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

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 visiable 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 avaliable:

1. Activate the Enable wishlist option to use the "Wishlist" functionality for your store.
2. Then choose the 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 aligment type for the product images