Decrease the size of a logo

Store Design
, ,

Topic summary

A user seeks help reducing the size of an interactive sphere logo at the bottom of their website (swawe.store) that responds to cursor hover.

Solution Provided:

  • Navigate to Online Store → Theme → Edit code
  • Locate the base.css file
  • Add CSS code targeting .container .sphere with width and height set to 250px (adjustable to smaller values as needed)
  • Save the changes

Additional Request:
The user also wants to replace the current 2D logo inside the sphere with a new 3D video logo.

Proposed Approach:

  • Add CSS code in theme.liquid before the </body> tag
  • Use background-image: url("your image url here") targeting the .sphere class

The discussion remains ongoing as the user explores how to implement the 3D video replacement, though the sizing issue has a clear technical solution involving CSS modifications.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

I want to decrease the size of this logo I have added in my website https://swawe.store/
it’s an interactive logo that moves when cursor hovers over it, I also want to replace this logo with some another file I have created as mp4

Screenshot 2024-06-22 at 09.47.30.png
Screenshot 2024-06-22 at 09.47.30.png2831×1274 171 KB

2

Hello @attackon

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.sphere { width: 200px !important; /*adjust according to you*/ height: 200px !important; /*adjust according to you*/ }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

3

Hello @attackon

Can you please confirm that for which logo do you want to decrease the size, the main header logo or the bottom sphere logo ?

4

bottom sphere logo

5

  • Here is the solution for you

  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • Then find the base.css file.

  • Then add the following code at the end of the file and press ‘Save’ to save it.

.container .sphere {
 width: 250px !important;
 height: 250px !important;
}

  • If you want it to be smaller, reduce 250 to a smaller number.

  • Here is the result you will achieve:

BSSTekLabs_0-1719032087465.png
BSSTekLabs_0-1719032087465.png1899×878 90 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
6

I want to replace that logo too, how do I do it with a 3d video

7

don’t understand what you want?

8

I want to put a new 3d logo in place of that 2d logo in sphere which is currently there

9

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.sphere { background-image: url("add your image url here") !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.