# 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="/files/6micEszsm3izpGyfRX5A" alt="VecomLab Shopify Menu"><figcaption></figcaption></figure> <figure><img src="/files/hQ2cwptViwVtUgc1Rs55" alt="VecomLab Shopify Menu"><figcaption></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.vecomlab.com/ecom-foundations/store-creation/task-21.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.