How can I modify collections page components on my ecommerce site?

[MotionStore111]

Hello,

I was wondering how to change a few components on my collections page.

I want to get rid of the two arrows on used to browse product photos
Also change the product sale color from green to black.

Store URL : https://merciane.com/

[Transcy]

Hello @MotionStore111 ,

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code

Go to Sections -> product-template.liquid file

Search for the code that renders the product photo gallery. It might look like this:

<div class="product-gallery">
  <!-- Code for rendering the product photos goes here -->
</div>

Comment out the code for the navigation arrows. Like this:

{% comment %}
<button class="product-gallery__prev-arrow">Previous</button>
<button class="product-gallery__next-arrow">Next</button>
{% endcomment %}

To change the product price color:

Go to Assets folder -> base.css file -> add this following code at the bottom of page

.product-price {
  color: black;
}

Save and preview

Hope this can help. Let us know if you need any further support.

Transcy

[MotionStore111]

@Transcy 

Hello,
I think I found the section you first mention, image below, not sure what to do with it. 

I dont see the second seciton anywhere in the code
<button class="product-gallery__prev-arrow">Previous</button> <button class="product-gallery__next-arrow">Next</button>' 


Also the product price color code does not change anything. 
Any alternatives?

[ZenoPageBuilder]

Hello @MotionStore111 

Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.product-item .carousel-controls {
    display: none;
}

.product-item .product-item-price-final {
    color: #000;
}

The result

[MotionStore111]

Hello @ZenoPageBuilder 

Try adding the code you instructed, looks like nothing changed.
Anything else we can try?

[ZenoPageBuilder]

Thank you for letting me know. Please change the code to this instead

.product-item .carousel-controls {
    display: none !important;
}

.product-item .product-item-price-final {
    color: #000 !important;
}

[MotionStore111]

Thank you so much Zeno

[MotionStore111]

Sorry, I just realized the original price is shown as a white font in the mobile view, is there code to fix this too?

this is what it looks like:

[ZenoPageBuilder · Accepted solution]

Yes, so please change the code like this

.product-item .carousel-controls {
    display: none !important;
}

.product-item .product-item-price-final {
    color: #000 !important;
}

@media (max-width: 749px) {
    .product-item-price-compare {
        color: #000 !important;
    }
}

[MotionStore111]

Thank you, I appreciate your help

[richardcobain]

Hi!

To remove the arrows on your collections page, you’ll need to modify the theme’s JavaScript or CSS, disabling the image navigation code. To change the sale price color, go to Online Store > Themes > Customize > Theme settings > Colors and adjust the sale price color. Alternatively, you can modify the CSS directly. After making changes, test the page to ensure everything works as expected.