Task #21: Online Store - Edit Code

Оптимизация магазина на Shopify: форум, код, дизайн, платежи. Тема Dawn. Важные шаги в видео-руководстве!

Цель

Настроить Online Store - Edit Code.

В этом видео объяснил несколько важных шагов для успешной настройки вашего магазина на платформе Shopify. Узнаете, как открыть форум Shopify, взаимодействовать с чатом поддержки, редактировать код темы Dawn, настраивать отображение элементов дизайна, добавлять иконки платежных систем в футер и многое другое.

Описание

• Тема Dawn требует дополнительной настройки кода.

Инструкция

1. Убрать иконку поиска на сайте;

2. Сделать изображение по размеру;

3. Сделать заголовок по центру для блока Multicolumn;

4. Сделать видео для блока Image with text;

5. Изменить цвет текста цены продукта на красный;

6. Показать иконки платежных систем;

7. Сделать селектор и кнопку добавления в корзину на одном уровне.

Действия

Убрать иконку поиска на сайте:

.header__icon--search {
    display: none;
}

Сделать изображения по размеру:

.image-with-text__media img {
    object-fit: contain;
}

Сделать заголовок по центру для блока Multicolumn:

.multicolumn [class^='title']{
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
}

Изменить цвет текста цены продукта на красный:

.price .price-item {
    color: #FA4545;
}

Показать иконки платежных систем:

Choose which payment icons to displayShopify Help Center

Сделать селектор и кнопку добавления в корзину на одном уровне:

@media (min-width: 380px) {
    .product-form {
        position: relative
    }
    
    .product-form .product-form__buttons {
        position: absolute;
        left: 148px;
        top: -72px;
    }
}

Сделать видео для блока Image with text:

Убрать выбор валюты в мобильном меню

Источник: https://community.shopify.com/c/shopify-design/how-to-remove-currency-selector-in-hamburger-menu-in-dawn-mobile/td-p/2183077

Если используете тему Dawn, добавьте в код в конец файла base.css.

@media only screen and (max-width: 989px){
  .menu-drawer__localization.header-localization {
    display: none;
  }
}

Отзывы

Узнайте, как эта информация помогла другим, и поделитесь своим мнением.

Be the first to write a review about Vecom LAB.Trustpilot

Подписывайтесь на наш Канал в Telegram, чтобы первыми узнавать о новостях и обновлениях.

Если у вас есть вопросы, напишите в наш Чат в Telegram.