Custom CSS: Homepage image slideshow with 2 buttons

Store Design
, , , ,
1

Hi people,

I would like to add an image slideshow to my homepage. However, the default image slideshow option only gives the possibility for 1 button on each image, but I would like to have 2 (such as screenshot underneath), 1 with normal style and the other just with the outline style. Is this possible?
I am using the dawn theme!

Thank you very much in advance, and wishing all a good day ahead.

WVU_0-1737536269680.png
WVU_0-1737536269680.png832×463 553 KB

2

Hello @WVU ,

Could you please provide the URL/ password to your store so that I can check it and provide you with the exact solution?

3

Hi, @WVU

I can help you with it. But it needs to add some custom code. If you need my help, please let me know.

4

Hi ZestardTech,

It involves an ‘unpublished’ theme thus I do not have the URL just yet. This is the URL of the store now (but with outdated theme): https://utrecht-winkel.nl/

5

Hi AnneLuo,

Yes, I would love your help.

6

Hi, @WVU You want like this

Ahmad31_0-1737537538412.png
Ahmad31_0-1737537538412.png1060×445 487 KB

7

Hello @WVU ,

To fulfill your requirements, some custom adjustments to your Liquid code will be needed. If you would like a more detailed explanation or assistance with implementing these changes, please don’t hesitate to contact me directly via private message. I’m here to help!

Thank you.

8

Hi Ahmad31,

Yes, and then would like to have this on an image slideshow.

9

Hi, @WVU You want like this

Ahmad31_0-1737537538412.png
Ahmad31_0-1737537538412.png1060×445 487 KB

To add the “Alle producten” button to the banner, you’ll need to make a few custom changes to your theme. These include:

  1. Adding the button’s HTML code to the banner section of your theme.
  2. Styling the button (e.g., colors, size, font, and hover effect) to match your store’s design.
  3. Ensuring the button links to the correct page (e.g., the “All Products” page).

If you need assistance with these changes, I’m here to help and can implement them for you. Let me know! :blush:

10

Sure, i will do it for you

11

That sounds good Ahmad31, thanks. How would I be able to implement this?

12

@WVU

  • Go to your Shopify Admin.
  • Navigate to Online Store > Themes > Actions > Edit Code.
  • In the code editor, locate the banner section file. It could be named something like banner.liquid or located under sections/.

Inside the banner section file, find where the banner content is rendered (e.g., heading or text), and insert the button HTML code:


  Alle producten

Add the following CSS to your theme’s stylesheet (usually in assets/theme.css or assets/base.css):

.btn-secondary {
  background-color: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
}
13

Hi, @WVU

I will add the button for your store. So I need to access your store as a collaborator if possible.

14

Hi @WVU

Here’s how the updated code in your slideshow.liquid file would look with the instructions applied:

{% if forloop.index == 1 %}
    
{% elsif forloop.index == 2 %}
    
{% elsif forloop.index == 3 %}
    
{% endif %}

Steps for Adding Links:1. Replace https://your-link-for-slide-1.com, https://your-link-for-slide-2.com, and https://your-link-for-slide-3.com with the respective URLs for the pages you want each button to redirect to.

  1. For additional slides, copy and paste the {% elsif forloop.index == X %} block and update the number (e.g., forloop.index == 4) and button text. Here’s an example for a fourth slide:
{% elsif forloop.index == 4 %}

image_720.png
image_720.png720×473 115 KB

I hope this helps

Best,

Daisy