Looking for a solution to removing the arrows that appear on images in the Symmetry theme 7.2.1

Retired Boards Appdev Store Design
1

Hi there,

hoping for some help. The Symmetry theme update has moved the CSS files in the theme. There is nothing in the assets folder that allows me to add custom CSS. It seems the update back in Dec 23 has moved the style.css file. I want to remove the arrows that show up on images as I flick between images for products. This used to be an easy fix but not anymore. Ive tried both custom CSS functions and it doesn’t work.

Previously I could paste this code in to edit theme/assets/styles.css and it would make the arrows go away but not anymore.

.testimonial-list__controls {
visibility: hidden;
}
a.image-page-button.image-page-button–previous.ltr-icon {
visibility: hidden;
}
a.image-page-button.image-page-button–next.ltr-icon {
visibility: hidden;
}

Does anyone have any idea how to do this now in Symmtery 7.2.1?

Thank you!! :slightly_smiling_face:

2

Add This Code In your previous Code on theme/assets/styles.css

.testimonial-list__controls {
 visibility: hidden;
 display:none !important;
}
a.image-page-button.image-page-button--previous.ltr-icon {
 visibility: hidden;
 display:none !important;
}
a.image-page-button.image-page-button--next.ltr-icon {
 visibility: hidden;
 display:none !important;
}
3

Hi Raj-webdesigner, Thank you for your reply. The issue is there is no file in assets called styles.css (anymore), it is no where to be found in the assets folder or anywhere. Thats the issue. I can’t access the css files to add the code. Any idea where I find the place to add this code?

4

You Add This css in your Theme.css Code

.testimonial-list__controls {
 visibility: hidden;
 display:none !important;
}
a.image-page-button.image-page-button--previous.ltr-icon {
 visibility: hidden;
 display:none !important;
}
a.image-page-button.image-page-button--next.ltr-icon {
 visibility: hidden;
 display:none !important;
}
5

Hi Again, unfortunately thats not worked either and the code for this theme has been all moved and there is no longer the option for theme.css access, as its not in the list at all.

Here is the response from the theme creators.. Their suggestions have also not worked. :disappointed_face: No idea what to do, I mean how hard is it to get rid arrows on images (its driving me nuts).

Symmetry’s built on a new framework now, and the main CSS file is “main.css” - that’s on every page.

Theme Settings > Custom CSS is also good to use, but sometimes Shopify’s validation of that input leads to some weird messages and refusing to save perfectly valid CSS.

If the client might prefer it, there is a setting to make the product card image just a single basic image. No arrows, no hover, just one image: Theme Settings > Product grid > Show additional images
6

Can You Give me a Your Store Url Link