Wrap text tight with image on Collection page - Simple Theme

Solved
Highlighted
Tourist
8 0 0

Hi,

I would like to add image on my collection page, which can be a banner or image that the text can wrap tight with (eg. like what we can do in Word).

Also, is it a way to make the image into the banner size in the collection page? Could both of them edit in HTML? Please help! 

alai_0-1600321723614.png

eg. alai_1-1600321847250.png

alai_2-1600321920130.png

 

0 Likes
Highlighted
Shopify Expert
3677 550 888

Hi @alai 

For that need to change html structure of collection page. we can do it just by simple css. 

Send you store url 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Tourist
8 0 0

Hi, here is the url

https://shop.asiasociety.org.hk/

https://shop.asiasociety.org.hk/collections/exhibition

Could the things edit in description box? To make image become wrap tight with text or in Banner size in the collection page? or we have to do it by code?

alai_1-1600325410841.png

 

alai_0-1600325365640.png

 

0 Likes
Highlighted
Shopify Expert
3677 550 888

If you want to make side by side section like left image and right text then you have to chaneg in html structure and css to:

try this structure by adding in description html i have coded it, you can change content as per your requrent.

<div style="width: 100%;">
        <div style="width: 50%; height: 100px; float: left; background: green;"> 
            Left Div
                <a href="https://asiasociety.org/hong-kong/exhibitions/next-act-contemporary-art-hong-kong-xuzhangxianggangdangdaiyishuzhan"><img src="https://cdn.shopify.com/s/files/1/0371/9505/5243/files/NextAct_banner_480x480.png?v=1588046956" alt=""></a>
        </div>
        <div style="margin-left: 50%; height: 100px; background: blue;"> 
            Right Div//add your text here
        </div>
    </div>
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Tourist
8 0 0

Hi, thank you for your prompt reply.

But i am not sure how to apply it, and without background color.

https://shop.asiasociety.org.hk/collections/lcsd-museums

I would plan to edit the image on left side and text on right. How the code should be? I hope to keep the background color in white of both as normal. 

0 Likes
Highlighted
Shopify Expert
3677 550 888

This is an accepted solution.

try to add this code:

<div style="width: 100%;">
        <div class="d_one" style="width: 50%;float: left;"> 
            <img src="https://cdn.shopify.com/s/files/1/0371/9505/5243/files/Banner_BMH_480x480.jpg?v=1600321140" alt="" data-mce-fragment="1" data-mce-src="https://cdn.shopify.com/s/files/1/0371/9505/5243/files/Banner_BMH_480x480.jpg?v=1600321140" style="
">
        </div>
        <div class="d_two"> 
           <p>The Leisure and Cultural Services Department proudly presents 'Bring Me Home - the Story of Hong Kong Culture, Art &amp;amp; Design’ souvenir series jointly with guest curator Stanley Wong (anothermountainman) and six renowned local designers. Inspired by collections of the Hong Kong Museum of History, Hong Kong Museum of Art and Hong Kong Heritage Museum as well as images which evoke our collective memory, designers create museum souvenirs which exude local flavour. Now everyone can bring something back home to cherish and to savour.<br data-mce-fragment="1">康樂及文化事務署邀請黃炳培先生(又一山人)為客席策展人,聯同六位本地著名設計師攜手合作,呈獻‘帶回家──香港文化、藝術與設計故事’紀念品系列。設計師或以香港歷史博物館、香港藝術館或香港文化博物館的藏品為藍本,或以香港的集體回憶作素材,設計饒富創意兼具本地色彩的紀念品,讓大家把珍貴藏品與流金歲月一併帶回家中,仔細玩味。
      </p></div><p></p>
        </div>
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Tourist
8 0 0

Yes, Prefect.

Can the image in this collection page become banner size, full width to the page, like the example I attached 

https://shop.asiasociety.org.hk/collections/exhibition

alai_0-1600328472788.png

alai_1-1600328596949.png

 

0 Likes
Highlighted
Shopify Expert
3677 550 888

This is an accepted solution.

Change description html to this one:

<div style="width: 100%;"><a href="https://asiasociety.org/hong-kong/exhibitions/next-act-contemporary-art-hong-kong-xuzhangxianggangdangdaiyishuzhan"><img style="width: 100%;" alt="" src="https://cdn.shopify.com/s/files/1/0371/9505/5243/files/NextAct_banner_480x480.png?v=1588046956" style="
    width: 100%;
"></a></div>

Do it only for given collection.  

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Tourist
8 0 0

Many Thanks

0 Likes