FROM CACHE - en_header

Make the slider full width in the Minimal Theme (11.7.11)

Laavanya
Excursionist
19 1 3

Hey Guys, 

 

I was looking at making the slider full width in the Minimal theme (I really do like some of the features on the theme as compared to others). I looked around this community and didn't quite find an answer. So I mucked around the code a bit, and sort of got it working. I'll post my solution here. Can someone please vett this solution, in that do these changes have other dependencies, that I have overlooked.

 

I made changes to two files i.e theme.liquid and settings_data.liquid. 

In the theme.liquid file, I added the {% section 'slider' %} code before the <main> tag

In the settings_data.json file, I removed the slider object from the content_for_layout object of the current theme.

 

<body id="{{ page_title | handle }}" class="{% if customer %}customer-logged-in {% endif %}template-{{ request.page_type | handle }}">

  {% section 'header' %}
  
  {%comment%} Laavanya: Removed the slider section from the grid, thereby making it a full width slider {% endcomment %}
  {% section 'slider' %}

  <main class="wrapper main-content" role="main">
    <div class="grid">
        <div class="grid__item">
          {{ content_for_layout }}
        </div>
    </div>
  </main>

  {% section 'footer' %}

  {%- if request.page_type == 'index' -%}
    <p id="slideshow-info" class="visually-hidden" aria-hidden="true">
      {{- 'home_page.slideshow.navigation_instructions' | t -}}
    </p>
  {%- endif -%}
----- rest of the body tag code here ------
</body>

 

{
  "current": {
    "enable_wide_layout": true,
    "color_topbar_bg": "#ffffff",
    "color_body_bg": "#ffffff",
    "color_footer_bg": "#ffffff",
    "color_borders": "#dddddd",
    "color_primary": "#f25c54",
    "color_button_primary_text": "#ffffff",
---- rest of the code here ----
},
    "content_for_index": [
      --- Removed the "slider" object from here ---
      "1585913977674",
      "1585818665358",
      "featured-collection",
      "feature-row-0",
      "feature-row-1",+
      "map",
      "1585762205343"
    ]
  },

Any help is appreciated. Thanks.

Replies 11 (11)
oscprofessional
Shopify Partner
12064 1873 2399

Hello @Laavanya,

Please refer below post

https://community.shopify.com/c/Shopify-Design/Make-slides-fill-the-entire-width-of-the-page/td-p/34... 

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
Laavanya
Excursionist
19 1 3

Thanks @oscprofessional for the link. I did see that link before, but that was for the Supply them, hence did not consider it. Do you rekon that is the right way to do it?

oscprofessional
Shopify Partner
12064 1873 2399

@Laavanya,

Can you please share your site url

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
Laavanya
Excursionist
19 1 3

@oscprofessional  aahafood.myshopify.com

pwd: fleigh

oscprofessional
Shopify Partner
12064 1873 2399

@Laavanya,

I checked your site.Slideshow is already full width

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
Laavanya
Excursionist
19 1 3

@oscprofessional ...that's what I had written on my post. I got it to work, but I am not sure if that is the right solution. Apologies, if my post is unclear.

oscprofessional
Shopify Partner
12064 1873 2399

@Laavanya,

You Did with Css.

It's right solution.

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
thevista888
Explorer
65 0 21

Hey @oscprofessional @Laavanya 

Thanks for helping!

I applied the steps and all the pages have the slider now. When I try to disable it from the other pages, it is also disables from the home page too. How can I solve it?

thevista888
Explorer
65 0 21

@Laavanya @oscprofessional 

The problem I was asking here was solved by @suyash1 by this code;

#shopify-section-slider{display:none; visibility:hidden;}

.template-index #shopify-section-slider{display:initial; visibility:visible;}


I posted it here in case somebody need it. Good day!

KAR2
Tourist
9 0 3

@thevista888

 

Can you expand more  on where this CSS goes?

 

I'm using Minimal and the slider code works great, but the slider now shows on all pages. 

 

Thanks in advance!

margapineda
New Member
2 0 0

Hello @Laavanya  

thanks!!!♥️ it works great