Categories list slider button customization

[Sivadarshan]

I am using dawn latest version in that, i've added custom code for collection list slider, in that slider button needs to come little inside and in mobile the collection list image takes the full width and height ( I need in square 1:1)

website : https://rugd-in.myshopify.com/

password: rugged

[DaisyVo · Accepted solution]

HI @Sivadarshan 

I see you're using the Dawn theme and want to make some tweaks to your collection list slider button. Let's break down how to achieve those adjustments:

1-Adjusting Button Position:

You want the button to be positioned slightly further inside the slider. This will likely involve editing your theme's code. While I can't access your specific code due to the password, here's a general approach:

• In your Shopify admin, go to Online Store > Themes.
• Click the "..." button next to your Dawn theme and select Edit code.
• Find the file that controls your collection list slider. It might be named something like collection-list-slider.liquid and reside in the Sections folder.
• Look for the code section that styles the button. This could involve classes or IDs like .collection-list-slider__button.
• You'll likely find properties like padding or margin that control the button's position. Experiment with adding small positive values (e.g., padding-left: 5px;) to nudge the button inwards.

2-Making Images Square on Mobile:

You mentioned wanting the collection list images to be square (1:1 aspect ratio) on mobile devices. Dawn offers some built-in options for responsive design, but you might need a bit of code tweaking.

Here's what I would suggest:

• In the same collection list slider code file you identified earlier, look for the section that controls the image styles. This might involve classes like .collection-list-slider__image.
• You might find properties like width and height set for the images. Ideally, you want them to be responsive and adjust based on screen size.
• If the code doesn't have media queries for mobile devices, you can add them. Here's a basic example:

 @media screen and (max-width: 768px) {

    .collection-list-slider__image {

      width: 100%;

      height: 100%;

    }

  }

This code snippet ensures that on screens smaller than 768px (typical mobile width), the image takes up the full width and height of its container, making it appear square.

Important Note: Editing theme code can be risky if you're not comfortable with it. Consider making a backup of your theme before implementing any changes.

3-Alternative Solutions:

• If you're not comfortable with code editing, there might be Shopify apps that allow you to customize your collection list slider without code. Browse the Shopify App Store to see if there are any options that suit your needs.
• You can also reach out to a Shopify expert or theme developer for assistance with these customizations.

If you need any further clarification or have questions about specific parts of the code, feel free to ask!

Best regards,

Daisy.