Need help with product page design on Empire theme

[Derand]

I want to add more details with images and text to each product as I have now used Bootstrap in each product.

html.

[osamafarooqi71]

Hello @Derand ,

Yes, you can add up to 25 sections. Just either convert this design into sections or just create a simple section with all the desired designs into one and add one single section in it.

Please feel free to ping me back if you need any further assistance.

Regards,

Osama Farooqi

[NadiaAnthony]

This will take some knowledge of the repository. Could you please share the URL for your store/webpage? I recommend starting with just one product.

Generally, navigate to Online Store > Themes > "..." > Edit Code. find the section file titled "image-with-text.liquid". Make a new section file called "productname-image-with-text.liquid" (replacing the "productname" part with a simple keyword related to specific product -- ex: 'blueshirt-image-with-text.liquid').

Copy the contents from the original "image-with-text.liquid" file and paste into your new section file. Hit Save. You'll now navigate to the main product file in sections... I'm not sure what it's titled for Empire, but should be something like product.liquid. You'll add the following code before the {% schema %} tag to make sure it shows up ONLY on the "blue shirt" products. Replace "Blue Shirt" with full product title.

{% if product.title == "Blue Shirt" %}
{% section 'blueshirt-image-with-text' %}
{% endif %}

Note that if the product title is changed it won't apply anymore. Also, there are MANY ways to go about targeting/applying it to the correct products or grouping by product type. etc.

Once this is saved/applied, go to Online Store > Themes > Customize and navigate to the "Blue Shirt" product page. You should be able to edit it in the WYSIWYG editor. 

You'll have to repeat a similar process to apply it each specific image-with-text section to other products. Create a new image-with-text-section, add it to the product file and specify by correlating the file names. Ex: 

{% if product.title == "Blue Shirt" %}
{% section 'blueshirt-image-with-text' %}

{% elsif product.title == "Green Shirt" %}
{% section 'greenshirt-image-with-text' %}

{% elsif product.title == "Red Shirt" %}
{% section 'redshirt-image-with-text' %}

{% endif %}

Hope this helps! If you'd like to discuss this more, don't hesitate to send me a PM. 

[Derand]

Hi Nadia, here is my website currently and I want to switch over themes as I like the features on Empire over my Topbike theme that uses bootstrap.

https://derandmotorsports.com/

So I want to add this feature to all my bicycle and scooter products. I have two type of product pages. One that shows the html underneath and the other with a basic description and thats it - for more my basic products like chargers and stuff.

[NadiaAnthony]

You may be able to achieve this with metafields, but you can also follow a very similar method to what I described. You'll find the section similar to image-with-text (highlight?) in TopBike theme (it seems like it exists in the demo), duplicate it and continue to follow the same steps. Apply to product page section with conditions. If you'd like to discuss this more, don't hesitate to send me a PM.