Add arrows on featured collection slideshow?

Solved

Add arrows on featured collection slideshow?

Mattinnovations
Excursionist
47 0 13

Hello!

 

My website URL is:

https://drizzilicious.myshopify.com/

password is: drizzy

 

So I'm trying to edit the featured collection slideshow.. I want to add arrows on the sides so they're more visible..

 

and also decrease the space between the image and "choose options button" and make the choose options button smaller..

 

Does anyone know where I can edit these??

 

Thanks so much,

 

Matthew Ortalano

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
9571 2279 2828

This is an accepted solution.

Hi @Mattinnovations 

I check your website, the arrow is already visible.

To decrease the space between the image and "choose options button" and make the choose options button smaller.

Do you mean like this?

Made4uoRibe_0-1697138100232.png

If it is try this one. 

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.card:not(.ratio) {
    height: fit-content !important;
}
.card__content .button {
    min-height: fit-content;
}
ul#Slider-template--18694670909735__featured_collection {
    margin-bottom: 0px;
}

 

  • And Save. 
If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

View solution in original post

Replies 6 (6)

Made4uo-Ribe
Shopify Partner
9571 2279 2828

This is an accepted solution.

Hi @Mattinnovations 

I check your website, the arrow is already visible.

To decrease the space between the image and "choose options button" and make the choose options button smaller.

Do you mean like this?

Made4uoRibe_0-1697138100232.png

If it is try this one. 

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.card:not(.ratio) {
    height: fit-content !important;
}
.card__content .button {
    min-height: fit-content;
}
ul#Slider-template--18694670909735__featured_collection {
    margin-bottom: 0px;
}

 

  • And Save. 
If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Mattinnovations
Excursionist
47 0 13

Awesome!! Thank you!!

 

Just curious - do you know if I can also redirect the choose options link to go to the product page instead of the popup?

 

Thanks!!

Made4uo-Ribe
Shopify Partner
9571 2279 2828

Welcome, 

For changing the button link. Go to the Online Store > Theme > Costumize > Go to the secntion > click the button > and you will see the image below. 

Made4uoRibe_0-1697140099316.png

That you can change the link of the button. 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
Mattinnovations
Excursionist
47 0 13

It doesn't work with the "choose options" button because that is from a featured collection section - there is no button section to edit. Do you know what I mean?

Made4uo-Ribe
Shopify Partner
9571 2279 2828

For that you need to find the HTML code where it located. So you can change the link. 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
iuc
Visitor
1 0 0

hi i want to add arrows in my refresh theme but am unable to do it