Question about Layouts in the Palo Alto Theme

Solved
Highlighted
Tourist
11 0 0

Hi - I'm new to Shopify. 

 

I'm using the Palo Alto theme (SoMa version), and in the product Section, the product layout can be either one column, or two columns. 

 

If it's a two column layout, the product image is on the left, and the text and cart buttons are on the right. 

 

Is it possible to reverse the layout, so that the text and cart buttons are on the left, and the product image is on the right?

 

I have some basic HTML and CSS skills if it requires editing some code.

 

Thank you for any advice you can provide.

 

Cheers -Ian 

Preview SoMa Theme - Palo Alto Ecommerce Website Template 2020-01-12 23-55-47.jpg

0 Likes
Highlighted

Hello @drinkrhythm,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

#shopify-section-product-template .grid {
    display: flex;
}
#shopify-section-product-template .product-images {
    order: 2;
}
#shopify-section-product-template .product-description-wrapper {
    order: 1;
}

 

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
11 0 0

Hi @oscprofessional thanks for the quick reply, I do understand your solution but allow me to clarify....see the image below:

image.png

 

I'm looking to have both layout options available to me, the product image on the left side, and the product image on the right side in a different section, on the same page. 

 

Just checking, does your solution allow for that, or given that new information does it change? Thank you -Ian 

0 Likes
Highlighted

This is an accepted solution.

@drinkrhythm,

For that you have to do customization.

Do you know liquid files

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Tourist
11 0 0

No, I'm not familiar with liquid files unfortunately.

0 Likes
Highlighted
Excursionist
17 1 2

Sorry this might be too late. Did you figure this out? If not, I could walk you through it

0 Likes
Highlighted
Tourist
11 0 0

Hi @KristinW thanks for the reply, we had a front end developer who is very good but hasn't worked with liquid files before, take a look at it. 

 

He partially completed the task but it's not 100%  solved. He did get a row to have an alternate layout (image on right side instead of left) but there were some subsequent text alignment issues, which are currently unresolved. 

 

Are you a Shopify developer? Thanks. 

0 Likes
Highlighted
Excursionist
17 1 2

I'm not a Shopify developer - I'm also a new Shopify store. I was looking for a solution to an issue and came across your question. I have a different product template for each product, so that I can use different videos showing our products, so I thought I might be able to help.   I created a different template for each product and then assigned them by product on the product page - would this help?

0 Likes
Highlighted
New Member
2 0 1

Hi @KristinW , I'm not the original poster but this would definitely help me! Can you explain a little more what you did here please? 

0 Likes
Highlighted
Excursionist
17 1 2

Hi @aanyarizaga, as I said in my post - I'm definitely not an expert and am pretty new to Shopify, but what I did was - under Edit Code > templates, I created new product page templates (prior to the Palo Alto 2.6.1 theme upgrade that enables videos to be played in the product page images) to add a custom html section for product videos - now that the upgrade allows this - I use it so I can customize the tabs based on the product group. If you copy the product.liquid template and adjust your new version according to your needs then under Products > All Products > product page > theme templates, you can assign your new template which would allow you to have different templates for each product or group of products. I recommend logging all your customizations in a spreadsheet or somewhere, so that if there is a theme upgrade or something you will have details on all of the changes you made. This might help: https://www.shopify.com/partners/blog/shopify-alternate-templates

Hope this helps! Kristin 

1 Like