πŸ“£ The forum has moved to GitHub

We’ve switched to GitHub Discussions as the hub for our community. This will improve the experience of collaborating for everyone, sharing what you’re working on, and discussing ideas for how Swell can be improved. Existing threads will remain open, but new posts are disabled.

Go to GitHub β†’

How to Edit Product detail page in Origin theme?

Hi Everyone,

I have a basic understanding of how to import my theme to my PC and push it back to Swell's hosted account. But I am not able to find which files should I edit? Or is it even possible this way?

What I am currently trying to achieve is this:

I want to interchange the position of sections 1 and 2 in this screenshot. I want to shift the "add to cart" section to the top, just below the pricing, and the description section below it. This will open lots of possibilities and is better UX. I wanted to do it because whenever the description is a bit longer, add to cart button is not visible on the page.

Could anyone please guide me on how to do it? Swell's built-in theme editor does not have this option currently.

Answers

  • Yes, I have the same issue.

    It's easier if we can set the order of 1 and 2 (and 3, 4...) on the customize product page.

  • Greg
    edited October 2021

    Hey @Dan Brown , it looks like section 1 corresponds to the product description section within pages/products/_slug.vue, and section 2 to the product option and cart button components. Moving the product description div to the end of the purchase form area should perform the desired swap:

    // pages/products/_slug.vue

    ...

    <div v-html="product.description" />

    <!-- END Purchase form -->

Sign In or Register to comment.