Extending the slideshow on home page to full width

Store Design
1

Hiya

New to shopify

How do I extend an image slideshow to full width please on the home page? Currently has white gaps in on the left and right side.

Thanks!

2

Hello @Schmeevey ,
Welcome to Shopify Family

The slider contains the page -witha class that restricts the with to full first try to check the option in the customer

Or You can Share you Store URL and Password if its password protected so I can check and help you out

3

Hiya

Thanks for helping

https://aroradiamonds.co.uk/

So I need to get the slideshow full length please.

Thanks!

4

Hi @Schmeevey

Just follow the steps Below:

  1. Go to online store → theme
  2. select three dots and select code edit
  3. Search for the file theme.css and base.css
  4. past that code at the end
#shopify-section-template--24005792072003__slideshow slideshow-component {
    max-width: 100%;
    padding: 0;
}​

I hope this solution worked for you!
If yes Just like this Reply and Mark it as a Solution and to keep me motivated BUY ME A Coffee

5

Hi @HiliproVA01 ,

Thanks for reaching out to the Shopify Community! I’m Mia from MooseDesk, your go-to Live Chat, WhatsApp and FAQ App here to help you enhance your customer support experience :blush:

Congratulations on setting up your store! To extend your image slideshow to full width on your homepage, you’ll need to adjust the settings in your theme editor or modify your theme’s code. Here’s a step-by-step guide to help you:

1. Check Theme Editor Settings

Most Shopify themes allow you to adjust the width of sections directly in the theme editor:

  • Go to your Shopify Admin > Online Store > Themes.
  • Click Customize next to your active theme.
  • Locate your slideshow section in the left-hand menu.
  • Look for an option like “Full Width” or “Edge-to-Edge” in the settings. Enable this option if available.

2. Modify Theme Code

If your theme doesn’t provide an option for full-width slideshows, you can adjust the code manually:

  • Go to Shopify Admin > Online Store > Themes and click Actions > Edit Code.
  • Look for the file related to your slideshow section. It’s usually named something like slideshow.liquid or located in the Sections folder.

Edit the CSS in your theme.css or base.css file:

.slideshow-class {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

3. Add Customer Support for your New Store

I can see your store is new and it essential to have a Customer Support Tool. I suggest exploring MooseDesk , a free Live Chat, WhatsApp & FAQ App. You can easily reach customer support via WhatsApp, ensuring immediate assistance for inquiries. Also, the widget provide multi self-Service options such as order tracking, widget translation and an FAQ section empower customers to resolve common questions on their own, reducing the need for direct support

MooseDesk_0-1733063125912.png
MooseDesk_0-1733063125912.png204×400 48.5 KB

So this is my answer for your question . If this is helpful for you, please let me know by giving me a ‘LIKE’. If your question is answered please mark this as 'SOLUTION’.

6

Thanks mehran - i did as you have suggested

but now the words of the coding is on the home page under the slideshow

https://aroradiamonds.co.uk/

7

Hi @Schmeevey

This is because you put the CSS in the wrong place

8

Hmm i pasted the code you suggested at the end of the file

9

@Mehran_Ali Are you able to let me know where I should put the code exactly on bass.css

i pasted the code to the end

10

hi @Schmeevey

can you please share the code of bass.css to me I will check that is it correct or not