Vendor list page design issue

New Member
8 0 0

Hi,

We created a vendor list page or brands list page and have an issue with the design. The text is sitting outside of the layout box and we cannot see where or how to get it back in the box. The arrows show where it is and where it should be.

 

The code was used from the following page: https://www.blackbeltcommerce.com/vendor-page-in-shopify-the-clever-way-to-automatically-show-vendor...

 

brands.JPG

0 Likes
Shopify Expert
665 170 199

Hi, @teem4 ,

This is Evita from On The Map.

 

Can you add the store URL, so I can debug your code?

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
New Member
8 0 0

Hi,

 

Here is the link: https://studio-six-art-supplies.myshopify.com/

 

thank you

0 Likes
Shopify Expert
665 170 199

Can you add the password and link to brands?

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Shopify Expert
2686 67 681

I see you've tried to fix this with margins.

Your theme has a class to limit the width of the element but it's different from the classes used in your snippet of code.

So I'd recommend removing the margin-xxx rules you've added to your styles asset and instead edit the liquid code from

<ul class="vendor-list block-grid three-up mobile one-up">

to 

<ul class="vendor-list container block-grid three-up mobile one-up">

(I'd say you can safely remove the following classes -- block-grid three-up mobile one-up -- as they are not present in your theme, but it probably would not hurt to keep them...)

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Shopify Expert
665 170 199

I can see that you left your shadow box without any content - https://prnt.sc/pb3crt

You need to add the vendor-list to the box-page div.  - https://prnt.sc/pb3d6c

 

The result will look like this - https://prnt.sc/pb3cjy

 

Full code:

<div class="col-sm-12">
          <div class="sfbox box-page">
            <ul class="vendor-list block-grid three-up mobile one-up">








<li class="vendor-list-item"><a href="/collections/vendors?q=3M" title="3M">3M</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Alvin" title="Alvin">Alvin</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Apollon%20Artist%20Canvas" title="Apollon Artist Canvas">Apollon Artist Canvas</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Arches" title="Arches">Arches</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Art%20Spectrum" title="Art Spectrum">Art Spectrum</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Bennett" title="Bennett">Bennett</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Bienfang" title="Bienfang">Bienfang</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Blair" title="Blair">Blair</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Bob%20Ross" title="Bob Ross">Bob Ross</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Canson" title="Canson">Canson</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Caran%20D%27Ache" title="Caran D'Ache">Caran D'Ache</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Cartiera%20Magnani" title="Cartiera Magnani">Cartiera Magnani</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Clairefontaine" title="Clairefontaine">Clairefontaine</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Colorfin%20LLC" title="Colorfin LLC">Colorfin LLC</a></li>









<li class="vendor-list-item"><a href="/collections/colour-shaper">Colour Shaper</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Colourcraft" title="Colourcraft">Colourcraft</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Conte%20a%20Paris" title="Conte a Paris">Conte a Paris</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Crescent" title="Crescent">Crescent</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Da%20Vinci%20Paints" title="Da Vinci Paints">Da Vinci Paints</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Daler-Rowney" title="Daler-Rowney">Daler-Rowney</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Daniel%20Smith" title="Daniel Smith">Daniel Smith</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Demco" title="Demco">Demco</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Derwent" title="Derwent">Derwent</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Dr.%20Ph.%20Martin%27s" title="Dr. Ph. Martin's">Dr. Ph. Martin's</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Dynasty" title="Dynasty">Dynasty</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Eco-House" title="Eco-House">Eco-House</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Escoda" title="Escoda">Escoda</a></li>









<li class="vendor-list-item"><a href="/collections/fabriano">Fabriano</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Finetec" title="Finetec">Finetec</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Fredrix" title="Fredrix">Fredrix</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Gamblin" title="Gamblin">Gamblin</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=General%20Pencil%20Co." title="General Pencil Co.">General Pencil Co.</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Golden%20Artists%20Colors%2C%20Inc." title="Golden Artists Colors, Inc.">Golden Artists Colors, Inc.</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Great%20American%20Art%20Works" title="Great American Art Works">Great American Art Works</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Heinz%20Jordan" title="Heinz Jordan">Heinz Jordan</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Holbein" title="Holbein">Holbein</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Jack%20Richeson%20%26%20Co." title="Jack Richeson &amp; Co.">Jack Richeson &amp; Co.</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Jacquard" title="Jacquard">Jacquard</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=JotzSpotz" title="JotzSpotz">JotzSpotz</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Krylon" title="Krylon">Krylon</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=LANA" title="LANA">LANA</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Lascaux" title="Lascaux">Lascaux</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Legion%20Paper" title="Legion Paper">Legion Paper</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Liquitex" title="Liquitex">Liquitex</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Logan%20Graphic%20Products%2C%20Inc." title="Logan Graphic Products, Inc.">Logan Graphic Products, Inc.</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Lukas" title="Lukas">Lukas</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Lyra" title="Lyra">Lyra</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Maimeri" title="Maimeri">Maimeri</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Martin%2FF.%20Weber%20Co." title="Martin/F. Weber Co.">Martin/F. Weber Co.</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Masterson%20Art%20Products" title="Masterson Art Products">Masterson Art Products</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Mijello" title="Mijello">Mijello</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Milan" title="Milan">Milan</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Molotow" title="Molotow">Molotow</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=MoMA" title="MoMA">MoMA</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Mungyo" title="Mungyo">Mungyo</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=North%20Light%20Books" title="North Light Books">North Light Books</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Northlight%20Media" title="Northlight Media">Northlight Media</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Pebeo" title="Pebeo">Pebeo</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Pelikan" title="Pelikan">Pelikan</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Pentel" title="Pentel">Pentel</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Princeton%20Artist%20Brush%20Co." title="Princeton Artist Brush Co.">Princeton Artist Brush Co.</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Prismacolor" title="Prismacolor">Prismacolor</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Reeves" title="Reeves">Reeves</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Royal%20Sovereign%20Ltd." title="Royal Sovereign Ltd.">Royal Sovereign Ltd.</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Sakura" title="Sakura">Sakura</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Sanford" title="Sanford">Sanford</a></li>









<li class="vendor-list-item"><a href="/collections/saunders">Saunders</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Schmincke" title="Schmincke">Schmincke</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Sennelier" title="Sennelier">Sennelier</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Sharpie" title="Sharpie">Sharpie</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Sienna%20Plein%20Air" title="Sienna Plein Air">Sienna Plein Air</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Snazaroo" title="Snazaroo">Snazaroo</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Specialty%20Tapes" title="Specialty Tapes">Specialty Tapes</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=SpectraFix" title="SpectraFix">SpectraFix</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Speedball%20Art%20Products" title="Speedball Art Products">Speedball Art Products</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=STAEDTLER" title="STAEDTLER">STAEDTLER</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Strathmore%20Artist%20Papers" title="Strathmore Artist Papers">Strathmore Artist Papers</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=The%20Colour%20Wheel%20Company" title="The Colour Wheel Company">The Colour Wheel Company</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=The%20Langton" title="The Langton">The Langton</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Unison" title="Unison">Unison</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=USAQ" title="USAQ">USAQ</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=vendor-unknown" title="vendor-unknown">vendor-unknown</a></li>









<li class="vendor-list-item"><a href="/collections/vendors?q=Weber" title="Weber">Weber</a></li>









<li class="vendor-list-item"><a href="/collections/winsor-newton">Winsor &amp; Newton</a></li>


</ul>
          </div>
        </div>
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
New Member
8 0 0

I changed the code in page.vendorlist.liquid but I couldn't find the snippets you screen grabbed. I tested it with both these options:

 

<ul class="vendor-list container block-grid three-up mobile one-up">

&

<ul class="vendor-list block-grid three-up mobile one-up">

0 Likes
Shopify Expert
2686 67 681

This is what I see: before suggested changes:

Untitled 2.jpeg

And after (plus margin reset back to normal)

Untitled.jpeg

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
New Member
8 0 0

I noticed the margins changing and that's about it. Nothing went inside the "shadow box" everything was still showing below it. I tried multiple ways

0 Likes