Make Gif Size smaller

Store Design
, , , , , , , , , , , , , ,

Topic summary

Goal: Reduce the size of a GIF on a product page (black shirt with white print) on sixdreamz.com.

  • Actionable fix via CSS: Edit base.css and set a smaller fixed height for the GIF within the product media gallery. Example provided targets .product__media-list … li:nth-child(2) img with height: 400px !important, allowing adjustment to any desired size. Steps: Admin → Online store → Themes → Edit code → base.css → add CSS → Save and reload.

  • Alternative suggestions: Add custom code in theme.liquid (either before or above ). However, the actual code snippets are not visible in the thread, so these instructions aren’t directly actionable as posted.

  • Evidence: Screenshots show the expected smaller GIF result. The CSS code snippet is central to understanding and reproducing the change; later replies reference code but do not include it.

  • Status: No confirmation from the original poster and no marked solution. The thread appears unresolved pending feedback or working code for the theme.liquid approach.

Summarized with AI on December 19. AI used: gpt-5.
1

hey,

if you go on my website, pieces, click on the black shirt with a white print on it and scroll down, youre gonna see a gif of someone turning in a circle, i want to make that gif smaller, can you help me?

url: sixdreamz.com

sixdreamz_0-1726962814092.png
sixdreamz_0-1726962814092.png544×1366 374 KB

2 Likes
2

Hi my friend @sixdreamz ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

BSSCommerceB2B_0-1726967077163.png
BSSCommerceB2B_0-1726967077163.png400×195 26.3 KB

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

.product__media-list.contains-media.grid.grid--peek.list-unstyled.slider.slider--mobile li:nth-child(2) .product__media.media.media--transparent img {
    height: 400px !important;
}

In this step, you can change the height smaller or bigger as you want.

In my example, I choose 400px

Step 3: Save and reload home page.

=>> The result:

BSSCommerceB2B_2-1726967134986.png
BSSCommerceB2B_2-1726967134986.png1242×978 89.6 KB

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

3
  • Here is the solution for you @sixdreamz
  • Please follow these steps:
  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before and press ‘Save’ to save it
  • Here is the result you will achieve:

BSSTekLabs_0-1726975382030.png
BSSTekLabs_0-1726975382030.png1809×861 62.7 KB

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

This is Richard from PageFly - Shopify Page Builder App

Hi @sixdreamz Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag

Hope my solution will help you resolve the issue.

Best regards,

Richard | PageFly