How to remove the arrow on the button in the slideshow

Highlighted
Excursionist
33 0 5

Hi

I am using the brookly theme and the button on my slideshow has text and an arrow.  How do I remove the arrow?

Thanks!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
100 0 16

Hey there Kajal!

Cynthia here, a Guru with Shopify :).

I took at look at your theme settings and can see that the code for the arrow icon is located within your slideshow.liquid Section

Go to your Admin->Online Store->Themes area, click the '...' icon, and go to Edit HTML/CSS.
Once you're there, go to Sections on the left and select slideshow.liquid.

Scroll down to lines 73-75, where you'll see this piece of code:

<a href="{{ block.settings.slide_link }}" class="btn hero__cta">
{{ block.settings.slide_cta }} <span class="icon icon-arrow-right" aria-hidden="true"></span>
</a>

What you'll need to do is wrap the arrow icon Span code with comment tags - adding these comment tags will effectively hide the arrow icon. 

The comment tags should look like this:

<a href="{{ block.settings.slide_link }}" class="btn hero__cta">
{{ block.settings.slide_cta }} {% comment %} <span class="icon icon-arrow-right" aria-hidden="true"></span> {% endcomment %}
</a>

You'll want to add {% comment %} before <span class, and add {% endcomment %} after </span>.

Here's a screenshot of what it should look like:

Let me know if you have any troubles or questions and I'll be happy to take a look :).

Cynn | Guru @ Shopify

3 Likes
Highlighted
Excursionist
33 0 5

Hi Cynn,

This worked beautifully!  Thank you so much!  I also have another question about the slideshow.  I adjusted the font size of the title and subtitle in the theme.scss.liquid (location shown in the image).  The changes work on my desktop but not on mobile.  Is there another location where I need to change the font or add some code?  Thank you!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
100 0 16

Good day Kajal :)

One piece of advice I always give when making CSS changes is to ensure you add those changes to the very bottom of the stylesheet - instead of making them inline within the CSS code - like this:

Since there aren't any timestamps with the stylesheets, it's tough to keep track of any changes inside the code. If you add your change to the bottom, it will override what comes before it (including the mobile size) and ensure you have a clean record of your changes.

Here's a copy of the code, with the title and subtitle split up so you can edit their sizes individually:

.hero__slide .hero__title {
  font-size: 45px;
}

.hero__slide .hero__subtitle {
  font-size: 45px;
}

If you wanted to make changes to the mobile-font-size only, then you'll need to add a small piece of code like the following, which will ensure that only small/mobile screens will show these font sizes:

@media (max-width: 480px) {
.hero__slide .hero__title {
  font-size: 45px;
}

.hero__slide .hero__subtitle {
  font-size: 45px;
}
}

And you can adjust the font sizes from there :)

Let me know if you have any questions!

Cynn | Guru @ Shopify

0 Likes
Highlighted
Excursionist
33 0 5

Thanks again, Cynn!  The tip about putting code at the bottom was very helpful.  I wish I had been doing that from the get go.  As before, your suggested edit worked perfectly.  I want to ask you a zillion more questions but they aren't relevant to the topic post.  Thank you for all of your help!

0 Likes
Highlighted
New Member
1 0 0

Hi Cynthia D.,

I cannot remove buttons from slideshow. And i saw you guideline, i cannot find code there.

Could you please help me to solve this problem? 

0 Likes
New Member
14 0 0

hey can you help me figure out how to remove the arrows and dots from my slideshows please!!!

0 Likes
Highlighted
New Member
1 0 0

ty Cynthia_D_

0 Likes
Highlighted
New Member
1 0 0
How do I remove the arrow in slide show?i am using kate theme
Thanks!
0 Likes