Code to move the button to under the h2 rather than the collection

Store Design
,

Topic summary

A user seeks to reposition a button from the collection area to beneath an h2 heading, and also wants to remove numbers appearing between left/right navigation elements.

Support Response:

  • Multiple support teams (GemPages and BSS-Commerce) requested the store URL and password to investigate
  • User provided credentials: kickduo.com with password “godp”

Solution Provided (BSS-Commerce):

Step 1-3: Navigate to Shopify Admin → Online Store → Theme → Edit Code, then locate featured-collection.liquid file. Search for “slider-counter caption” and delete the circled code section.

Step 4: Open base.css file and add the following CSS at the end:

.slider-component-full-width.slider-mobile-gutter.slider-component-full-width.slider-component-desktop {
    display: flex;
    flex-direction: column-reverse;
}

This CSS solution uses flexbox with reversed column direction to reposition the button element as requested.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Code to move the button to under the h2 rather than the collection and also removing the numbers between the nav left and right. thank you see below for photos.

Screenshot 2023-03-13 at 16.05.31.png
Screenshot 2023-03-13 at 16.05.31.png802×1210 66.6 KB

2

Hello @kickduo ,

Can you give me your Store URL( with pass if your store password is enabled) so I can check it for you?

Kind & Best regards,
GemPages Support Team

3

Hi @kickduo

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

4

thank you very much.

kickduo.com password pdog

5

thank you very much. I appreciate any help

kickduo.com password pdog

6

Hi @kickduo

Please follow these steps:

  • Step 1: At Shopify Admin, Select Online Store → Theme → Edit Code

  • Step 2: Find and open the file featured-collection.liquid, press Ctrl + F, and paste this line into the search bar => Click Next

slider-counter caption
  • Step 3: In the line you just found, delete the code that we circled in red.

view (56).png
view (56).png924×626 29.4 KB

  • Step 4: Find and open the file base.css, add this code at the end of the file:
.slider-mobile-gutter.slider-component-full-width.slider-component-desktop {
    display: flex;
    flex-direction: column-reverse;
}
  • Here is the result:

view (57).png
view (57).png715×726 86.4 KB

We hope that it will work for you.