How can I add an image to the Upscale Theme header?

Store Design
, , ,

Topic summary

Goal: Add a second image on the right side of the header in the Upscale Theme without heavily modifying theme code.

Key points:

  • One view states it can’t be done without code changes (i.e., modifying theme files).
  • A workaround avoids editing Liquid (Shopify’s templating language) by adding a CSS rule in theme.css using a :before pseudo-element on .header-icons to display a background-image.
  • Implementation details: set background-image to the desired URL, adjust width, background-position, background-size, and margin. Feedback notes a height value is missing and should be added for consistent display.

Clarifications:

  • This method modifies CSS only; no Liquid edits are required.
  • The image is injected visually via a pseudo-element, not as semantic HTML content.

New request (unresolved):

  • Another participant asked how to place images on both the left and right sides with the logo centered. No solution provided yet.

Assets:

  • Screenshots/images were shared to illustrate desired header layout and target image.

Status: Partially addressed; CSS-only approach provided for one image. Multi-image/centered logo scenario remains open.

Summarized with AI on December 26. AI used: gpt-5.
4

Hello @benidesign

If you prefer not to modify your Liquid code, there is an alternative method available. Follow the steps outlined below.

  1. Add the below code in theme.css at the bottom of the file
.header-icons:before {
    content: "";
    background-image: url(https://www.maui-girl.com/cdn/shop/files/maui-girl-logo-inline_2x_e2976d42-aade-4756-bee8-8aae364f23f3_250x.png?v=1683919658) !important;
    width: 200px;
    text-align: right;
    background-position: center;
    background-size: cover;
    margin-right: 20px;
}
  1. Replace the image URL with the one you want to use for adding the image

oscprofessional_0-1709193524922.png
oscprofessional_0-1709193524922.png1887×394 102 KB

1 Like