moving everything on my online store to the edges

Store Design
, ,

Topic summary

A user seeks to modify their Shopify store (Origin 15.2.0 theme) to achieve an edge-to-edge layout across all pages, eliminating default margins and padding. They want content—including images, text, and slideshow elements—to extend fully to screen edges on both desktop and mobile.

Additional requests include:

  • Making the mobile slideshow cover the full screen
  • Adding navigation arrows to product image galleries with looping functionality
  • Fixing a non-functional add-to-cart button
  • Adding a “Buy Now” button alongside the cart button
  • Relocating the profile icon from the header into the hamburger menu

One respondent suggested custom CSS for edge-to-edge layout (.container modifications), viewport-based sizing for mobile slideshows (100vw/100vh), and JavaScript or third-party apps for image navigation. They also recommended checking browser console for cart button errors.

Current status: The suggested CSS solutions did not resolve the issues. The discussion remains open with no working solution yet provided.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hey Guys,

I am looking to move all my pictures and writing on theme to the edges of the website I am using the theme Origin 15.2.0. and I want the home page, products page, collection pages, all the writing (including the writing in my slide show) and everything else to be at the edges of the screen. I would like all of that to be touching the sides of the screen please.

I have chatted with an advisor already and she told me to come on here and ask you guys for a possible code to put into the website but this is the link to the website and I will provide screenshots of what I want as well.

https://7d1dw0-pw.myshopify.com/

Screenshot 2025-04-05 at 10.40.15 pm copy.png
Screenshot 2025-04-05 at 10.40.15 pm copy.png3024Ă—1964 762 KB

Also with the slideshow on mobile it doesn’t cover the screen so is there a way to make it cover the screen when you go into the website on a mobile.

I would also like to know if there is a way to put arrows on my products for my customers to easily navigate their way through the pictures of the product they are interested in just by simply pressing arrows to either go back or forward to the next pictures and if the pictures could loop so they just repeat that would be great. I will provide a screen shot.

Screenshot 2025-04-05 at 11.13.12 pm.png
Screenshot 2025-04-05 at 11.13.12 pm.png3024Ă—1964 843 KB

For some reason as well I can’t add things to my cart, I press the button and it just doesn’t work. Would there also be a way to add a buy now button beside the add to cart button on the product page as well please.

I know I have asked for a lot but honestly, any help would be greatly appreciated thank you.

Thank you in advance

2 Likes
2

Really sorry I forgot to add this in but if you could get rid of the profile icon in the header and move it inside of the hamburger button at the bottom that would be great please.

Screenshot 2025-04-05 at 11.48.40 pm.png
Screenshot 2025-04-05 at 11.48.40 pm.png3024Ă—1964 469 KB

3
  1. For moving everything to the screen edges, you’ll need custom CSS. For example:

.container {
margin: 0;
padding: 0;
}

  1. To make slideshows cover the mobile screen, update your slider CSS:

.slider-class {
width: 100vw;
height: 100vh;
}

  1. For product image arrows and looping, you might need JavaScript/jQuery tweaks or a third-party app. Look for a Shopify slideshow app with these features.

  2. If the add-to-cart button isn’t working, check for JavaScript errors in your browser’s console. For adding a buy now button, you might need to modify the theme’s product template file.

4

Neither of them suggestions worked but thanks for trying.