How can I modify the Ride theme for my surfboard website?

Store Design
, , , , , ,
1

Hello! I have several questions related to the Ride theme. Thanks in advance for your help! My site (without the asterix): nextwavesurfboards.***com

  1. How to center “Contact Us” and “Send” button on “Partner” → “Retailer” page?
  2. How do I create the “About Ride, Stories, Ride Team, Contact” footer links, as well as Ride Logo + text blurb, in my footer?
  3. How do I change the order, left to right, of the boards displayed in Collection on Homepage? For example, I’d like to switch Nirvana and Everest.
  4. How do I add more products to Related Products “YOU MAY ALSO LIKE” on product pages? For example, my “Nirvana” product page only shows “Zenith” in that section. On the template’s Kyuss King Fish page, 4 products are displayed.
1 Like
2

Hi @TSE2 ,

It a lot of edits :joy: .

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.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:
  4. And Save.

1.How to center “Contact Us” and “Send” button on “Partner” → “Retailer” page?

h2.title.title-wrapper--no-top-margin.inline-richtext.h2.scroll-trigger.animate--slide-in {
    text-align: center;
}
.contact__button {
    text-align: center;
}

Result:

Ribe_Dagandara_0-1688761145220.png
Ribe_Dagandara_0-1688761145220.png896×501 4.69 KB

I hope it help.

3

  1. I cant find the footer links.

  2. How do I change the order, left to right, of the boards displayed in Collection on Homepage? For example, I’d like to switch Nirvana and Everest.

.collection.page-width {
    display: flex;
}
ul#product-grid {
    width: 100%;
    height: 100%;
}
li.grid__item.scroll-trigger.animate--slide-in:nth-child(2) {
    order: 4;
}
li.grid__item.scroll-trigger.animate--slide-in:nth-child(3) {
    order: 2;
}

Result:

Ribe_Dagandara_0-1688761747976.png
Ribe_Dagandara_0-1688761747976.png1366×491 110 KB

Note: If you can follow the codes you can do it by your self but if your not familiar with it dont give example give the specific change you like. Thanks!

I hope it help.