Skip to main content

Header and logo

Our theme lets you showcase your brand logo directly in the header, and supports two types of logos for different header styles:

  • Transparent logo image – shown when the header is set to transparent, used across standard pages

  • Sticky logo image – shown when sticky header shows up on scrolling up

We also support SVG, which can automatically adapt to the color scheme of the header.

We recommend using both transparent and sticky logo to have the best visual experience for your website

Step 1:​

In your theme editor, open the Header section.

Step 2:​

You’ll see the logo area in the Header section – usually you can use your brand logo here. Click Change to upload a new logo for Transparent logo image

Step 3:​

Scroll down within the Header settings to find the Sticky logo image. Here, you can upload an alternate version of your logo for sticky header.

Or you can select SVG for Logo type. If that's the case, enter the code for your logo in the logo SVG box

You can find the SVG code through these steps:

  1. Go to the theme's Code editor
  2. Upload an SGV file from your device to the folder Assets
  3. Open the SVG file and copy all of the codes inside

Example SVG code:

<svg xmlns="http://www.w3.org/2000/svg" width="116" height="15" viewbox="0 0 116 15" fill="none">
  <path d="M104.768 14.5709V12.1139H108.822C109.61 12.1139 110.265 11.9459 110.786 11.6099C111.307 11.2599 111.701 10.7559 111.968 10.0979C112.236 9.43994 112.37 8.63494 112.37 7.68294C112.37 6.89894 112.285 6.22694 112.116 5.66694C111.947 5.09294 111.694 4.62394 111.356 4.25994C111.032 3.89594 110.617 3.62294 110.11 3.44094C109.617 3.25894 109.033 3.16794 108.357 3.16794H104.768V0.710938H108.252C109.941 0.710938 111.321 0.983937 112.391 1.52994C113.461 2.07594 114.249 2.85994 114.756 3.88194C115.262 4.88994 115.516 6.10094 115.516 7.51494C115.516 8.57894 115.389 9.50294 115.136 10.2869C114.882 11.0709 114.537 11.7359 114.101 12.2819C113.679 12.8279 113.186 13.2689 112.623 13.6049C112.06 13.9409 111.462 14.1859 110.828 14.3399C110.195 14.4939 109.554 14.5709 108.906 14.5709H104.768ZM103.311 14.5709V0.710938H106.351V14.5709H103.311Z" fill="white"></path>
  <path d="M94.5334 14.8621C93.5198 14.8621 92.6118 14.7081 91.8094 14.4001C91.007 14.0781 90.3172 13.6161 89.74 13.0141C89.1769 12.3981 88.7405 11.6491 88.4308 10.7671C88.1351 9.87106 87.9873 8.84906 87.9873 7.70106C87.9873 6.06306 88.2759 4.71206 88.8531 3.64806C89.4303 2.57006 90.2186 1.76506 91.2181 1.23306C92.2317 0.687062 93.372 0.414062 94.639 0.414062C95.6244 0.414062 96.5184 0.575062 97.3208 0.897062C98.1232 1.20506 98.806 1.66706 99.3691 2.28306C99.9463 2.88506 100.39 3.64106 100.699 4.55106C101.009 5.44706 101.164 6.47606 101.164 7.63806C101.164 8.82806 101.009 9.87106 100.699 10.7671C100.39 11.6631 99.9392 12.4191 99.348 13.0351C98.7708 13.6371 98.0739 14.0921 97.2574 14.4001C96.4409 14.7081 95.5329 14.8621 94.5334 14.8621ZM94.6179 12.4471C95.364 12.4471 95.9904 12.2651 96.4972 11.9011C97.004 11.5371 97.3912 11.0121 97.6587 10.3261C97.9261 9.64006 98.0599 8.80006 98.0599 7.80606C98.0599 6.77006 97.9191 5.88806 97.6375 5.16006C97.3701 4.43206 96.9759 3.87906 96.455 3.50106C95.9341 3.10906 95.3006 2.91306 94.5545 2.91306C93.8225 2.91306 93.196 3.10206 92.6752 3.48006C92.1684 3.84406 91.7742 4.37606 91.4926 5.07606C91.2252 5.77606 91.0914 6.64406 91.0914 7.68006C91.0914 8.43606 91.1689 9.11506 91.3237 9.71706C91.4926 10.3051 91.7249 10.8021 92.0206 11.2081C92.3162 11.6141 92.6822 11.9221 93.1186 12.1321C93.555 12.3421 94.0548 12.4471 94.6179 12.4471Z" fill="white"></path>
  <path d="M79.5422 14.5886C78.5286 14.5886 77.6206 14.4346 76.8182 14.1266C76.0158 13.8046 75.3259 13.3426 74.7488 12.7406C74.1857 12.1246 73.7493 11.3756 73.4395 10.4936C73.1439 9.59762 72.9961 8.57562 72.9961 7.42762C72.9961 5.78962 73.2847 4.43862 73.8619 3.37462C74.4391 2.29662 75.2274 1.49162 76.2269 0.959624C77.2405 0.413625 78.3808 0.140625 79.6478 0.140625C80.6332 0.140625 81.5271 0.301625 82.3296 0.623625C83.132 0.931625 83.8148 1.39362 84.3779 2.00962C84.9551 2.61162 85.3985 3.36762 85.7082 4.27763C86.0179 5.17362 86.1728 6.20262 86.1728 7.36462C86.1728 8.55462 86.0179 9.59762 85.7082 10.4936C85.3985 11.3896 84.948 12.1456 84.3568 12.7616C83.7796 13.3636 83.0827 13.8186 82.2662 14.1266C81.4497 14.4346 80.5417 14.5886 79.5422 14.5886ZM79.6267 12.1736C80.3728 12.1736 80.9992 11.9916 81.506 11.6276C82.0128 11.2636 82.4 10.7386 82.6674 10.0526C82.9349 9.36662 83.0687 8.52662 83.0687 7.53262C83.0687 6.49662 82.9279 5.61462 82.6463 4.88663C82.3788 4.15863 81.9847 3.60563 81.4638 3.22762C80.9429 2.83562 80.3094 2.63963 79.5633 2.63963C78.8313 2.63963 78.2048 2.82862 77.684 3.20662C77.1772 3.57062 76.783 4.10262 76.5014 4.80262C76.234 5.50262 76.1002 6.37062 76.1002 7.40662C76.1002 8.16262 76.1776 8.84163 76.3325 9.44363C76.5014 10.0316 76.7337 10.5286 77.0293 10.9346C77.325 11.3406 77.691 11.6486 78.1274 11.8586C78.5638 12.0686 79.0636 12.1736 79.6267 12.1736Z" fill="white"></path>
  <path d="M55.6092 14.5709L52.4629 0.710938H55.7782L57.8476 11.9879H58.0799L60.5294 0.710938H64.3937L66.8432 11.9879H67.0966L69.166 0.710938H72.3124L69.1238 14.5709H64.8794L62.5143 3.29394H62.3243L59.9592 14.5709H55.6092Z" fill="white"></path>
  <path d="M40.5771 14.5709V0.710938H43.639V14.5709H40.5771ZM42.6888 14.5709V12.1139H51.3254V14.5709H42.6888ZM42.6888 8.69094V6.44394H50.2696V8.69094H42.6888ZM42.6888 3.14694V0.710938H51.2832V3.14694H42.6888Z" fill="white"></path>
  <path d="M32.611 14.8621C31.6959 14.8621 30.8724 14.7711 30.1403 14.5891C29.4224 14.4211 28.803 14.1621 28.2821 13.8121C27.7753 13.4481 27.3741 13.0001 27.0785 12.4681C26.7969 11.9221 26.635 11.2991 26.5928 10.5991L29.2534 9.73806C29.2816 10.3681 29.4365 10.8931 29.718 11.3131C30.0136 11.7331 30.4289 12.0411 30.9639 12.2371C31.4988 12.4331 32.0971 12.5311 32.7588 12.5311C33.3923 12.5311 33.9272 12.4541 34.3636 12.3001C34.8 12.1461 35.1309 11.9431 35.3561 11.6911C35.5814 11.4251 35.694 11.1381 35.694 10.8301C35.694 10.4661 35.5532 10.1721 35.2716 9.94806C34.9901 9.72406 34.603 9.53506 34.1102 9.38106C33.6316 9.22706 33.0826 9.08006 32.4632 8.94006C31.7734 8.78606 31.0906 8.61106 30.4149 8.41506C29.7532 8.21906 29.1479 7.96706 28.5988 7.65906C28.0639 7.35106 27.6345 6.95206 27.3107 6.46206C27.001 5.97206 26.8462 5.35606 26.8462 4.61406C26.8462 3.76006 27.0573 3.02506 27.4797 2.40906C27.9161 1.77906 28.5496 1.28906 29.3801 0.939062C30.2107 0.589062 31.2102 0.414062 32.3787 0.414062C33.5612 0.414062 34.5678 0.589062 35.3983 0.939062C36.243 1.27506 36.8976 1.75806 37.3622 2.38806C37.8267 3.00406 38.0801 3.73906 38.1224 4.59306L35.3772 5.34906C35.3772 4.91506 35.3068 4.53706 35.1661 4.21506C35.0253 3.89306 34.8282 3.62706 34.5748 3.41706C34.3214 3.19306 34.0047 3.02506 33.6246 2.91306C33.2585 2.80106 32.8362 2.74506 32.3576 2.74506C31.8085 2.74506 31.3299 2.81506 30.9217 2.95506C30.5275 3.09506 30.2248 3.28406 30.0136 3.52206C29.8166 3.76006 29.718 4.04006 29.718 4.36206C29.718 4.74006 29.8729 5.05506 30.1826 5.30706C30.5064 5.54506 30.9287 5.74106 31.4496 5.89506C31.9845 6.04906 32.5687 6.19606 33.2022 6.33606C33.8076 6.46206 34.4199 6.62306 35.0394 6.81906C35.6729 7.00106 36.2571 7.24606 36.792 7.55406C37.3411 7.84806 37.7775 8.25406 38.1013 8.77206C38.4391 9.27606 38.6081 9.91306 38.6081 10.6831C38.6081 11.5231 38.3828 12.2581 37.9323 12.8881C37.4818 13.5181 36.8061 14.0081 35.9051 14.3581C35.0182 14.6941 33.9202 14.8621 32.611 14.8621Z" fill="white"></path>
  <path d="M21.4629 14.5709V0.710938H24.567V14.5709H21.4629Z" fill="white"></path>
  <path d="M3.14636 14.5709L0 0.710938H3.31529L5.3847 11.9879H5.61698L8.0665 0.710938H11.9308L14.3803 11.9879H14.6337L16.7031 0.710938H19.8495L16.6609 14.5709H12.4165L10.0514 3.29394H9.8614L7.49635 14.5709H3.14636Z" fill="white"></path>
</svg>
tip

Tips for Best Results

  • Use the same size for both logos to maintain consistent layout.

  • Upload your logo at 2x the intended display size. For example, if you want it to appear as 140px wide, upload a 280px wide image for sharpness on high-res screens.

  • Choose a horizontal layout for your logo when possible. Vertical, round, or square logos may cause the header to look oversized or unbalanced.