How can I make a collection list full width Parralax Theme?

[Mitch23]

Hello,

Is there anyway I can make the collection list full width (no space on each side? )

and add a caption on top of each collection title?

www.flexibleneon.com.au

thank you

[HDL-Shin]

Hi @Mitch23 ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css, theme.css or styles.css

Step 3: Insert the below code at the bottom of the file → Save

@media only screen and (min-width: 768px) {
 .boost-sd-layout {
    padding: 0 20px !impotant;
    max-width: fit-content !important;
 }
}

Final Result:

Hope this can help you,

Kind regards,

HDL-Shin

[Arif_Shopidevs]

Hi @Mitch23

You can insert this css in your base.css file and it will do what you want.

Step 1: Navigate to your Shopify admin panel and go to Online Store.

Step 2: Click on “Themes” and then select Edit code

Step 3: Find base.css

or add this in custom CSS area of your section

.featured-promotions__item {
    margin: 0px !important;
}
h3.featured-promotions__title {
    position: absolute;
    bottom: 20px;
    color: #FFF;
    
    text-align: center;
    display: block;
    padding-left: 20px;
}

The final output will be

Hope this solve your issue.

Meanwhile, if you want full control of collection slider with different options you can check this app EasyDisplay: Product Showcase - EasyDisplay: Product Showcase (Shopify Product Slider App) | Shopify App Store

Thank you

[jameeshah]

To create a full-width collection list with a parallax effect in a website using the Parallax theme on platforms like Shopify, WordPress, or any other, you’ll typically need to do some customization within the theme’s settings or through custom code. Here’s a general approach:

1. Access Theme Customization Options: Log in to your website’s admin panel and navigate to the theme customization settings. This is where you can make changes to the layout, design, and functionality of your website.

2. Find the Collection List Section: Look for the section that controls the collection list on your homepage or the page where you want to display it. Depending on the platform and theme, this section might be named differently, but it’s usually labeled something like “Collections” or “Featured Collections.”

3. Adjust Width Settings: Within the collection list section settings, see if there are options to adjust the width of the section. Look for settings related to layout or section width. Ideally, you want to set the width to 100% to make it full-width.

4. Enable Parallax Effect: If your theme supports parallax scrolling effects, there might be an option to enable it within the section settings. Look for a checkbox or toggle switch labeled “Parallax” or something similar. Enable this option to add the parallax effect to your collection list.

5. Save Changes: Once you’ve made the necessary adjustments to the width and enabled the parallax effect, save your changes and preview your website to see how it looks. Make any additional tweaks as needed.

6. Custom Code (if necessary): If your theme doesn’t provide options for full-width or parallax collection lists, you may need to add custom code. This typically involves editing the theme’s CSS or Liquid files to override default styles and add custom functionality. If you’re comfortable with coding, you can try this approach, but be sure to back up your theme files and proceed with caution.

7. Test Responsiveness: After making changes, be sure to test your website on different devices (desktop, tablet, mobile) to ensure that the full-width collection list and parallax effect display correctly and are responsive across various screen sizes.

If you’re not comfortable making these changes yourself, consider reaching out to a web developer or designer who can assist you with customizing your theme to achieve the desired look and functionality.

[Mitch23]

I am after the collection list on the homepage

[Mitch23]

Sorry this the correct link https://tmjeehbnnmmq93yk-72140980502.shopifypreview.com as it is not published yet.

[Arif_Shopidevs]

Follow bellow solution , it is for home page

[HDL-Shin]

Hi @Mitch23 ,

Pls, Insert the below code at the bottom of the file → Save

.section:has(.column.medium-down--one-half.thumbnail) {
  max-width: 100% !important;
}

Result:

Hope this can hep you,
Kind regards,

HDL-Shin

[Arif_Shopidevs]

Hi,
You can use this css

.shopify-section--collection-list .thumbnail {
    margin: 0px!important;
}

, it will solve your issues.