# Task #21: Online Store - Edit Code

### Purpose <a href="#purpose" id="purpose"></a>

Customize Online Store - Edit Code.

{% embed url="<https://youtu.be/jliPQL2EpSY>" %}

The video tutorial shows how to set up a store on the Shopify platform. You'll learn how to open a Shopify forum, interact with support chat, edit the Dawn theme code, configure the display of design elements, add payment system icons to the footer, and much more.

### Description <a href="#description" id="description"></a>

* The Dawn theme requires additional code customization

### Instructions <a href="#instructions" id="instructions"></a>

1. Remove the search icon from the site
2. Resize the image
3. Center the heading for the Multicolumn block
4. Add a video to the Image with text block
5. Change the product price text color to red
6. Display payment system icons
7. Align the selector and add to cart button on the same level

### Actions <a href="#actions" id="actions"></a>

**Remove the search icon from the site:**

```
.header__icon--search {
    display: none;
}
```

**Resize the image:**

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

**Center the heading for the Multicolumn block:**

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

**Change the product price text color to red:**

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

**Display payment system icons:**

{% embed url="<https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-credit-card-icons>" %}

**Align the selector and add to cart button on the same level:**

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

**Add a video to the Image with text block:**

{% embed url="<https://www.youtube.com/watch?v=qzYp0MlrCDg>" %}

### Remove the currency selector from the mobile menu <a href="#remove-currency-selector" id="remove-currency-selector"></a>

Source: <https://community.shopify.com/c/shopify-design/how-to-remove-currency-selector-in-hamburger-menu-in-dawn-mobile/td-p/2183077>

If you're using the **Dawn** theme, add the code at the end of the **base.css** file.

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

<div><figure><img src="https://content.gitbook.com/content/xa9ueiMPkj0LsrVay0aB/blobs/98y8VeCfeSml08aCf91j/vecom-lab-info-ru-edit-code-1.jpg" alt="VecomLab Shopify Menu"><figcaption></figcaption></figure> <figure><img src="https://content.gitbook.com/content/xa9ueiMPkj0LsrVay0aB/blobs/Zc4DpKm7g9kwOhoFihpS/vecom-lab-info-ru-edit-code-2.jpg" alt="VecomLab Shopify Menu"><figcaption></figcaption></figure></div>
