Image slider

NgocLe1
Excursionist
68 0 2

Can anybody please help me create an image slider for multiple product images, but I don't want to display the thumbnail? Thank you!

Link: https://2cb7cc-ab.myshopify.com/

Pass: Minitrampoline

Replies 6 (6)

Jack_Khan_Baba
Shopify Partner
90 8 14

where you want to add the slider? on home page or on product page?

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Chat on WhatsApp: +923143054166
Need a Shopify developer? Hire us at naimatullahts335@gmail.com
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
NgocLe1
Excursionist
68 0 2

On the product page for all the product images

BSS-TechFusion
Shopify Expert
149 26 15

Hi @NgocLe1 , You can follow my instructions! 

 

Go to Themes -> Edit Code.

 

BSSTechFusion_0-1714819101533.png

 

Find the file theme.liquid. Add the following CSS snippet before the closing head tag (</head>)

It will look like this

 

BSSTechFusion_1-1714819121008.png

 

@media screen and (min-width: 750px) {
  [id^="Slider-"].product__media-list {
    display: flex !important;
    overflow-x: auto;
    width: 100% !important;
  }
  [id^="Slider-"].product__media-list  > li {
    width: 100%;
  }
  [id^="GalleryThumbnails-"] {
    display: none !important;
  }
  .slider--mobile+.slider-buttons {
    display: flex !important;
  }
}

 

The achieved result

 

BSSTechFusion_2-1714819158513.png

 

I hope these instructions will help you. If they are helpful, don't forget to like and mark as the solution.

 

 

 

 

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

BSS-TechFusion
Shopify Expert
149 26 15

Hi @NgocLe1 , You can try to follow my instructions.

 

Go to Themes -> Edit Code.

 

BSSTechFusion_0-1714965503060.png

 

Find the file theme.liquid. Add the following CSS snippet before the closing head tag (</head>)

It will look like this

 

BSSTechFusion_1-1714965531946.png

 

 

 

@media screen and (min-width: 750px) {
  [id^="Slider-"].product__media-list {
    display: flex !important;
    overflow-x: auto;
    width: 100% !important;
  }
  [id^="Slider-"].product__media-list  > li {
    width: 100%;
  }
  [id^="GalleryThumbnails-"] {
    display: none !important;
  }
  .slider--mobile+.slider-buttons {
    display: flex !important;
  }
}

 

 

The achieved result

 

BSSTechFusion_3-1714965577205.png

 

I hope these instructions will help you. If they are helpful, don't forget to like and mark as the solution.

 

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

BSS-TechFusion
Shopify Expert
149 26 15

Hi  @NgocLe1  , You can try to follow my instructions.

Go to Themes -> Edit Code.

 

BSSTechFusion_0-1714966751961.png

 

Find the file theme.liquid. Add the following CSS snippet before the closing head tag (</head>)

It will look like this

 

BSSTechFusion_1-1714966767299.png

 

@media screen and (min-width: 750px) {
  [id^="Slider-"].product__media-list {
    display: flex !important;
    overflow-x: auto;
    width: 100% !important;
  }
  [id^="Slider-"].product__media-list  > li {
    width: 100%;
  }
  [id^="GalleryThumbnails-"] {
    display: none !important;
  }
  .slider--mobile+.slider-buttons {
    display: flex !important;
  }
}

 

The achieved result

 

BSSTechFusion_2-1714966807072.png

 

I hope these instructions will help you. If they are helpful, don't forget to like and mark as the solution.

 

 

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

BSS-TechFusion
Shopify Expert
149 26 15

Hi @NgocLe1 , you can follow my instruction

Go to Themes -> Edit Code.

 

BSSTechFusion_3-1714966929903.png

Find the file theme.liquid. Add the following CSS snippet before the closing head tag (</head>)

It will look like this

 

BSSTechFusion_4-1714966942940.png

@media screen and (min-width: 750px) {
  [id^="Slider-"].product__media-list {
    display: flex !important;
    overflow-x: auto;
    width: 100% !important;
  }
  [id^="Slider-"].product__media-list  > li {
    width: 100%;
  }
  [id^="GalleryThumbnails-"] {
    display: none !important;
  }
  .slider--mobile+.slider-buttons {
    display: flex !important;
  }
}

The achieved result

 

BSSTechFusion_5-1714966967073.png

If you find it useful, please give us a like and mark it as a solution. Thank ^^

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development